Component Property Examples

Toggle the visibility of a component

The following example shows how to use a Button to hide or show a certain component in an application.

1. Drag a Container component on to the canvas
2. Drag a Text component into the container and give it a default text (this will be used to show if the container is visible)
3. Create a Button component and for the onClick trigger, create a new API: API1
4. For API1, create a python step that references the visibility state of the container and returns the negation:

   return not Container1.isVisible
5. Go back to the Container component and click the <> Code button next to Visible and update it to be the response of the API:

   {{API1.response}}

Now when you click the button, it toggles the visibility state of the container.

Hide components until first user interaction

The following shows an example of how you can set up an application to hide certain components until after a user first interacts with the app.

1. Drag a Form component on to the canvas
2. Populate the Form to take in data
3. Click on the Submit button and update the OnClick trigger to create a new API with a JavaScript step
4. Rename the API submitForm and use the following code snippet:

   return Form1.data
5. Drag a CodeEditor component on to the canvas and label it "Form Results"
6. Update the Default Value:

   {{submitForm.response || "<Your_placeholder_text>"}}
7. Create a new API called returnTrue that uses a JavaScript step and the following code snippet:

   return true;
8. In the API configuration for returnTrue, set the API trigger to Never run on load
9. Drag a Text component on to the canvas and set the Text field to the value you'd like to appear after the user interacts
10. Click on the <> Code button for the Visible property and update it to be:

    {{returnTrue.response || false}}
    info

    This logic hides components until the first interaction and then they will be visible until the page is reloaded. If you'd like the visibility to toggle with each user interaction, see this example.

11. You can follow Steps 8 and 9 for any other components you'd like to appear on click
12. Update the Form's Submit Button to run the returnTrue API OnClick

Disable a child component in a form until user interaction

This example walks through using the Disabled property to create a dynamic form that disallows users from moving forward to the next component until a valid selection has been made at the current step.

1. Drag a Form component on to the canvas

2. Drag components onto the Form, in this case an Input component and 2 Dropdown components

3. Rename the Input component to "accountID"

   • Update the label to "Account ID"
   • Set the minimum length to 4
   • Set the maximum length to 10
   • [Optional] Add custom validation rules

4. Rename the first Dropdown to "itsmDropdown"

   • Set the label to "ITSM"
   • Set the options to:

   [
   {
       "label": "ServiceNow",
       "value": "ServiceNow"
   },
   {
       "label": "Zendesk",
       "value": "Zendesk"
   },
   {
       "label": "Jira",
       "value": "Jira"
   }
   ]
   • Delete the Default selected value string(s)
   • Toggle on Enable Clearing
   • Toggle on Required
   • Click <> Code next to Disabled and set it to:

   {{!accountID.isValid}}

5. Rename the second dropdown to "anotherDropdown"

   • Set the label to "Another Dropdown"
   • Set the options to:

   [
   {
       "label": "someValue1",
       "value": "someValue1"
   },
       {
       "label": "someValue2",
       "value": "someValue2"
   },
   {
       "label": "someValue3",
       "value": "someValue3"
   }
   ]
   • Delete the Default selected value string(s)
   • Toggle on Enable Clearing
   • Toggle on Required
   • Click the <> Code next to Disabled and set it to:

   {{!accountID.isValid || itsmDropdown.selectedOptionValue == null}}