Hiding Content with No-results Overlays

When one or more scenarios have no results data, you can hide the content in portions of your views.

This is useful where you are displaying results and comparing multi-scenario views. For more about customizing the no-results overlay, see the View Configuration section.

To mark a part of a view as dependent on result data, add the if-results-available class to the element:

<vdl-row class="if-results-available">

To prevent the affected parts from being displayed until the view loads the scenario results, add display:none as an inline style to prevent a flash of un-styled content.

<vdl-row class="if-results-available" style="display: none">
</vdl-row>

If any of the affected scenarios in the view have no results, the element is overlaid with a no results available message. When looping over available scenarios and creating each section, you must also add the data-scenario="0" attribute, changing the value to reflect the scenario index concerned. This only overlays the section where the specified scenario has no results. This can be added as a dynamic attribute based on the loop variable.

The following example loops over all scenarios in the view, creating a section for each. Each section contains a table bound to that scenario and displaying a result entity. The row in each scenario section has the if-results-available class and the display:none inline style. It also sets data-scenario dynamically, based on the scenario index in the loop.

Code editor

<vdl version="4.7">
  <vdl-page>
    <vdl-section vdl-repeat="=s, scenarioIndex in scenarios"
    heading="=s.props.name">
      <vdl-row vdl-attr="={'data-scenario': scenarioIndex}" 
      class="if-results-available" style="display: none">
        <vdl-column>
          <vdl-table scenario="=scenarioIndex" page-mode="paged" 
          page-size="4">
            <vdl-table-column entity="frac"></vdl-table-column>
          </vdl-table>
        </vdl-column>
      </vdl-row>
    </vdl-section>
  </vdl-page>
</vdl>

Hiding Content with no-results

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