Conditional Rendering of Components

Skuid includes tools that allow builders to show or hide most components based on data conditions. For example:

  • If the contact prefers email, hide the phone fields.
  • If account type is partner, display the partner information tab.
  • If the user profile indicates the user is a manager, display the account profitability table.
  • If no records are available, hide the table and show a template that says “Sorry, there is nothing to see here …”

Rendering Tab Components

Look for the “Rendering” tab on many components. Add one or more conditions that determine if the component should appear on the page. If the data makes all the conditions true, the component appears. If the data makes any condition false, the component does not appear. (Conditions are evaluated as “and” statements.)

Build a Condition for Component to Render

image1

The following properties are available for establishing conditions:

  • Source Model: This property allows you to select which model is evaluated to determine if the component should display. (You do not have to use data from that model to use it to determine whether the component should display or not.)
  • If no row in Source Model…: This property allows you to specify what happens when the selected model has no rows. Options include:
    • Ignore this Condition: The condition is not evaluated (assumed to be true) and other conditions are considered.
    • Skip Other Conditions and Render: No other conditions are evaluated - and the component is shown.
    • Skip Other Conditions and Don’t Render: No other conditions are evaluated - and the component is hidden.

The next four properties of the conditions builder will be familiar if you have build Model conditions:

  • Field: Choose a field from the model that should be evaluated.
  • Operator: Choose the operator
  • Content: Choose what type of content is to be evaluated.
  • Value: Enter the value that should be true for content to show.

Components Available for Conditional Rendering

Conditional rendering has been implemented in the following components.

Layout [[]]

  • Button Set (and individual buttons in the Button Set)
  • Navigation (and individual navigation items on the Navigation component)
  • Responsive Grid
  • Tab Set (and individual tabs in the Tab Set)
  • Wizard (and Wizard action buttons)
  • Wrapper

Data [[]]

  • Calendar
  • Deck
  • Field Editor (and individual columns, sections, and fields on the Field Editor)
  • File Upload
  • Filter Set
  • Image
  • Page Title (and individual buttons on the Page Title)
  • Queue
  • Rich Text
  • Table (and row, global, and mass actions, and individual fields on the Table)
  • Template

Advanced [[]]

  • Custom
  • Page Include

Visualizations [[]]

  • Chart
  • Geochart

Rendering Example

In this example we will only show the partner tab if the account type includes the word “partner.”

Create Account Detail Page - with a Tab set

image2

For more help with building out this kind of page, see building master and child pages.

Make sure the “Account Type” field is on the profile page

image3

  1. Make sure the field is in the model.
  2. Add the field to the profile tab so you can make sure the rendering is correct. (Fields evaluated in rendering conditions do not need to be in the page layout. Only in the model.)

Select Partner Tab in Tabset - and select “Rendering” property tab

image4

  1. Select Partner Tab from tabset.
  2. Select Rendering Tab in properties

Build the Condition

image5

Select the green icon to add a new condition.

  1. Select Model: Choose the model where “account type” was retrieved.
  2. If no row in Source Model: Ignore this condition
  3. Field = Type
  4. Operator = Contains
  5. Content = Single Specified Value
  6. Value = “Partner”

Using the Operator “Contains” allows us to show the tab when the value is “Partner / Reseller” or “Channel Partner”.

View your results

image6

If Account Type is Customer - Channel - the partner tab does not show. But as soon as you select type “partner”

image7

The Partners tab appears.