WebUI App Development

This main section contains a number of sub-sections dedicated to various topics related to the WebUI app development.

Some matters which are applicable to several sub-sections are mentioned here directly.

For example, starting from AIMMS 4.96, WebUi supports calling procedures with optional arguments in several places, such as behind a button widget, as part of item, widget, or page actions, as well as for page load and page leave procedures. When a procedure with optional arguments is used in one of these places, the call will be made based on the default values of the optional arguments.

The description of the specific tools for WebUI app development and related topics can be accessed using the following navigation scheme:

• 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 (DEPRECATED)
  • 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
  • Side Panel Grid Pages
    • What can side panels be used for?
    • Adding a Side Panel Grid Page
    • Adding widgets to a Side Panel Grid Page
    • Creating a Custom Layout
    • Configuring side panels
    • Configuring the string parameter on regular pages
    • Interacting with side panels
  • Dialog Pages
    • Adding a Dialog Page
    • Adding widgets to a Dialog Page
    • Configuring Dialog Pages
    • Interacting With Dialog Pages
  • Dialog Grid Pages
    • Adding a Dialog Grid Page
    • Adding widgets to a Dialog Grid Page
    • Configuring Dialog Grid Pages
    • Interacting With Dialog Grid Pages
• Page Settings
  • Procedure for Restricting Page Navigation
  • Maximum Number of Columns
  • Page Actions
  • Possible combinations of action states
• Widget Manager
  • Adding a widget (up to AIMMS 4.74)
  • Adding a widget (AIMMS 4.74 to AIMMS 4.87)
  • Adding a widget (AIMMS 4.88 and higher)
  • Custom Position (DEPRECATED)
  • 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
  • Combination Chart Widget
    • Converting other widget types to Combination Chart Widget
    • The Combination Chart
    • Contents
    • Pivoting
    • Chart Settings
    • Index Settings, Select, and Store Focus
    • Select, Hover, and Tooltips
    • Custom Styling
    • Widget Extensions
    • Miscellaneous
  • Download Widget
    • Creating a Download Widget
    • Example
    • Miscellaneous
  • Gantt Chart Widget
    • Gantt chart Settings
    • Pivoting
    • Viewport control
    • Minimum and Maximum Resource Height
    • Store focus
    • Widget Extensions
    • Adding, deleting and modifying tasks
    • Example
  • Group Widget (DEPRECATED)
    • Form Input
    • Example
  • Image Widget
  • Label Widget
  • Legend Widget
    • As a Legend
    • As a Selection 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
  • Pie Chart Widget
    • Contents and Pivoting
    • Change Type
    • Totals
    • Identifier Settings
    • Widget Extensions
    • Hover and Select
    • Miscellaneous
  • Scalar Widget
    • Examples
    • Tooltips for Identifier names
    • Date and Time picker for element parameters with a calendar range
  • Selection Widgets
    • Selection Widgets with Element Parameter
    • Selection Widgets with an 1-dimensional Binary Parameter
    • Identifier Settings
    • Miscellaneous options
    • Warnings and trouble shooting
  • Selection Box V2 Widget
    • Specifying an Element Parameter
    • Specifying a 1-dimensional Parameter
    • Identifier Settings
    • Miscellaneous options
  • Slider Widget
    • Features
  • Table Widget
    • Quick navigation
    • Search-and-Find
    • Block Editing
    • Copy/Paste
    • Limited Support for Special Numbers
    • The Kebab Menu
    • Download Table Data to CSV File
    • Excel Upload/Download Support
    • Tooltips for Identifier names
    • Controlling the CSV and Excel functionality
    • 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
    • Miscellaneous
• Widget Header Bar
  • Title, Full Screen, and Settings
  • Download Image - PNG
  • Download CSV
  • Widget Actions
  • Filtering
• Widget Options
  • Contents
  • Identifier Settings
  • Widget Named Views
  • 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 Workflow Panels
    • Configuring Workflows
    • Configuring Steps of Workflows
    • Configuring Workflows in the Application Settings
    • Configuring a pageId in multiple workflows
    • Configuration Validation and Error Messages
    • 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
    • How to define a different Status Bar per page
    • 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
• Development Stages
• Data Coloring and Palettes
  • Origin of the default 16-color palette
  • Applying a transparency index: a modified palette
  • Custom Palettes