Initializing help system before first use

VDL Basics - a Recap

This section revisits and extends the basic principles introduced in Getting Started , which is recommended reading prior to this chapter.

Before you can include a View in your app, you need to declare it in your app's companion file, which is an XML file located directly in your app root folder.

Below is the companion file from the example app, saved as foliodata.xml. 
<?xml version="1.0" encoding="UTF-8"?>
<model-companion xmlns="http://www.fico.com/xpress/optimization-modeler/modelcompanion" version="3.0">
<client>
<view-group title="Portfolio Optimization">
<vdl-view title="Portfolio" path="foliodata.vdl"></vdl-view>
</view-group>
</client>
</model-companion>

Note how the path attribute of the vdl-view element points to a file called foliodata.vdl—Xpress Insight searches for this file in the client_resources directory just below the app root. For more, see Introducing the Companion File.

When viewed in the code editor, the referenced foliodata.vdl file contains the following code: 
<vdl version="4.6">
        <vdl-page>
        <vdl-section heading-level="1" heading="Welcome to Portfolio Optimization">
            <vdl-row>
                <vdl-column heading="INPUT DATA" size="6">
                    <vdl-table page-mode="paged" page-size="5">
                        <vdl-table-column entity="RET" editable="true"></vdl-table-column>
                    </vdl-table>
                </vdl-column>
                <vdl-column heading="CONFIGURE THE BASIS FOR YOUR DECISION" size="6">
                    <vdl-form>
                        <vdl-field label="Max investment per share" parameter="MAXVAL" size="4"></vdl-field>
                        <vdl-field label="Max investment in high risk shares" size="4" parameter="MAXRISK"></vdl-field>
                    </vdl-form>
                    <vdl-execute-button caption="Run Optimization" mode="RUN"></vdl-execute-button>
                </vdl-column>
            </vdl-row>
            <vdl-row>
                <vdl-column heading="RESULTS" size="6"><span vdl-text="Calculated optimal return:     "></span><span vdl-text="=scenario.entities.Return.value"></span>
                    <vdl-table column-filter="true" show-filter="true" page-mode="paged" page-size="5">
                        <vdl-table-column set="SHARES"></vdl-table-column>
                        <vdl-table-column entity="frac"></vdl-table-column>
                    </vdl-table>
                </vdl-column>
                <vdl-column heading="SCENARIO COMPARISON" size="6">
                    <vdl-chart>
                        <vdl-chart-series entity="frac" type="pie" scenario="=i" vdl-repeat="=s,i in scenarios"></vdl-chart-series>
                    </vdl-chart>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>
In the View Designer, the same file looks like this:

View Designer Palette and artboard

In the code editor view, you can see that:
  • All Views begin with a <vdl> tag specifying the version number of the VDL syntax for the page.
  • The <vdl-page> element contains the View contents.

Page content is organized into sections using the <vdl-section> element. For smaller pages, you might only use one section, but for larger pages, separating your content into several sections will help you organize your layout. Sections can be nested, and each can have an optional heading, set via a heading attribute. The heading of the top-level section has been set to Welcome to Portfolio Optimization.

The View Designer does not show vdl tags but displays the title or text for the element. If you select an element on the artboard, the Attributes panel on the right displays the element type at the top. The left-most text field in the Optimal Result section, identifiable by the Calculated Optimal Return: attribute in the code editor, displays the Text value shown in the Attributes panel, and contained between the double quotes in the code editor.

Attributes pane

The adjacent field displays the text: 
=insight.Formatter.formatNumber(scenario.entities.Return.value, '00.##')
The Text attribute for this field is assigned to an expression, a specially structured string that uses the Xpress Insight data bindings to reach into the runtime model, extract, and manipulate some data and display the value in the rendered paragraph.

All expressions begin with =. Here, it is retrieving and formatting the value of the entity whose fully-qualified name is scenario.entities.Return—this as the scalar value that contains the optimal return in the baseline example. The dynamic binding means the element value is kept up-to-date if the entity changes locally or remotely.

Covered Topics
  • Tags and Attributes
    All tags and standalone attributes, when viewed in the code editor, are prefixed with vdl- so that they are easy to identify and don't conflict with current or future HTML tags and attributes.
Parent Topic Using the View Designer and VDL to Create Custom Views

© 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.