WebUI

This manual is meant for app developers who want to build a Web-based User Interface (in short, WebUI) for their AIMMS applications. To some extent, this manual may also prove itself to be useful as reference for the end users of such AIMMS WebUI apps, for example, when using widget configuration options available to them while running the WebUI applications on the AIMMS PRO platform (including the AIMMS Cloud).

• Getting Started
  • Requirements
    • Developing a WebUI app
    • Publishing a WebUI app
    • Running a WebUI app
  • Technical Background
    • Current Limitations
    • Project Conversion
  • Creating a WebUI
    • Authorizing model content for use in the WebUI
    • Public Identifiers
  • Publishing on AIMMS PRO
    • Example Projects
  • Quick Start: My First WebUI App
    • The underlying optimization model
    • Creating an empty WebUI
    • Adding the widgets for input data
    • Including widgets for optimization and output data
    • Adding buttons
    • Solving the optimization model
    • Providing more structure to the WebUI
    • Performing What-If analysis
    • Saving and comparing cases
    • Using widget actions and page actions
    • Modifying widget types
    • Conclusion and final remarks
• WebUI App Development
  • App Menu Bar
  • Page Menu
    • Top Menu Bar
    • Bottom Menu Bar
    • Specifying the Content
    • Custom Positions for Widgets
    • Adapting Your Custom CSS
    • The Old Style Menu
  • Page Manager
    • WebUI Classic Pages
      • Adding a Page
      • Renaming a Page
      • Moving a Page
      • Changing the Visibility of a Page
      • Deleting a Page
      • Setting the Home Page
      • Wizards
    • WebUI Grid Pages
      • Page Manager with Grid Pages
      • Standard Layouts
      • Switching between Layouts
      • Custom Layouts
    • Side Panels
      • What can side panels be used for?
      • Adding a Side Panel
      • Adding widgets to a Side Panel
      • Configuring side panels
      • Configuring the string parameter on respective pages
      • Interacting with side panels
    • Dialog Pages
      • Adding a Dialog Page
      • Adding widgets to a Dialog Page
      • Configuring Dialog Pages
      • Interacting With Dialog Pages
  • Page Settings
    • Procedure for Restricting Page Navigation
    • Maximum Number of Columns
    • Page Actions
    • Possible combinations of action states
  • Widget Manager
    • Adding a widget
    • Custom Position
    • Using the Search Boxes
    • Locking Editors
  • Widget Types
    • Bar Chart Widget
      • Contents and Pivoting
      • Change Type
      • Barchart Settings
      • Totals
      • Identifier Settings
      • Store Focus, Hover and Select
      • Widget Extensions
      • Miscellaneous
    • Bar-Line Chart Widget
      • Contents and Pivoting
      • Change Type
      • Bar-Line Chart Settings
      • Totals
      • Identifier Settings
      • Store Focus, Hover and Select
      • Widget Extensions
      • Miscellaneous
    • Bubble Chart Widget
      • Specifying the contents
      • Overriding tooltips
      • Coloring
      • Specific options
      • Widget Extensions
      • Additional Remarks
    • Button Widget
      • Action
      • Miscellaneous
    • Download Widget
      • Creating a Download Widget
      • Example
    • Gantt Chart Widget
      • Ganttchart Settings
      • Pivoting
      • Viewport control
      • Minimum and Maximum Resource Height
      • Store focus
      • Widget Extensions
      • Adding, deleting and modifying tasks
      • Example
    • Group Widget
      • Form Input
      • Example
    • Image Widget
    • Label Widget
    • Line Chart Widget
      • Contents and Pivoting
      • Change Type
      • Totals
      • Linechart Settings
      • Identifier Settings
      • Store Focus, Hover and Select
      • Widget Extensions
      • Miscellaneous
    • List Widget
      • Creating a List Widget
      • Configuring List Groups
      • Configuring Items for Lists
      • Configuring the string parameters in the List Widget
      • Examples of usage of the List Widget
      • A few best practices on using icons/colors
    • Map Widget
      • Creating a map widget
      • Adding node sets
      • Store Focus, Hover and Select for nodes
      • Adding arc sets
      • Store Focus, Hover and Select for arcs
      • Ordering and deleting node/arc sets
      • Heatmap
      • Miscellaneous options
      • Custom HTML tooltips for Nodes and Arcs
      • Using Google Maps with API key
      • Guidelines and best practices
    • Map Widget old style
      • Dynamic Node Sizing
    • Pie Chart Widget
      • Contents and Pivoting
      • Change Type
      • Totals
      • Identifier Settings
      • Widget Extensions
      • Hover and Select
      • Miscellaneous
    • Scalar Widget
      • Examples
      • Date and Time picker for Element parameters
    • Selection Widgets
      • Selection Widgets with Element Parameter
      • Selection Widgets with an 1-dimensional Binary Parameter
      • Identifier Settings
      • Miscellaneous options
      • Warnings and trouble shooting
    • Slider Widget
      • Features
    • Table Widget
      • Download Table Data
      • Creating Read-Only Cells
      • Data Filtering on the Table
      • Date and Time picker for Calendar elements
    • Text Widget
      • Widget menu
      • Inserting images
      • Creating links
      • Specifying a string parameter in Contents
    • Tree Map Widget
      • Contents and Pivoting
      • Change Type
      • Totals
      • Identifier Settings
      • Widget Extensions
      • Hover and Select
      • Miscellaneous
    • Upload Widget
      • Creating an Upload Widget
      • Example
  • Widget Header Bar
    • Title, Full Screen, and Settings
    • Download Image - PNG
    • Download CSV
    • Widget Actions
    • Filtering
  • Widget Options
    • Contents
    • Identifier Settings
    • Pivot
    • Store Focus
    • Totals
    • Change Type
    • Miscellaneous
    • Widget Actions
    • Item Actions
    • Best Practices for Item Actions
  • Data Manager
    • User Actions
  • Application Management
  • Application Settings
    • Miscellaneous Application Settings
      • Use Classic Theme
      • UI Editable
      • Limited Option Editor(1/0)
      • Licenseinfo
      • Sidebar Open by Default
      • Page Manager Hidden
      • Data Manager Hidden
      • Menu Hidden
    • Workflow Panels
      • Configuring the Workflow Panel
      • Configuring Workflows
      • Configuring Steps of Workflows
      • workflowPageState and pageDataState
      • redirectPageId
      • Combinations and Scenarios
      • Changing states
      • Configuring Workflows in the Application Settings
      • Configuring a pageId in multiple workflows
      • When and How to use the Workflow Panel
      • Do’s and don’ts
    • Status Bar
      • Configuring messages in the Status Bar
      • Configuring Status Bar in the Application Settings
      • Some best practices on using icons/colors
    • Time Zone Settings
      • webui::DisplayTimeZones Set
      • webui::DisplayTimeZone
      • webui::WebApplicationTimeZone
      • webui::IgnoreDST
      • webui::ApplicationHourlyTimeSlotFormat and webui::ApplicationMinuteTimeSlotFormat
      • webui::TimeZoneChangeHook
      • Configuring Calendars with webui::WebApplicationTimeZone
      • Best Practices and Working Example
  • Feature Mapping for WebUI
  • Experimental Features
    • How to enable or disable Experimental Features
    • Current list of Experimental Features
• WebUI Folder
  • WebUI JSON
    • WebUI JSON validation schema
  • WebUI Resources
    • Adding the resources folder
    • Images
    • JavaScript
    • CSS
    • Load ordering
  • CSS Styling
    • Data-Dependent Styling
    • Widgets and CSS properties supported for annotations
    • Highlighting (experimental)
    • Annotations or Flags in Custom Plugins
    • Custom Icon Sets
  • Support for Units of Measurement
  • Multi-Language Support
    • Project-Specific Translations
    • Element Text
• WebUI System Library
  • Pages and Dialog Support section
  • SetProgressMessage
  • RequestPerformWebUIDialog
  • OpenDialogPage
  • Authorization Support
• Developing Custom Widgets
  • Open-sourcing WebUI
  • Creating custom widgets
  • Widget development tutorial