Using Expressions

Expressions are statements that evaluate dynamic values for VDL attributes and often (but not always) lead to some visible change in the rendered user interface. This section introduces a new VDL feature and demonstrates how expressions are brought into play.

An attribute called vdl-text can be used to insert child text into any VDL or HTML element that supports it.

Below, vdl-text is used to set some static text within a  element:

<vdl version="4.1">
  <vdl-page>
    <vdl-section heading="Welcome to Portfolio Optimization" 
                 heading-level="1">
      <vdl-section heading="Optimal result" heading-level="2">
        <span vdl-text="Calculated optimal return:    "></span>
      </vdl-section>
      <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-column entity="RET"></vdl-table-column>
        </vdl-table>
      </vdl-section>
    </vdl-section>
  </vdl-page>
</vdl>

which renders as:

Using vdl-text to Render Static Text

The text Calculated optimal return: renders into a new section with the heading Optimal result.

The goal here is to access the model data, extract the calculated Return value, and add it to the existing static text with another  element. This is easily accomplished with a simple expression.

Expressions are statements used as the targets of attribute assignments, and are used to allow the insertion of dynamic content or programmatically to control layout and data flow.

An expression is denoted by an equal sign = as the first character of an attribute value. Everything after that is evaluated at runtime, and re-evaluated when any entities referenced within it change. The result of the evaluation is placed into the page at the appropriate point.

Add a new  element beneath the existing one: :

<span vdl-text="=scenario.entities.Return.value"></span>

scenario.entities is a map containing all model entities. As a scalar, Return can be accessed by appending .value. The corresponding user interface looks like:

Using an Expression to Display Dynamic Data

Using an Expression to Display an Entity Value

Note how the value 14.066666666666588 is rendered in place. Of course it needs formatting - and Xpress Insight offers several approaches, one of which involves a timely introduction to the JavaScript API.

The Xpress Insight JavaScript API enables you to invoke a wide range of library functions from within VDL. You can also create your own JavaScript functions within VDL via <script> blocks, but here, the Return scalar is formatted via a call to an existing function -insight.Formatter.formatNumber, which takes two arguments - the value to be formatted (here, this is the value of scenario.entities.Return.value), and a Java-style formatting string.

Replace

<span vdl-text="=scenario.entities.Return.value"></span>

with

<span 
vdl-text="=insight.Formatter.formatNumber(
    scenario.entities.Return.value, '00.##')" >
</span>

so that the entire foliodata.vdl file now looks like:

<vdl version="4.1">
  <vdl-page>
    <vdl-section heading="Welcome to Portfolio Optimization" 
                 heading-level="1">
      <vdl-section heading="Optimal result" 
                   heading-level="2">
        <span vdl-text="Calculated optimal return:    "></span>
        <span vdl-text="=insight.Formatter.formatNumber(
                        scenario.entities.Return.value, 
                        '00.##')">  
        </span>
      </vdl-section>
      <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-column entity="RET"></vdl-table-column>
        </vdl-table>
      </vdl-section>
    </vdl-section>
  </vdl-page>
</vdl>

Republish the app, and 14.066666666666588 now renders as 14.07.

Note Due to page-width limitations, it is not possible to present some of the longer VDL fragments on one line. Ensure that where possible, your own code reconstructs them in the correct form, or you may get errors during the build process. One such case above is the line beginning .

Contents

Index

Glossary

Search Results

Using Expressions