Initializing help system before first use

Binding the User Interface to Scenario Data

VDL comes equipped with some very powerful core components that make it natural and simple to access bulk model data.
Change your foliodata.vdl file so that it now reads as: 
<vdl version="4.1">
  <vdl-page>
    <vdl-section heading="Welcome to Portfolio Optimization" 
                 heading-level="1">
      <vdl-section heading="Recommended share allocations" 
                   heading-level="3">
        <vdl-table page-mode="paged"
                   page-size="5"
                   show-filter="true"
                   column-filter="true">
          <vdl-table-column entity="frac"></vdl-table-column>
       </vdl-table>
      </vdl-section>
   </vdl-section>
  </vdl-page>
</vdl>
Firsts, note that there are now two <vdl-section> elements - one nested inside another. This allows you to subdivide sections into small and related but distinct regions - the heading-level attribute is analogous to the HTML tags <h1>, <h2> etc. and determines the style of the fonts in which section headings are rendered.
Next, is the first of two new elements - the <vdl-table> element. This is a wrapper for a table, and in the above example, its attributes have been set as:
  • page-mode="paged" - configures the table to be paginated
  • page-size="5" - sets the number of rows per page at 5 - slightly contrived because the entity on which its child <vdl-table-column> element is based only has 10 records
  • show-filter="true" - adds an input field in which you can search the entire table for a specific or pattern-matched value
  • column-filter="true" - adds an input field to the top of each column, so you can restrict searches to specific columns

Finally, the second new element - the <vdl-table-column> element with its single attribute, entity="frac". This creates a column based on the values it discovers in the frac entity.

Republish the app to Xpress Insight and ensure that you (re)load and rerun the scenario. It now appears:

Adding a Table to a Simple VDL View

Adding a Table to a Simple VDL View

The original section headed Welcome to Portfolio Optimization has been joined by a nested section with a heading Recommended share allocations - note how setting the heading-level to 3 has altered its font style.

Configuring the table as page-mode="paged" was responsible for the appearance of the Show ... entries drop-down list and the pagination controls on the bottom right.

The show-filter="true" attribute has provided a Search box at the top, while column-filter="true" has provided search boxes at the top of each column.

The table itself has 5 rows as requested, and displays both the entries and the corresponding index entries for the frac entity. Column headings reflect the aliases assigned in foliodata.mos.

Finally, the fields in the header row come automatically equipped with small widgets that enable column sorting.

To summarize. In a few lines of markup most of which goes towards expressing declarative choices about desired features, the app has a production-ready table that is slaved 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 and so on.

Adding a New Column

For other entities with the same index set, adding new columns to a <vdl-table> element is very simple.

Locate the following line in foliodata.vdl: 
<vdl-table-column entity="frac"></vdl-table-column>
and add the following line beneath it: 
<vdl-table-column entity="RET"></vdl-table-column>
Republish the app in Xpress Insight:

Adding a New Column

Adding a New Column

The new column references the RET entity, which is based on the same index set - SHARES - as frac. The column heading chooses its alias Estimated ROI per share as configured via annotation in foliodata.mos. The new column is fully-integrated with the table and its sort behavior synchronized with the other columns.

Parent Topic Adding a Custom User Interface