PhixFlow Help
9. Screen flow
In this chapter, we will update the app to have a more natural screen flow. This involves hiding buttons that are not needed when the user is doing certain things:
Update the buttons in your app to give it a more natural flow. To recap the steps in the video:
- Add a new button:
- Right click on the edit form and go to Open Palette → Basic Components
- Drag a new button on to the form
- Configure the new button:
- Set the name to
Clear Contact Fields
- Set Action Type to Clear All Fields
- Set the name to
- Set the button label to
Clear
Go into App Mode and try the new button. You will see that it clears the values from all fields on the form. Therefore, this is a useful button to press before entering details for a new contact.
- Update the button label to New
Now we will hide a button that users do not need to see when they are entering details for a new contact. We will hide the Update
button when the details on the screen are blank. To do this, we can test the value of UID
. Remember that the UID
field is configured on the edit screen, and hidden - but this means we can use the value of UID
. We know that UID
is always set for every record, so we can test whether this is null or not to work out whether the fields on the edit form are currently populated. Remember also that to access a value on the edit form in an expression we can use _form
.
To hide the Update
button:
- Click on the
Update
button to open the configuration details - Go to the section Formatting Rules
- Add a formatting rule
- Set the Rule Expression to
_form.UID==_NULL
- Since there is currently no hidden style, add one:
- Next to Style, press - Add Style
- Set Name to
Hidden
- Click the Hidden flag
- Save the new style
- In the formatting rule, set the Style to
Hidden
- Save the formatting rule
Now update the Add
button so that it is not shown when the user is updating a record, that is, when the UID
field is set:
- Open configuration details for the
Add
button - Add a formatting rule
- Set the Rule Expression to
_form.UID!=_NULL
- set the Style to
Hidden
- Save the formatting rule
Go into App Mode, and check that when you press New
, all fields are cleared and the Update
button disappears, but the Add
button is shown. Also check that when you select a record, the Add
button disappears but the Update
button is shown.
Update the Delete
button so this is hidden when users are entering a new contact.
Next chapter: 10. Styling apps
Please let us know if we could improve this page feedback@phixflow.com