Well, we already have a nice list of accounts with all kind of cool features. Now we need a form where we can add new accounts and update the information when needed. For this purpose, we’ll have to build an Edit Widget. This will accomplish the aforementioned tasks.
1. Add Edit Widget. In Studio, click the Widgets pane on the left. Click Add Widget button at the bottom to start widget creation. The same wizard starts up that we used to build our List widget. It can be used almost the same way to create an Edit Widget, the differences are outlined below:
Customizing the Form
Our form can now add new accounts and update account details. The layout is nicely arranged, however it still has a kinda default look, so let’s customize it a bit
Please keep in mind that the changes below don’t get applied automatically! Press the Save button to save changes to disk!
Changing the Form Title
Customizing Field Labels
Automatic Field Recognition and Form Validation is up and running!
Click the i:fields entry in Widget Inspector and select the description field. As you can see, its type attribute is textarea and it appears as a large text box in the form. This is because Studio utilizes automatic type recognition.
AppFlower supports many input types, such as text box, text area, combo box and many others. Basically, all those you can find in modern GUIs are supported. Thanks to the type recognition feature, the type of a form field is automatically adjusted to match the (database) type of data the field is supposed to hold:
- Short textual data is rendered as input box
- Numeric data is rendered as numbers-only input box
- Long text is rendered as text area
- Dates and Times are rendered as date pickers
- Relations are rendered as combo boxes
This helps you build forms faster. You can change a field’s type, but usually you don’t have to, since Studio already took care about that upon widget creation.
AppFlower also comes with a very powerful input validation system, which handles user errors with informative messages and makes your forms secure. It supports a wide range of input types, from numbers to dates, strings, file uploads and more. Best of all, this all works without coding, it’s fully automated!
If you look at the selected description field, you’ll see that form field validators have been attached to it. The reason for this is that Studio automatically adds form validation to all fields and – utilizing the type recognition again – assigns the right kind of validators to them.
- Numeric data can be validated as numbers and ranges
- Textual data can be validated as strings with min / max lengths
- Dates and Times get date validation
- Relations can be validated with existence checks
Besides these, any field can be made mandatory, by setting its validator’s required property to true. Such fields must have a value when submitted. However, all fields are optional by default and when value is provided, the above checks are performed.
Well, that’s it. We have successfully configured the basics. It’s time to hit the Save button and start up a preview! In a few moments, you’ll see all your changes in action! Of course, there is much more to forms: you can create field sets and tabbed forms too, for instance. But no need to rush! This is your first Edit View, so the basics should be enough for now. You’ll learn more about these features in the upcoming chapters.