Overview
Sometimes, it is helpful to give users a customized view of the forms in their Inbox. Mirata gives form builders the ability to design the list entries (or tiles, depending on the view) so that users have a better understanding of what forms they are working on.
This is how the tiles look in the inbox by default (the form definition name and the status are displayed):
This is an example of a customized tile (you can display any fields from the form and format it however you'd like):
Understanding Form Factors
In Mirata, there are three standard "form factors" - a form factor is a different view of the same information. Form Factors enable users to design different views of the form using the same fields. The fields that are contained in one form factor are the exact same field for other form factors - that means, if a user is working on customizing a list-entry and deletes a field, that field will be deleted from the standard (Base) view. The three standard form factors in Mirata are:
Base - what appears in the active form section on the Inbox screen.
See the red box in the image below.
list-entry - what appears on the left panel displaying the current forms in the Inbox while in the "List View" display.
See the pink box in the image below.
tile - what appears on the left panel displaying the current forms in the Inbox while in the "Tile View" display.
See the green box in the image below.
Switching Between Form Factors
When working on a form, for the majority of the time, users will likely be in the "Base" view since this is where the form is constructed. In the bottom left corner of the designer pane, there is a small dropdown that contains the current form factor. Upon form creation, the form will always be in "Base" view.
If it is necessary to switch form factors, for example, to get to the list-entry view, a user must select the same dropdown and enter the name of the form factor they are trying to edit. The screenshot below is an example of adding the list-entry form factor to the designer window.
Make sure to hit enter in order to save the new form factor. After hitting enter, the window should look like the following:
Then, finally, to actually start editing in the new form factor that was created, select that radio button on the form factor window:
Editing a Form Factor
When the custom form factor is selected, it may look like a brand new form has been created. This is actually NOT the case - a new form has NOT been created. Remember that Form Factors enable users to design different views of the form using the same fields. So this is the list-entry view of the form which will enable the user to bring in fields from the "Base" view. This will become apparent if the user attempts to bring any kind of field - they will be greeted with a screen (shown later) that instructs them to select an existing field for new presentation.
Suppose that there is a simple form which looks like the following image, and containing these fields:
Field | Label | Field Type | Additional Information |
|---|---|---|---|
form_label | n/a | text | contains text "MY DEMO FORM" read-only = TRUE |
form_assigned_to | Form Assignment User: | text | initial value = current user read-only = TRUE |
form_assignment_date | Form Assignment Date: | date | initial value = Today read-only = TRUE |
customer | Assigned Customer | text (dropdown) | Source - Inline Table with values:
|
project_type | Project Type | text (dropdown) | Source - Inline Table with values:
|
Now suppose that the form builder wanted to create a list-entry view that contained:
The Demo Form label (text)
The form assignment user (text)
The form assignment date (date)
The current form status (text).
They would have to navigate to the "list-entry" form factor to begin building this.
To begin, drag the type of field required (ex: text input, date) onto the screen in the list-entry view. Immediately is becomes apparent to the user that the field that they are selecting already exists and they will be applying a new presentation to a field that already exists/contains a value.
When bringing fields into a new form factor, the field will maintain the name that was assigned to it in the Base view. The fields will also maintain any calculations that have been applied in regards to the control properties of the field - for example, any read-only properties that were set will carry over to the list-entry view. The user can, and should, change the field label as well as adding any additional style properties that are desired.
REMINDER: DO NOT DELETE any fields from the list-entry form factor, as they will be deleted from the "Base" (and any other) form factor.
This is an example of the list-entry view that has been creating using 4 existing fields (mentioned above) and making each field the full width of the screen.
Field | Field Label |
|---|---|
form_label | n/a |
status | Status: |
form_assigned_to | Form Assigned To: |
form_assignment_date | Form Assignment Date: |
Now, it is important to add some styling changes so that each field is distinct, and any header labels are pronounced in the list-entry view. By adding a few style changes (ensuring everything is read-only, changing background and label colors, making the height of the fields 0.5), the list-entry can look like the following:
Now that the list-entry form factor contains the necessary fields, and has been styled appropriately, it is time to navigate to the inbox to test out the changes.
Testing list-entry View in Inbox
Simply, navigate to the inbox and create a new form. After the form loads, the new list-tile will be loaded in the list of forms that have been created.