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
  • Creating a WebUI
  • Public Identifiers
    • Identifiers in a Library
  • Publishing on AIMMS PRO
  • Example Projects
  • Quick Start: My First WebUI App
    • Underlying model
    • Creating an empty WebUI
    • Adding the widgets for input data
    • Including widgets for optimization data
    • Adding buttons
    • Solving the optimization model
    • Providing more structure to the UI
    • Adding What-If analysis
    • Modifying widget types
    • The final result
• WebUI Menu Bar
  • Page Menu
    • Specifying the Content
    • Custom Positions for Widgets
    • Adapting Your Custom CSS
    • The Old Style Menu
      • Reverting to the Old Style Menu
  • Page Manager
    • Add a Page
    • Rename a Page
    • Move a Page
    • Change the Visibility of a Page
    • Delete a Page
    • Set the Home Page
    • Wizards
      • Example
      • Create, Update or Delete a Wizard
        • Update list from page tree
        • Cancel procedure
        • Result page
      • Procedures in a Wizard
        • Arguments
  • Page Options
    • Maximum Number of Columns
  • Widget Manager
    • Adding a widget
    • Custom Position
    • Using the Search Boxes
    • Locking Editors
    • Adding Tooltips
  • Widget Types
    • Bar Chart Widget
      • Contents and Pivoting
      • Change Type
      • Barchart Settings
      • Filters
      • Totals
      • Identifier Settings
      • Store Focus, Hover and Select
      • Miscellaneous
    • Bubble Chart Widget
      • Specifying the contents
      • Overriding tooltips
      • Coloring
      • Specific options
      • Additional Remarks
    • Button Widget
      • Action
      • Miscellaneous
    • Download Widget
      • Creating a Download Widget
        • FileLocation
        • StatusCode
        • StatusDescription
      • Example
    • Gantt Chart Widget
      • Description
      • Features
      • Specification
        • Ganttchart Settings
        • Options
        • Pivoting
      • Viewport control
      • Retrieving the selected task
      • Adding, deleting and modifying tasks
        • Modifying a task by drag-and-drop
          • Horizontal dragging
          • Vertical dragging
          • Snapping to time resolution while dragging
        • Creating a form to add, delete or modify a task
          • Task update handler
          • Task validation
          • Linking the focus task in the Gantt chart to the selected task in the form
          • Gantt chart details form
      • Downloading the WebUI Gantt chart example
    • Group Widget
      • Form Input
        • Example
    • Image Widget
    • Label Widget
    • Line Chart Widget
      • Contents and Pivoting
      • Change Type
      • Linechart Settings
      • Filters
      • Totals
      • Identifier Settings
      • Store Focus, Hover and Select
      • Miscellaneous
    • Map Widget
      • Dynamic Node Sizing
    • Pie Chart Widget
      • Contents and Pivoting
      • Change Type
      • Filters
      • Totals
      • Identifier Settings
      • Hover and Select
      • Miscellaneous
    • Scalar Widget
      • Examples
    • Selection Widgets
      • Selection Widgets with Element Parameter
      • Selection Widgets with an 1-dimensional Binary Parameter
      • Identifier Settings
      • Miscellaneous options
    • Slider Widget
      • Features
    • Table Widget
      • Download Table Data
      • Creating Read-Only Cells
        • By using flags
        • By using the CurrentInputs set
    • Text Widget
      • Widget menu
      • Inserting images
      • Creating links
    • Tree Map Widget
      • Contents and Pivoting
      • Change Type
      • Filters
      • Totals
      • Identifier Settings
      • Hover and Select
      • Miscellaneous
    • Upload Widget
  • Widget Options
    • Pivot
    • Change Type
    • Store Focus
    • Contents
      • Additional identifier properties
    • Filters
      • Using a Multiselect widget as a filter
      • Using a Selectionbox widget as a filter
      • Using a Legend widget as a filter
      • Using a Table widget as a filter
      • Combining filters
    • Totals
    • Identifier Settings
      • Display Domain
        • Sparse vs. Dense
        • Specifying Display Domain
        • Examples
      • Slicing
        • Set slicing per index
        • Slice type and Slice value
        • Index
        • Clear slicing
        • Examples
    • Hiding Widgets
    • Number of decimals
  • Data Manager
    • User Actions
      • Active case
      • Case comparison
      • Private vs. shared cases
  • Application Settings
    • Use Classic Theme
    • UI Editable
    • Limited Option Editor(1/0)
    • Licenseinfo
    • Sidebar Open by Default
    • Page Manager Hidden
• WebUI Folder
  • Pages
  • Widgets
  • Resources
    • Images
    • Load ordering
    • CSS styling
      • Data-Dependent Styling
      • Annotations or Flags in Custom Plugins
        • Applying annotations or flags
        • Manipulating and selecting elements by annotations or flags
        • Example 1: Programmatically selecting and manipulating HTML elements by annotation or flag
        • Example 2: Using the annotation or flag in a stylesheet
      • Switching The Color Palette
    • JavaScript
      • Unit Support
    • Multi-Language Support
      • Project-Specific Translations
      • Element Text
• WebUI System Library
  • requestPerformWebUIDialog
    • Arguments
    • Example
    • Remarks
• Technical Background
  • Current Limitations
  • Project Conversion
• Developing Custom Widgets
  • Open-sourcing WebUI
  • Creating a custom widgets
  • Widget development tutorial
    • Writing your first custom widget
      • Before we begin - Prerequisites
        • Let’s start - A quick introduction to AWF
        • The basic components of a widget
          • The widget itself
          • The widget factory
          • A final note on Widgets, Factories and AWF
        • Your first custom widget
    • Adding dynamic contents, part I: Options
      • Before we begin - Prerequisites
      • Dynamic contents in AWF
      • Options
      • The basic components of an option
      • Option editors
      • Adding an option to our widget
      • Reacting to option changes
      • Changing the value
    • Adding dynamic contents, part II: Simple data from AIMMS
      • Before we begin - Prerequisites
      • Dynamic contents in AWF - revisited
      • The basic components of an option (repeat)
      • Three states of an option value
      • Option editors - revisited
      • Binding AIMMS data to our widget’s option
      • Recap
    • Creating a custom widget with multi-dimensional data from AIMMS
      • Before we begin - Prerequisites
      • Pivoting
        • Partitioning the indices
        • Extending a widget with pivoting support
      • Datasources, parts and values
      • Asynchronous data retrieval
      • Simple table factory
      • Creating the widget source file
      • Creating the widget container
      • Handling content option changes changes
      • Refreshing the table
      • Creating the HTML table
      • Filling the HTML table with data
      • Recap
    • Changing data in AIMMS
      • Before we begin - Prerequisites
      • Sending data changes to AIMMS
      • Creating the input elements
      • Handling the new input in the table
      • Error handling
      • Disclaimer
      • Recap
      • Downloads