Create a Render Condition

Sometimes applications provide the user with more information than they actually need. Conditional rendering allows you to choose if—and when—to display certain page elements, based on whether certain criteria (conditions) are met.

Let’s create a conditionally-rendered Button Set with Save and Cancel buttons that only display if the user has made a change on the page.

Assumptions

Note

This tutorial assumes you have a page with:

  • A Table component with a functioning model, with fields displayed.
  • A second Table (with a different functioning model) with fields displayed.
  • For both Table components, check Allow Inline Record Creation, and uncheck Show Save/Cancel.

Add and configure a Button Set component [[]]

Drag and drop a Button Set component onto the page above the two tables. Add two buttons to the Button Set and configure:

  • The first button: This button saves any changes to either table.
    • Button Type: Save
    • Additional Models to Save: Select the models for both of the tables.
    • Button Label: Save Table Changes
  • The second button: This button cancels any changes to either table.
    • Button Type: Cancel
    • Additional Models to Save: Select the models for both of the tables.
    • Button Label: Cancel Changes

Set the render conditions for the Button Set [[]]

  1. Click the Button Set.
  2. In the Display Logic Tab, set Render if … to Any Conditions are met. (This means that a change to either Table will trigger the condition, thus displaying the Button Set.)
  3. Click fa-plus-circle Add new Render Condition twice to create two conditions.
    • Edit the first condition:
      • Source Type: Model Property
      • Source Model: The model the first table is using.
      • Model Property: Has unsaved changes
    • Edit the second condition:
      • Source Type: Model Property
      • Source Model: The model the second table is using.
      • Model Property: Has unsaved changes
  4. Click Save.

Preview the page

There will be two tables on the page, but no Button Set.

Make a change to either of the Tables. For example, try editing a record. Once a change is made on the page, the Button Set (with the Save and Cancel buttons) renders, allowing the user to save or cancel their changes.