Publish your first WebUI app on PRO

  1. Download a WebUI-enabled version of AIMMS (which is a so-called installation-free version of AIMMS). Version numbers of WebUI-enabled versions of AIMMS (and corresponding PRO packages) are of the form 4.3.1.xx-yy.
  2. Make sure you have a recent version of Chrome set as your default browser.
  3. Open an existing AIMMS model or create a new one.
  4. Extend your model with the AimmsPROLibrary and the AimmsWebUI system libraries. To add AIMMS Libraries to your model:  Go to the Library Manager of AIMMS and select Add System Library.
  5. Select the Start Web UI command from the AIMMS Tools menu.
  6. Open your browser and navigate to ‘http://localhost:12001/YourAppName’.
  7. Click the pencil icon (page editing) next to the page title to expand the widget pane.
  8. Click the ‘+’ sign to add your first widget and carry on from there.
  9. To add pages, click the ‘hamburger’ icon in the top-left-corner.
  10. When your UI is ready to publish, return to the AIMMS desktop application and save an AIMMS pack, just like you are used to for PRO. Make sure you include the PRO libraries as well as the WebUI subfolder of your project in your aimmspack. Remember to prepare the model for solving on PRO including automatically loading the results upon solve completion (in case your model requires a solve).
  11. Make sure the WebUI-enabled version of PRO 2.0 has been installed and you have access to it. Also make sure that a WebUI-enabled PRO-package has been published on PRO.
  12. Now open your PRO portal and publish the AIMMS pack that you saved in step 11.
  13. You can launch this app from the PRO portal and the WebUI will open in your browser.


To be able to develop a web interface for your AIMMS application using the AIMMS WebUI, you need

To install the AIMMS WebUI, download the WebUI-enabled versions of the AIMMS. Always update both products (AIMMS and the AIMMS WebUI) if you are upgrading an existing installation. To publish your web application on PRO, you need

WebUI for app development on a local computer

The WebUI-enabled version of AIMMS is an installation-free version of AIMMS. These version are typically unpacked in the \Local\AIMMS\IFA\Aimms folder. The WebUIDev subfolder of the AIMMS installation contains WebUI support files, which are

When WebUI has been successfully installed, the Tools menu will contain a Start Web UI and a Stop Web UI command. Starting the WebUI will start the Cube Server and launch a WebUI Server on your local machine. By default, the Cube Server serves on port 12002 and the WebUI Server serves on port 12001. Amongst others, the WebUI Server serves files with WebUIDev\www as the document root. In addition, the WebUI Server stores widget content in the WebUI subfolder of your AIMMS project.

The WebUI application folder layout

An AIMMS WebUI-ready application is an ordinary AIMMS application that contains a WebUI subfolder of the project folder. All WebUI pages and widgets will be stored (by the WebUI Server) in the pages and widgets subfolder of the WebUI folder. In addition, it is possible to store application-specific resources in the resources subfolder (of the WebUI folder). Application-specific images should be stored in the resources/images subfolder. Application-specific JavaScript files (e.g. widget (addons)) and CSS (styling) should be stored in the resources/javascript and resources/css subfolders resp.

Opening an existing AIMMS WebUI example

First, download the MealsRUs example form the WebUI-Examples GitHub repository. Unzip the downloaded application. Start the web-enabled AIMMS version you installed. Once the project is opened, start the WebUI by pressing the Start Web UI command from the Tools menu. A command window will open that shows the output of the WebUI Server that is running. Finally, open the (Chrome) browser and navigate to http://localhost:12001/MealsRUs.

Creating your own AIMMS WebUI page

To create a new page for your model, press the ‘hamburger’ icon on the top left position of your browser window. A navigation menu will open. Press the big ‘+’ at the bottom of this window, specify a name for your new page and press the ‘+’ button to add the new page to the list of available pages. To navigate to the newly created pages, press the page in the list of available pages. Please note, that you are free to use slashes in the name of you page in order to categorize the pages for you application. In order to create a new widget on your page, press the Edit Page button, the ‘pencil’ icon next to the page title. A widget panel will open from the left. This widget panel lists all widgets that are present on the page. By pressing the big ‘+’ at the bottom of this list, a New Widget wizard will pop-up that allows you to specify contents, name and widget-type (e.g. table, bar chart). Since the widget database is shared for all pages of your application, please make sure that the names for all pages and widgets are unique throughout your application. The ‘cog wheel’ button (in the upper right corner of a widget) will open a popup window that allows you to change the options for the widget. Option changes are automatically saved to the WebUI Server.

Gantt chart widget

With the introduction of AIMMS 4.5, the AIMMS WebUI framework has been extended with a Gantt chart widget. This Gantt chart widget is a first version and will be further improved in future AIMMS WebUI versions.
When pivoting the Gantt chart widget, a row of one or more jobs (i.e. a resource) is created for every label (or tuple of labels) in the set corresponding to the index (or indices) in the resources part. All other indices are part of the jobs part.
The first version of the Gantt chart has the following restriction

How to give a widget a custom position

sticky widget
Figure 1.

To give a widget a custom position on the screen, open the sidebar, click on the widget and tick the “custom position” option (Figure 1). This will take the widget out of the natural flow of the rest of the page, and is thus placed on top of the widgets list. To position it where you want, drag the widget (using it’s title bar) to your preferred location, where it will stay.

Because custom positioned widgets are taken out of the natural flow, they also do not get repositioned on other screens like the other widgets. Keep this in mind when making a WebUI for multiple screensizes.

Data management support

To use the data management features through the WebUI, the ‘Data management style’ option of your AIMMS application has to be set to ‘Disk files and folder’. This is already the default for new AIMMS 4 projects. The WebUI has a data management pane, which lists all available data cases. The data management pane allows you to load, save and delete cases associated to your AIMMS project. It can be opened with the ‘list’ icon. When running your WebUI app in development mode, the cases will be stored in the Data subfolder of your project folder. When running your WebUI app through PRO, cases will be stored on the PRO server. Bundled cases (i.e. cases that are included in a subfolder of your published application) are still accessible, but are read-only.

Active case

You can set an active case through the data management pane by hovering over a case in the “available cases” list and clicking the “load as active” option. The case is then loaded as the active case in your AIMMS model. This means that it will be used as the basis for the data in memory in your model; any changes you make can be either saved to this case, or in a new case. When switching from active case, you will be asked what to do with any unsaved data.

Case comparison

The WebUI can be put into case comparison mode by adding one or more cases in the “compared cases” list by clicking their “compare case” option. In this mode, all data-showing widgets (such as tables and charts) will show an additional case dimension. When in case comparison mode, the active case is automatically included in the compared cases. Any editable data from the active case will be shown in blue in the table, whereas all other data will be read-only and shown in black. Removing the last case from the case comparison will automatically switch the WebUI to the regular mode of showing the data from the active case.

Private vs. shared cases

Whenever you run your WebUI app through AIMMS PRO, any case you save will be stored on the PRO server. By default, such a case will be a private case, meaning that it is only visible by its creator. Only the creator may toggle a private case to a shared case (and vice versa). A shared case is visible to everybody, but read-only to everybody but the creator.

Extending your AIMMS model with support for the WebUI

To be able to control what identifiers are visible to the WebUI (e.g. when selecting the contents for a widget), extend your AIMMS model with a set AllPublicIdentifiers (in the global namespace), subset of the set AllIdentifiers and to be initialized with the identifiers that are public to the WebUI. If the set AllPublicIdentifiers has not been defined, all identifiers in your model are available to the WebUI.

Displaying model identifiers that are declared in an AIMMS library

To be able to show data for identifiers that are declared in an AIMMS library, you need to make your identifier public by putting it in the INTERFACE attribute of the library. To make sure that widgets are able to display aggregated values (by pivoting/moving indices to the Aggregated group), AIMMS creates runtime identifiers to calculate the totals. To be able to evaluate the definitions of these runtime identifiers, the domain indices of the identifier need also be accessible. For this purpose, the corresponding domain sets need to be present in the library interface too.

Extending the WebUI framework with your own widgets

Building apps with WebUI does not require any programming skills and the growing built-in widget collection will increasingly cover all your possible requirements for building wonderful apps. However, we do offer the option to add your own widgets, for example adding company-specific data visualizations. The following paragraph describes you how to get started.

The WebUI is built upon our open-source framework called AWF (AIMMS WebUI Framework). AWF allows you to add you own widgets. However, creating your own widgets requires (advanced) knowledge of the AIMMS Widget Framework (AWF), HTML5/JavaScript/CSS and the Cube Server data interface. Please refer to the specific documentation of this framework. And if you want to explore developing you own widgets, please take a closer look at the code for a sample simple-table-widget that can be.

Change the styling of your WebUI app through custom CSS

It is possible to (re)style your web application by providing a custom CSS. The home page in the MealsRUsWebApp example shows a small drop down button in the upper right corner of the page that lets you switch between several example styles. Please note, that the class names that are referred to in the CSS might change in the future. Application-specific CSS files should be stored in the resources/css subfolder of the WebUI subfolder of your project folder. As an example of application-specific styling the MealsRUsWebApp has been extended with a theme-switch-addon that consist of some JavaScript and CSS that result in the theme switch drop-down button being shown in the upper right corner of your web application

Multi-language support

The AWF runtime library has been extended with multi-language support. Depending on the language settings of your browser, all strings that are displayed in the WebUI will be checked against a language specific translation table. If a translation is available, the translation is displayed. Otherwise, the original string is displayed. These language translation tables can be found in the \Local\AIMMS\IFA\Aimms\WebUIDev\www\resources folder on your computer.

We also support loading application-specific language files from anywhere within the resources/ subfolder of the WebUI/ subfolder of your project.

Unit support

The table and scalar widgets are capable of displaying unit information from the model. For now, unit support is enabled by adding a project-specific JavaScript resource that lists the ‘display unit’ on a per-identifier level.
For example, a project-specific resource with the following contents:

	IdentifierUnitMap = {
		"Distance" : "km"

will display the distance values in ‘km’. Input for the ‘Distance’ identifier will also be interpreted in terms of ‘km’. Please note that you can only specify display units for which there exists a valid conversion to the base unit of the identifier in your model.

Return to PRO WebUI Overview