All Collections
Customization Missions
Mission 3
Mission 3 - 11: Delete Button Visibility
Mission 3 - 11: Delete Button Visibility
Updated over a week ago

In the previous mission, we added a delete button to the New / Edit Car Screen. 

However, it doesn't make sense to have a delete button on something that doesn't exist yet, which is the case when a user adds a car. It should only appear if the screen is being used to Edit a car.

This is where we can look at the Screen Active Record ID. Remember, when we are editing a car, the Screen Active Record ID will hold the Record ID of the car we're editing. However, if it is less than 1 or empty, then we know the user is not editing a car and we can hide the Delete button!

The tricky part is: what Event should this go in? 

Fortunately, there are events for when the screen first opens up! The Screen itself has events, and the event we want is called Active Record Change. This event triggers when the Screen Active Record ID changes, and it gets changed when it is assigned a Record ID!

Delete Button's Load State

First, let's make the Delete button invisible.

1. Select the Delete button.

2. Under Settings, change the Load State to Hidden.

And now the button will no longer be visible. However, we want to make it visible when the user is editing a car!

Screen's Active Record Change Event

1. Select the Page icon in the top menu to go to the Screen Properties.

2. Expand Actions and select the event Active Record Change.

This will take you to the action editor for this event, but before we go further, we should cover conditional statements.

Add a Conditional Statement Action

A conditional is a way for Method to carry out different actions based on whether or not a condition you define is met. In our example, we want to check if the Screen Active Record ID is set or not. If it is set, then that means the user is editing the screen and we want the delete button to show. If the active record id is zero or less, or empty, then the user is adding a new car and we don't want the delete button to show. 

Let's add this logic in as an action.

1. Search for and add the action Conditional Statement

2. Click ⊕ Add a condtion.

3. Now we will define a condition to check. We want to check the Screen Active Record ID is greater than zero.
​        - First dropdown: Screen Active Record ID
        - Second dropdown (comparison):
Greater Than
        - Third dropdown:
        - Fourth dropdown:
0 (the number zero)
        - For Internal Note: "
Active Record ID > 0 (User editing a car)"

4. If the Screen Active Record ID is greater than zero, this means the user is editing a car. Let's embed that action after the If...then statement. Hover over the If...then and click the plus icon ⊕ to add an action below it. 

5. Find and add Show/Hide Controls action and use these settings:
​       - Select a control: Delete
       - What will happen?:
       - Internal Note:
"SHOW Delete Button"

6. Close the Action Editor and then close Design Mode.

We're done! You're action list should look like the image depicted above. Note how the Show/Hide Controls action is indented and embedded within the If...then and Else statements. Your actions should look like that. If not, you can drag the action inside of the conditional statement.

Now, you may be thinking we should add another action for the Else statement, in other words, what happens when the Screen Active Record ID is empty, however we don't need to. Why? Because the Delete button by default is invisible. When the screen first loads, it's going to be invisible anyway so we don't need to set it to invisible when it already is.

This is the first time using a conditional statement. If you want more information on how it works, please see our article called "Conditional Statement." 

Coming up next...

In the next mission, we're going to improve the usability of the New / Edit Car screen by giving them a way to navigate to and view the contact.

Previous Mission                         Next Mission

Did this answer your question?