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.7">
    <vdl-page>
        <vdl-section heading="Welcome to Portfolio Optimization" heading-level="1">
            <vdl-row>
                <vdl-column heading-level="3" heading="Recommended share allocations">
                    <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-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>
First, note the vdl-row and vdl-column elements. These let you to organize your view 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, then (re)load and rerun the scenario. The changes are displayed:

Adding a Table to a Simple VDL View

Adding a Table to a Simple VDL View

The applied changes are shown:

  • The original section headed Welcome to Portfolio Optimization now has a nested section with the heading Recommended share allocations—note how setting the heading-level to 3 has altered its font style.
  • Configuring the table as page-mode="paged" caused 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.
  • The show-filter="true" attribute has enabled a Search box at the top, while column-filter="true" has enabled search boxes at the top of each column.
  • The table has 5 rows as configured, and displays both the entries and the corresponding index entries for the frac entity. Column headings reflect the aliases assigned in foliodata.mos.
  • 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.

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 Code editor in the View Designer

© 2001-2019 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.