Initializing help system before first use

Using Sections to Organize Page Content

Introduced in the example app earlier, Sections can help you structure and organize your page content—they correspond to the Bootstrap container class.

Sections can be nested, and can have an optional heading attribute. Here, a section has been added to the bottom of the Welcome to Portfolio Optimization section, and the Row holding the RESULTS and SCENARIO COMPARISON columns has been dragged into the new Section:

View Designer

Using Sections in View Designer

code editor 
<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-section>
                <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-section>
    </vdl-page>
</vdl>

As is depicted above, you can also provide a heading-level attribute that controls the weight of the heading text—these follow the typical HTML conventions, with level 1 the largest.

Controlling Section Widths

By default, sections have a fixed width of 1140 pixels. If the browser window is too narrow to display the full content, scrollbars are displayed.

You can customize the width by adding the width attribute to the Section (<vdl-section>) element—widths are specified in pixels. Here, the Welcome to Portfolio section has had a width defined in the Attributes pane.

View Designer

Controlling Section Widths in View Designer

code editor 
<vdl-section heading="Welcome to Portfolio Optimization" heading-level="1" width="1000">
By contrast to using a fixed width, sections can also be defined as fluid using a layout="fluid" attribute, where text and other content re-flow to fit the browser's width whenever it is resized. 
<vdl-section layout="fluid">
  This text will wrap onto the next line if the window becomes too narrow.
</vdl-section>
In a default fixed-width section, the column widths are set at 97.5 pixels per size unit. If the width of a fixed section is set to something other than the default, the column widths will adjust automatically to maintain 12 columns across the section width.

The width attribute is not permitted on a fluid section.

Parent Topic Working with Page Layouts and Styling

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