Improving the User Interface

While it is perfectly functional, the app is rather wasteful of screen real estate and it would be a better approach to let the user select a share type from a drop-down list before changing its estimated ROI.

Doing this requires a slight change to the model, and this illustrates the iterative nature of Xpress Insight solution development. Start with a basic model, create an interface and iterate both as you seek to improve the user experience.

The model needs a scalar entity in which to store the selected share name from the proposed drop-down list. Modify the declarations section of foliodata.mos by declaring the entity changeShare, adding it at the bottom:

declarations
  ...
  RET: array(SHARES) of real
  !@insight.manage input
  changeShare: string
end-declarations

For this example, a simple way to initialize it is by modifying the datainput procedure so that it now defines an initial value for the new scalar:

! Load input data
 procedure datainput
   initializations from DATAFILE
       RET RISK NA
   end-initializations
   changeShare:= "brewery"
 end-procedure

Replace the <vdl-form> containing the repeating fields, with a new form containing just two fields, so that the full foliodata.vdl file now reads:

<vdl version="4.1">
  <vdl-page>
    <vdl-section heading="Welcome to Portfolio Optimization" 
                 heading-level="1">
      <vdl-section heading="Return per share" 
                   heading-level="2">
       <vdl-form>
         <vdl-field entity="changeShare"
                    options-set="SHARES"
                    label="Choose share type"></vdl-field>
         <vdl-field entity="RET"
                    indices="=scenario.entities.changeShare.value"
                    label="Estimated ROI"></vdl-field>
       </vdl-form>
       <vdl-execute-button caption="Run scenario"></vdl-execute-button>
      </vdl-section>
      <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, '.##')">
        </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>

The first new <vdl-field> element has its entity attribute set to changeShare - the new entity in the model. By using the options-set attribute, Xpress Insight is informed that the field should be a drop-down list, taking its set of options from the SHARES set. The field is completed with the assignment of a label.

The second new <vdl-field> element references the RET array, with its indices attribute set to the value stored in the changeShare entity. Again, a suitable label is provided.

Republish, reload and rerun the scenario:

Improving the User Interface

The result is a much more compact user interface that conforms better to expectations.

Should you need them, radio buttons and checkboxes are available as alternative VDL field types.

Contents

Index

Glossary

Search Results

Improving the User Interface