Adding a VDL View to the Example App
<?xml version="1.0" encoding="UTF-8"?> <model-companion xmlns="http://www.fico.com/xpress/optimization-modeler/model-companion" 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 <vdl-view> element is contained within the <view-group> element, that it has a title called Portfolio Optimization and a path attribute that points to foliodata.vdl, which by implication is found in the client_resources folder.
<vdl version="4.1"> <vdl-page> <vdl-section heading="Welcome to Portfolio Optimization"> </vdl-section> </vdl-page> </vdl>VDL files all have a <vdl> element at their root.
<vdl-page> elements are containers for view contents, and each view must contain one such element.
<vdl-section> elements are used to organize page content. For smaller pages, you might only use one section, but for larger pages, it is a good idea to separate your page content into several sections to demarcate your app's boundaries. Here, the one <vdl-section> element used has a heading attribute Welcome to Portfolio Optimization.

A First VDL View
The Advanced view group - from which you could select the Entity Explorer option, has been joined by the Portfolio Optimization view group, as was configured in the cfile.
The Portfolio tab arises because it is the title of the view specified in the <vdl-view> element in the cfile.
The Welcome to Portfolio Optimization message was configured as the heading of the single <vdl-section> element in the foliodata.vdl file.
It's a simple, initial static view that hasn't yet been linked to model data.