How to set up Dynamic Forms in Fluix Tasks
What are Dynamic Forms?
Dynamic Forms is a new functionality in Fluix Tasks that adds even more flexibility in creating processes according to the company’s business needs. In addition to the classic PDF format that is supported in Fluix, companies can create web forms with dynamic layouts. Let’s dive into the details in this article.
What tasks do Dynamic Forms solve?
The main benefits Dynamic Forms functionality provides to the companies are faster form filling, with more accurate data. This is reached in certain ways below.
- Conditional Logic
The fillable fields may appear, become required, read-only, and hidden dynamically based on the options the users select in the form. This ensures a more relevant and personalized form-filling experience, adapting to the users’ specific needs and choices in real time.
- Unlimited Photo Upload
Let your users upload as many photos and comments to each photo to the form as necessary. Depending on the specific requirements or circumstances of the user’s case, the forms are flexible in providing the necessary visual information, and automatically adjust the size of the form depending on the number of photos added.
- Mobile-friendly Look
On-device forms look easy to fill in on smartphones and tablets, fields are big enough. This allows app users to collect data quickly.
- Fields Assignment on a Group Level
Admin can predefine who will fill out which fields on different steps of the flow. This enhances the form-filling process by tailoring forms to each group’s requirements and preferences as they fill them out.
How to set up Dynamic Forms in the business process?
Let’s check a real-life scenario of how the dynamic forms can be utilized in Fluix.
Picture this: during the shift on the field, your service technician needs to fill out the inspection checklist and add multiple photos from the location. Depending on the choice the technician makes in the form, the Dynamic Form does an automated check based on predefined conditions and suggests further fields to be filled.
Step 1 – Create a dynamic form in Form Builder
Navigate to the Fluix admin portal, the Forms section, click Create Form, and select the Dynamic View option. Add the name of the form and click the Create button.
In the upper panel, you will see two tabs:
– Form creation – in this tab, you will see a menu with a list of elements that can be used to create a form. Click on the element to add it or drag and drop it to the centre to start creating your form.
– Condition setup – in this tab, you can configure the conditions for different fields in the form to make them required, read-only, and hidden dynamically based on the options the users select in the form.
Form creation tab – mapping the fields in the form
The elements are divided into two groups:
– Fillable fields – provide you with fields of different types to allow users to fill out the most relevant information.
– Layout – helps to customize your forms by adding the header, text, your company’s logo, and a divider.
Once the element is added, you may do the following:
- In the Field ID section, a specific ID for each field is assigned. This will help you later navigate through the fields when setting up the conditions for the fields.
- In the Label section, you may add the name of how this field should be reflected in the form for the user. You can also make the field required if needed.
Please note: The required status does not work in case this field will be read only or hidden. You can change it later in conditional options. - In the Visibility section, you can select how the field will be reflected in the form: should it be visible & editable, read only, or hidden.
In the Additional Parameters section, you can add the following options:
1) Placeholder and/or Description — lets you create hints for your users;
2) Format option — is available for the Number field and lets you configure the visual view of the number that will be filled out in this field.
3) Copy Content — is an additional functionality that can be added to the Number, Text, and Email fields in the form builder. This function duplicates the content added from one field to another.
For example:
If according to the business flow, it is necessary for your users to fill out the same information to the form couple of times, you may automate this flow and save time by configuring Copy Content feature. For this, add two similar fields e.g. Number fields to the Dynamic Form builder -> click on the field to open it -> select the ID of the field from which you would like the data to be transferred to the current field.
Please note: if the field used to copy content is deleted, the checkbox for the field to which the content should be copied will be automatically unchecked.
Please note 2.0: the field to which the content will be copied should not be set as required or read when copy content is set up. Otherwise, a form with such configurations cannot be submitted due to the conflict of the configurations.
4) Calculate — This function is available only for the Number field and lets you configure automatic calculations such as Sum ( + ), Product ( x), Average, Minimum, and Maximum.
5) Preview —This option allows you to check the editable version of the created form in three main modes: Mobile, Tablet, and Desktop.
6) Move the added element through the page by clicking on it, then clicking on the element from the right side of it and pulling it.
7) Duplicate or delete the element by clicking on it and selecting the respective option.
8) Undo the action done earlier or redo it to discard the results of the last Undo action by clicking on the arrows.
In our use case, during the inspection on the field, it might be necessary for the service technicians to add multiple photos to the form in case some of the remarks do not match the standards. Let’s check how this can be achieved.
In the Form Creation section, you may add the Radio Buttons field to the form, add the options from which the users will select, and make the field Visible & Editable.
After that, you may add Image field and make it Hidden by default since we’ll add a condition to it later.
In the Image field, you may add not only a Placeholder and/or Description for the field but also the Accompanying Field which is an additional field where your technician can add more context to the image that he added (it can be either text field, date, number, signature or email field). In our use case, we’ll add a Text field.
Once we map the fields in the form, it’s time to add Conditional logic based on which the specific fields in the form will be demonstrated for the service technicians.
Condition Setup tab – Add conditional logic to the form
Open the Condition Setup tab, click Add Condition in the sidebar, and click Edit to name it and add the logic of the field.
In our case, service technicians will need to add the images to the form in case the option Yes is selected in the form.
Select the specific field ID and the value from the dropdown list that will be a trigger for the Image field to appear in the form.
Add similar conditions to other radio buttons in your form and click the Save & Publish button in the upper right corner to save the form. Once the checklist is created, let’s add it to the process.
Step 2 – Create the repetitive inspection process in Fluix
Navigate to the Fluix admin portal, the Taskstreams section and click the New Taskstream button. Drag and drop Process Start to the working area and select User / Guest Action.
Drag and drop the User task and connect it with Process Start.
Configure User task by adding the overview of the task and adding the Service technician group.
In the Forms & Attachments section, click Add form -> Choose from forms option and select the checklist created earlier.
Optionally, you can click on the form assignment mode to configure who will fill out which fields in a form on different steps of the process. By assigning form fields you define the particular fields in a form for the Group-Assignee of the current Task. You can make particular fields visible & editable, read only, hidden or required for this Group.
Please note: Making the field required does not work in case this field will be read only or hidden.
Drag and drop another user task for the Supervisor if the review of the checklist is needed and connect it with the previous task.
Decide where the checklist will land once the inspection is completed: upload it to the Fluix storage or your company’s cloud storage, send it via email, or push it to third-party platforms like Procore, Smartsheet, Salesforce, etc. To learn more about different submit actions, please follow this link.
Once ready, save and publish the taskstream and proceed to its testing.
Step 3 – Testing Dynamic Form in the App
To test the setup, make sure that you have added yourself to the group of users who participate in this Taskstream. Open the Fluix app on your iOS or Android device. Alternatively, you may test the setup through the Web User App in the right corner of the admin portal.
Open the task and the dynamic form, and click the Start work button to fill out the checklist. Initially, you may notice that the form does not contain any image fields, however, upon selecting the Yes option from the list, the Image picker will become available allowing you to add as many photos and comments from your location as you need.
In case you have any questions or difficulties with setup, contact our support at support@fluix.io and we’ll be happy to help you.