Side Panels

This section describes various tasks related to WebUI side panels.

Important

Side panels are available in software versions from AIMMS 4.64 onwards.

Side panels are 2 column width pages that can be configured with different widgets and accessed on different/all pages in an application via tabs on the right-hand side of the page. Side panels help build model interactions. These help to free up real estate on pages, or also duplicate widgets that are required on different pages, such as filters.

../_images/SP_TabScreen.png ../_images/SP_TabScreen_open.png

What can side panels be used for?

Side panels can be used for various purposes, such as filters, displaying KPIs, making quick notes, showing help text.

../_images/SP_Examples.png

Adding a Side Panel

Adding a side panel page is similar to adding a page.

In the page manager you will notice a few changes. The plus icon for the Main project and in the kebab menu for other pages has been replaced. The main project now has a kebab menu, which when clicked, shows 2 options, i.e. Add New Page addpage and Add Side panel sidepanel.

The plus icon for pages has been removed and 2 new icons have been introduced addpage and sidepanel, as in the main project add options.

Click on the Insert side panel page icon and give it any name you desire. You cannot give a name that you have already used for other pages or side panels.

../_images/SP_addandname.png

You can differentiate between pages and side panels by the icons that represent each type.

../_images/pagesidepaneldiff.png

Side panels can be added to any level in the page tree, just like any normal page. Unlike Pages, Side panels do not appear in the Menu (navigation) and can only be accessed via the page manager. Side panels has the same options of a page i.e Rename, Delete, etc. You can also move the side panel the same way pages can be moved.

Note

Avoid adding pages under side panel pages. These pages will not be shown in the navigation menu.

Adding widgets to a Side Panel

Adding widgets to a side panel page is the same as adding widgets to any other page.

Step 1: Click the side panel page you want to add widgets to in the page manager

../_images/SP_Addwidget1toSP1.png

Step 2: You will see a 2-column width page. Open the Widget Manager.

../_images/SP_Addwidget1toSP2.png

Step 3: Add desired widgets to the page.

../_images/SP_Addwidget1toSP3.png ../_images/SP_Addwidget1toSP4.png

Note

  • Changing the width of a widget will not have any effect as the page is restricted to only 2 columns. You can change the height of the widget as required.
  • If the widgets added exceed the page height a scroll will appear in the side panel.

Configuring side panels

Side panels can be configured by the application developer via the AIMMS model. A new declaration has been added to the AimmsWebUI library called Public Page and Widget Specification Declarations under the Pages and Dialog Support section, used to configuring side panels. The set SidePanelSpecification declared inside Public Page and Widget Specification Declarations is used for configuring the side panels as illustrated here in the next steps.

../_images/SidePanelSpecificationset.png

This set has 4 elements representing side panels properties:

  1. displayText: Is the text/label you would like the side panel tab and header to have.

  2. pageId: When a page or side panel is created it is has a unique pageId. You can find all the side panel pageIds in the set AllSidePanelPages.

    ../_images/Allsidepanelpagesdata.png ../_images/SP_AllsidePanelPages_data.png
  3. tooltip: The text here would be displayed when the user hovers over that respective side panel tab.

  4. state: This is the state for the side panel, i.e Active and Hidden.

Note

  • If the set AllSidePanelPages is not yet filled with all side panel pages, please run the procedure GetAllPages. You can find this procedure in Page Support section under Public Pages Support Procedures.
  • The “state” property is not yet in use, but will be applicable in future releases. In side panels it is considered as Active by default. You can use domain conditions to show or hide side panels on a page.

To configure side panels on a page, create a string parameter indexed on the ExtensionOrder set with webui::indexPageExtension and SidePanelSpecification set with webui::indexSidePanelSpec indices, for example homepageSP(webui::indexPageExtension,webui::indexSidePanelSpec) as shown here:

../_images/SP_homepageSPidentifier.png

Note

When creating the string parameter to configure side panels, the first index needs to be in a subset of integers. You can create your subset of integers and use the respective index as well. To make it convenient you can use the index from the pre-declared set ExtensionOrder for this purpose i.e. indexPageExtension.

Right click the string parameter and click on the Data option in order to open the data page:

../_images/SP_stringparameterdata.png

Add the details for the side panels you would like to show on this page. For example, if your page tree has 5 pages and 7 side panels, like here

../_images/SP_pagetree.png

and you want 3 side panels on the “home” page, namely:

  1. Filters
  2. Quick Notes
  3. Help

then the data in the configuration string parameter may be filled in as follows:

../_images/SP_homepageSPidentifier_data.png

Note

  • Side panels appear in the same order from top to bottom as they appear in the data of the string parameter.
  • If you enter an incorrect pageId, then the corresponding side panel tab will not be shown.

Configuring the string parameter on respective pages

In the WebUI, navigate to the respective page. In the Page Settings you can locate the Page Extensions option:

../_images/SP_configuresidepanel.png

Add the string parameter created for that respective page in the “Side Panels” field.

../_images/SP_configurehomepage2.png

Once you have added the string parameter, the respective side panel tabs will appear on that page.

../_images/SP_3panels.png

Similarly, you can create some (other) string parameters for other pages and configure them using the same steps.

You can configure as many side panels as you need in your application. However, please note that, since there is limited screen space, AIMMS WebUI only displays the top 6 side panels on each page.

Interacting with side panels

A side panel can be opened and closed by clicking on the respective tab. Hovering over a side panel will show you the tooltip that was configured in the model.

../_images/SP_tabinteraction.png

Clicking on the tab highlights that tab and slides opens with the widgets that were added to that respective side panel page.

../_images/SP_tabinteraction_open.png

Last Updated: February, 2020