Initializing help system before first use

Binding the User Interface to Scenario Data

The View Designer features components that make it easy to access bulk model data. This section will add to the vdl file created in previous sections to add a table of data into a Column titled RESULTS.
Perform the following steps to update the View.
  1. In the Palette > Components group, click and drag a Table element onto the RESULTS Column element on the artboard. In the Table wizard:
    • Select the Shares_fraction entity by clicking on it.
      Tip The Shares_fraction entity was created in the model source file to calculate the fraction of capital used per share.
    • Click FINISH to display the table.
  2. In the Palette > Components group, click and drag a Table Column element onto the Table you just added to the RESULTS Column on the artboard.
  3. Select the new Table Column. Edit the following attributes:
    • Set DATA > Set to ShareIds.
      Tip This tables displays the Shares alias created in the model source file to display the share type associated to the Fraction of capital used per share value
  4. On the artboard, select the new Table Column element and use the action toolbar to move it to the left of the Fraction used Column.
  5. Select the Table element and edit the attributes. Set the following in the Options pane:
    • Column filters to true by selecting the check box.
    • Search to true by selecting the check box.
    • Pagination to paged by selecting from the drop down.
    • Page size to 5.
  6. Republish the app to Xpress Insight. Click the Publish icon in the grey top bar.
  7. Load and run the scenario. The changes are displayed.
The applied changes are shown:
  • The expected return on investment can be edited directly in the INPUT DATA table. The scenario can be run as required using the RUN OPTIMIZATION button.
  • The fields in the header row come automatically equipped with small widgets that enable column sorting.
  • The RESULTS table:
    • displays a data table detailing the proportion of capital allocated to each share type.
    • displays the pagination control to display on the bottom right. The drop-down menu in the pagination control enables page navigation and selection of the number of entries per page.
    • has a Search box enabled at the top, while the ticked box for Column Filters has enabled search boxes at the top of each column.
    • has 5 rows as configured and displays both the entries and the corresponding index entries for the Shares_fraction entity. Column headings reflect the aliases assigned in foliodata.mos.

The app has a production-ready table that is bound to the underlying model data. As a user interface developer, you do not need to worry about lower level concerns like data marshaling and synchronization, styling, implementing search, and pagination.

Parent Topic Adding a Custom User Interface