Solved

Multiple questions aobut the WebUI


Userlevel 3
Badge +1

In your answer to my previous question, you mentioned I could keep the questions coming. Last couple of days I have been playing quite a bit with AIMMS and the WebUI again, so here are some of my questions @Pratap Kumble  :wink:

  • In the winUI, I had the option of denoting a string parameter that should be used for the display of the values of an index of a parameter in the pivottable. For example, my set could be elements {0,1,2} but I could set a string parameter to be used to display the values of the set, meaning in the table it would be shown as { “My option 1”, “My option 2”, “My option 3” }
    Is this still easily possible and am I overlooking something, or is this option not possible anymore?
  • One of the options I liked in the winUI is setting the columns to auto-width based on the data that was displayed. This way I did not have to manually figure out what is the best width for each of the columns. Is this option still possible in the webUI?
  • Do I understand correctly that the difference between annotation identifier and highlight annotations is that the first will re-render the complete widget when the annotation changes, while the second one only re-renders the relevant cells in the widget?
  • If I want to introduce an empty line in my grid (e.g. show two drop down boxes in a side-panel, then a bit of whitespace or an empty line, then a button with a certain action). Can I do that easily in the page designer, or should I introduce additional padding/margin on the top of the button using css?
  • Is there a way to hide an index column in table if it only contains a single element (like similar to the winui pivottable hide if single identifier)
  • Is it possible to have a single select not being a drop-down box, but a row for each of the elements (similar to what you have in the multiselect)?
  • When using the grid-page layout, how can you delete widgets that you don’t want to have anymore? I can move them to “Unsassigned widgets” but I can’t seem to completely remove the widget?
  • In a table, I can set the number of decimals, but I cannot seem to set the number of decimals per identifier (e.g. some identifiers I want to show with 3 decimals, while others I want to show with 0 decimals).
  • In a table, can I hide 0 values? I know that if a complete identifier is 0, it is hidden (unless I set the display domain to 1 for example). But sometimes I just want to just hide any of the 0 values to keep the focus on the non-zero values. One way I can think is introducing a highlight annotation that indicates a parameter value is 0 or not. In case of 0, I would use a css rule on this annotation to not display the contents. Is this indeed the way I should do this, or are there other/smarter ways?

 

Although quite some questions, have to say that I am getting more comfortable with the webUI and starting to like it more and more  There might still be more questions coming in the future:grinning:

icon

Best answer by Pratap Kumble 3 May 2021, 08:11

Hi ​​​@gdiepen,

Great to hear you like the WebUI and are eager to try more out! :)

Please find my comments for each of your questions:

  1. You can add an Element Text annotation layer to the Set, and specify a string parameter that translates the element names to the desired text. The WebUI will pick this up from the Model.
  2. Auto column width is not yet available in WebUI. We have this on our roadmap as improvements on the table widget.
  3. Correct. - https://documentation.aimms.com/webui/css-styling.html#highlighting-experimental
  4. Everything is possible with the grid layout! :)
    I would suggest using grid.layoutit.com to create layouts and then just configure it in the custom layouts in the WebUI. Here is an example of the layout of what you might want. https://grid.layoutit.com/?id=oQnjCG7 you can then convert it to the custom layout like so
    {
    "componentName": "Grid",
    "props": {
    "gridTemplateColumns": "1fr",
    "gridTemplateRows": "2fr 0.1fr 1fr 5fr",
    "gridTemplateAreas": "\"Selection-Boxes\" \"GAP\" \"Button\" \"Extra\" "
    },
    "items": [
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "Selection-Boxes",
    "name": "Selection-Box-1",
    "gridAutoFlow": "row"
    }
    },
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "GAP",
    "name": "GAP",
    "gridAutoFlow": "column"
    }
    },
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "Button",
    "name": "Button",
    "gridAutoFlow": "column"
    }
    },
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "Extra",
    "name": "Extra",
    "gridAutoFlow": "column"
    }
    }
    ]
    }

     There is a short video in the above article that would help get going quickly on grid layouts.

  5. I believe this should be possible with the display domain! I will get back to you on this!
  6. You can make the multi-select select only one element by assigning an element parameter to it. 
  7. One way to do this easily is to enable Application Management in the Experimental Features; From the App tab, you can now see the list of widgets under each page and delete the unwanted widget here. It is currently not possible to delete widgets from the page configurator, we will extend the flyout menu to copy/paste/rename and delete widgets soon.
  8. This is not yet available in WebUI. We have it on our roadmap and are working towards it. We plan to introduce identifier-specific options for eg. Decimal points, Visibility, etc.
  9. CSS is currently the only way and what you describe is the right way! I’ll take this down as an improvement for the table widget!

I hope my reply answers the questions adequately! I will get back to you on the 5th point for the ability to hide a column with just one value!

Thanks!

Pratap

 

 

View original

2 replies

Userlevel 3
Badge +2

Hi ​​​@gdiepen,

Great to hear you like the WebUI and are eager to try more out! :)

Please find my comments for each of your questions:

  1. You can add an Element Text annotation layer to the Set, and specify a string parameter that translates the element names to the desired text. The WebUI will pick this up from the Model.
  2. Auto column width is not yet available in WebUI. We have this on our roadmap as improvements on the table widget.
  3. Correct. - https://documentation.aimms.com/webui/css-styling.html#highlighting-experimental
  4. Everything is possible with the grid layout! :)
    I would suggest using grid.layoutit.com to create layouts and then just configure it in the custom layouts in the WebUI. Here is an example of the layout of what you might want. https://grid.layoutit.com/?id=oQnjCG7 you can then convert it to the custom layout like so
    {
    "componentName": "Grid",
    "props": {
    "gridTemplateColumns": "1fr",
    "gridTemplateRows": "2fr 0.1fr 1fr 5fr",
    "gridTemplateAreas": "\"Selection-Boxes\" \"GAP\" \"Button\" \"Extra\" "
    },
    "items": [
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "Selection-Boxes",
    "name": "Selection-Box-1",
    "gridAutoFlow": "row"
    }
    },
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "GAP",
    "name": "GAP",
    "gridAutoFlow": "column"
    }
    },
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "Button",
    "name": "Button",
    "gridAutoFlow": "column"
    }
    },
    {
    "componentName": "WidgetArea",
    "props": {
    "gridArea": "Extra",
    "name": "Extra",
    "gridAutoFlow": "column"
    }
    }
    ]
    }

     There is a short video in the above article that would help get going quickly on grid layouts.

  5. I believe this should be possible with the display domain! I will get back to you on this!
  6. You can make the multi-select select only one element by assigning an element parameter to it. 
  7. One way to do this easily is to enable Application Management in the Experimental Features; From the App tab, you can now see the list of widgets under each page and delete the unwanted widget here. It is currently not possible to delete widgets from the page configurator, we will extend the flyout menu to copy/paste/rename and delete widgets soon.
  8. This is not yet available in WebUI. We have it on our roadmap and are working towards it. We plan to introduce identifier-specific options for eg. Decimal points, Visibility, etc.
  9. CSS is currently the only way and what you describe is the right way! I’ll take this down as an improvement for the table widget!

I hope my reply answers the questions adequately! I will get back to you on the 5th point for the ability to hide a column with just one value!

Thanks!

Pratap

 

 

Userlevel 3
Badge +1

Thanks for the detailed answer @Pratap Kumble 

Reply


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

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