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. The View Configuration section contains a further detailed discussion about customizing the no-results overlay.
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 knows if the scenario has results or not, add display:none as an inline style to prevent a flash of unstyled 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.
<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">
<vdl-table-column entity="metriccontactperchannel">
</vdl-table-column>
</vdl-table>
</vdl-column>
</vdl-row>
</vdl-section>