Show button on condition

Allow end users to perform an app action only in certain cases

Try it out!

Scenario

Only show a 'create new record' button if the user has already searched the existing records for potential duplicates.

Challenge:
★☆☆☆☆

Steps

  1. Start by adding a Data Provider, set to fetch rows from the Employees table

  2. Add a table nested inside the Data Provider, with the data source as the Data Provider (not fetching data directly)

  3. Above the Data Provider component, add a a Form component (not to be confused with a Form Block).

  4. Add a text field to the form, setting the field to "email" and the label to "Search Employee Email"

  5. In the settings of the Data Provider, click to add a filter (Important: be sure to set the filter on the Data Provider itself, not the table)

  6. Add the filter Email is Like the Binding {{ New Form.Fields.email }}

  7. Add a button underneath the Data Provider, with the button text to "Add new employee"

  8. Add a Modal with "Ignore clicks outside" checked, and the size set to "Medium.

  9. Add a Form Block to the modal, set to create a new row in the Employees Table.

  10. In the button, set an On Click action to open the modal, and click save.

  11. In the Button component, head to the Conditions tab

  12. Add a condition to Show Component IF {{ New Data Provider.Rows Length }} Equals Number 0

  13. Remember to save

Now if a user tries to search for an employee that doesn't exist, they can create a new record.



App export

Downloads may take a few seconds.