Solved

Custom Widget in WebUI

  • 30 June 2021
  • 4 replies
  • 53 views

Badge

I am unable to create a simple custom widget using the AIMMS widget framework documentation from https://documentation.aimms.com/webui/dev-tut-1.html#your-first-custom-widget.

I have reproduced all the steps as listed in the above webpage including

  1. Using NetworkData folder
  2. Creating subfolders in MainProject/WebUI/resources
  3. Creating the js files
  4. Trying to add the the widget (after refreshing page)

I want to use the custom widget for two functions

  1. Visualization for javascript d3 library
  2. Embedding an html file in the widget

Is anyone facing a similar problem/ or is aware of a solution (or an easier alternative)?

 

 

icon

Best answer by mohansx 30 June 2021, 21:12

View original

4 replies

Userlevel 5
Badge +2

@vyomthakker 

The example included in Integrate AIMMS with R — AIMMS How-To uses a custom iframe-widget. See a folder with same under in the MainProject//WebUI//resources//javascript folder. 

You can use this to display HTML files in AIMMS WebUI. Perhaps this will also help you in your attempt to build a different custom widget ?

Userlevel 4
Badge +1

@vyomthakker 

 

 

Future plans but maybe good you are aware.

It would help us if you could add your thoughts to this post.

Thanks in advance.

Badge

Thank you @mohansx. Just to clarify: In the post, the custom iframe-widget is in R which can be accessed via a docker or Plumber API. Do you think that’s the best way to have my own html/ javascript embedded onto the webUI?

Also I am not sure how the WebUI/resources/javascript in the example was created. It isn’t mentioned in the page, wondering whether it was created automatically? Also the sankey diagram does not actually show up on the webUI (although its present in the folder)

Thank you @Patrick. Is there an estimated date for when this feature will be made available?

 

 

 

Userlevel 5
Badge +2

@vyomthakker you are confusing between two different items. In your original request, you mentioned

 

I want to use the custom widget for two functions

  1. Visualization for javascript d3 library
  2. Embedding an html file in the widget

It is your responsibility to write the javascript code that 

  1. takes data from AIMMS and generates the visualization
  2. works with the AIMMS custom widget framework

The example I shared is an example of one custom widget. The sourcecode WebUI/resources/javascript/iframe was developed to display a iframe window in AIMMS WebUI. You can embed any HTML file/code in another web page using a <iframe> </iframe> block in html. By adding this folder to your AIMMS project, you will see an additional “iframe” item in the drop down when you are creating a new widget. 

 

The example only uses R, plumbR etc., because I do not know enough javascript to do all that but I know R instead. So, using the networkd3 library (which is an R wrapper around d3) I create the HTML visualizations. 

 

Attached is a version of the example that has the iframe widget included.

Reply


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator