Auto MAC Address
An app to auto-format (and verify) MAC address entries
This app demonstrates how you can have a single text entry field for users to enter data into, then use that data and auto-format it so it matches a specific schema. To see how we put it together, look under the hood.
Also see: tablet mode & fullscreen mode
How we built this app
There are two main fields that make this interaction possible: - MAC Address Entry (which is where users can enter data), and - MAC Address Formatted (which takes the value from above and formats it into a MAC address automagically). The Entry field has a Valid-If formula, to restrict which characters can be entered, along with a valid-if-error formula (to construct an error under the data entry field telling the user what is wrong). The Formatted field has the same validation criteria as the entry field, but we instead use this to determine when we should actually use the data entered - versus leaving the the field blank.
This is a preview of the data sets used in the app.
This is a high-level model of both the data entities and the UI elements in the app.