In the previous mission, we fixed the delete button so it would be invisible when adding a new car. In this mission, we are going to improve the user experience when adding or editing a car.
We’ve made a big deal about apps “talking” to one another in the Method environment. Wouldn’t it be handy if a user could get to a contact’s View Contact screen just by clicking on their name? It sure would, so let’s set it up.
Add Link to Go to Contact
1. Customize the New / Edit Car Screen.
2. Within the secHeader, drag a section into the right cell. This new section will actually be INSIDE the secHeader. Think of it as Method Inception.
3. Select this section and title it “secHeaderTitle”.
4. Drag the NewEditCar text object out of the secHeader and into secHeaderTitle.
6. Add a new row to secHeaderTitle by clicking the Rows ⊕ icon.
7. Drag a new text object into the lower row of secHeaderTitle.
8. Select the text object and change the text to “GoToContactName”
9. Check Show Icon for this text object and find the icon Contacts.
10 Save the screen (but don't exit the designer).
Go To Screen Action
And now, let’s add the action to GoToContactName object!
1. Click the down arrow ( ▼ ) on the GoToContactName text object and select the Click event.
2. Add the action Go To Screen.
3. For Navigate to, choose Contacts for the app dropdown, and then View Contact for the screen dropdown.
4. For Set a screen Active RecordID, choose Set Active Record ID.
5. For Use this Active RecordID, choose Contacts - RecordID.
6. Remember to add an Internal Note - “Go To Contact Screen”.
7. Close the action editor, Save the screen, and the Close the designer.
When you test the screen while editing a car, you’ll find that clicking the GoToContactName in the header will take you to the contact's View Contact screen.
However, the caption says GoToContactName. You know what would be more useful? If it was the actual name of the contact. Let’s set that up! Go back into customizing this screen.
Update Link on Change
When the Contact is changed, GoToContactName should update its display text to the name of the contact. This will use the Change event of the Contacts dropdown.
1. Click the down arrow ( ▼ ) of the Contacts field and edit its Change Event.
2. Add the action Conditional Statement.
3. With the Conditional Statement selected, click ⊕ Add a Condition.
4. The first dropdown should be set to "Contacts - Display”, and the second should be set to “Is Empty”.
5. Include the Internal Note - "Is Contact dropdown Empty?"
If the contact dropdown is empty, then there is no point in showing the GoToContactName text object. The Conditional Statement checks for a condition of when it's empty, and if it is, we will make the the GoToContactName text object invisible.
6. Hover over the If...then statement on the left to see the ⊕. Click it to add an action within the statement, which brings up the search bar on the right.
7. Search for Show/Hide Controls and select it. Make sure it's within the If...then statement.
8. For the Show/Hide Controls action, configure it as shown:
- Select a control: GoToContactName.
- What will happen?: Hide.
- Internal Note: "HIDE GoToContactName".
So now, if the Contact field is empty, the GoToContactName text object is hidden. In the ELSE statement, we tell Method what to do if the Contact field has a name in it (which is to make it visible).
9. Hover over the Else statement on the left to see the ⊕ and click it.
10. Add a Update Control On Screen action. For this action, configure it as shown:
- Control to update: GoToContactName.
- Update control using this value: Contacts - Display
- Internal Note: "Update GoToContactName with Contact Name."
11. In the Action Set list, select the ⊕ on Update Controls on Screen and add an action below this one (to keep it within the ELSE condition).
12. Add action Show/Hide Controls as shown:
- Select a control: GoToContactName.
- What will happen?: Show.
- Internal Note: "SHOW GoToContactName".
If everything has been added correctly, it should look like this:
Close the action editor when you're ready and give this a try. You'll notice the name in the header will update when you select a contact in the dropdown.
Update Header When Screen Opens
The name in the header updates fine when a contact is selected in a dropdown, but it should update properly when the screen first opens.
This is simple enough to do, but may be a bit tricky figuring which event it should go into. Fortunately, we'll just tell you.
1. Customize the New / Edit Car Screen.
2. Click the Page Icon in the upper right to get to the Screen Properties.
3. Expand actions and open up the Active Record Change event.
4. Add the action Call Routine.
5. For Select a Routine, choose Contacts (Change).
6. Close the action editor.
One last thing, we want to make sure the GoToContactName doesn't show when the user is just adding a brand new user and no contact has been selected yet.
7. Select the GoToContactName field.
8. Change it's Load State to Hidden.
Great! Now the header will update properly!
Coming up next...
You're almost done! In the next mission, we've given you a bonus task you can implement to do mass updates to multiple records.