Overview

There are numerous examples where Dynamic Fields can play a role in Form Creation; however, in this scenario, we will walk through creating Dynamic Fields when using an Option List.  The scenario will show case when the driver selects an Option from a list in a form field, for example ‘Yes’ or ‘No’, another field will appear based on that choice.


It is important to note that Dynamic Fields can also be utilized on the Dashboard; however, Eleos will warn you within Drive Axle that it will not. 


Visibility Javascript

Before you can take advantage of Dynamic Fields within Eleos, you need to have Visibility JavaScript in place.


**VISIBILITY JAVASCRIPT MUST BE APPLIED FOR EACH FORM WHERE THERE ARE DYNAMIC FIELDS INTENDED TO BE USED**


If you do not have Visibility JavaScript in place or are creating a brand-new form and need assistance, please reach out to ASR Support – support@asr-solutions.com.


Section 1: Creating Dynamic Fields in Forms

Login to Drive Axle, navigate to App Manager, go to App Configuration, and click on ‘Forms’.

                               

In Forms, either create a new form by clicking on ‘Add a form’ or open a form that already exists by selecting it from the choices shown.

To demonstrate how to get Dynamic Fields to work within your form, this document will outline steps by creating a new form. After clicking on ‘Add a form’, you need to give your form a Code and a Name. Make sure to hit ‘Save’ in the top right corner to ensure that your form saves prior to adding fields.

When creating a new form within Drive Axle to specially utilize Dynamic Fields, there are three fields that you need to construct in order for it to work properly.

  • The Control Field
  • The Dynamic Field
  • The Field that the Dynamic Field is dependent upon

To add fields to your form, click on ‘Add a field’.

 

The Control Field

The Control Field, in this scenario, is the Option List Type. It is the question or field within the form that the driver will answer. Depending on the answer the driver or user makes, it will then show an additional field to add additional information. This will be determined at a later stage.


To set your new field to an Option List, navigate to Type and click. You will be presented with a list of options. Option List is towards the top and can be set by clicking on it in the list presented. 

 

 

Once you choose Option List, you will have a couple of additional fields to name pertaining to the Option List. 

  1. Code
    1. Like the Code Name of the Form, you will give your field a Code Name. For this demonstration, the Code for this field will be CONTROL-FIELD as this is the Control Field for our Dynamic Fields setup.
  2. Type
    1. This has been defined as Option List.
  3. Label
    1. The label is what will appear to the driver on the form. This will appear as text and can be a statement or a question, depending on how you want it to appear to the driver.
    2. For this demonstration, we will update the Label with a question for the driver to answer.
      1. Ex: Do you have any reason to believe you have been exposed to COVID-19 virus?
  4. Visible
    1. This check box sets the field to be either visible or invisible to the driver. Keep the CONTROL-FIELD Visible to the driver.
  5. Validation
    1. There are two options – None or Required.
    2. This will either Require the driver to answer what is being asked or make it Optional.
  6. Options
    1. The Options are choices that will be presented to the driver that pertain to the Label.
    2. Once you add your first Option, a second line will automatically appear to add more if needed.
    3. You must provide a LABEL and a VALUE

 

The Dynamic Field

The Dynamic Field is the field that will appear to the driver. If we want the driver to add comments based on their answer to the CONTROL-FIELD, we can create a Text field to have them add those additional comments.


First you would want to ‘Add a Field’ and in Type chose ‘Text’. 


Like the original field, you will need to give this new field a Code and Label. To keep things consistent, we will call this field code DYNAMIC-FIELD. 


We want more information from the driver if they selected ‘YES’ so our Label will contain: ‘You answered ‘YES’, please explain:’. 


The Field that ‘The Dynamic Field’ is Dependent Upon

The last field you need to create is the DYNAMIC- field/code. This field will be reliant on the field created in the last step. 

  • The Code name you give this field MUST contain DYNAMIC- at the beginning of the name.
  • The Code name you give this field MUST end with the Code name you gave the field in the prior step.
  • For example, our last field was DYNAMIC-FIELD. This new field will be called DYNAMIC-DYNAMIC-FIELD.

This last field is not visible to the driver and does not have any validation on the form.

 

Section 2: Creating an Action for Your Form

Once you have saved your form containing your new dynamic fields, an Action needs to be created for your driver to press to pull up the form.


Navigate to App Configuration at the top of the Menu within App Manager and go to Actions from the drop down. Once in Actions, click on ‘Add an action’.

Similar to creating a new form, there are fields that will need to be set up when creating a new Action. 


To tie your form to the action, change the Type to ‘New Message’. The Label field is what will show on the Action/Button itself when inside of the app. You have the option to give the Action an Icon; however, it is not required.

Most importantly, within the Action you need to link the Action to the Form that you created. In the bottom right is a field called Form with a drop down. Click the drop down and navigate to the form in which you want the Action tied too. In our scenario we choose the form created in Section 1 which is called DYNAMIC-FIELDS.

                       

When a form is selected, additional Pre-filled Field Values will appear. This is where we would want to set a value for the DYNAMIC-DYNAMIC-FIELD created within the form. 

Click on ‘Set value…’ under the DYNAMIC- field.

 

Leave the drop down as ‘Other…’ and paste the below into the empty field presented.

data[‘YOUR CONTROL FIELD CODE NAME HERE’] == ‘OPTON VALUE’’

Replace the YOUR CONTROL FIELD/CODE NAME HERE with the Code you gave to the CONTROL-FIELD within your form. If we were to look back at our DYNAMIC-FIELDS form, this would be ‘CONTROL-FIELD’.


Replace the OPTION VALUE with the Value from the Options in which you want your Dynamic Field to show if selected. In this scenario, we want our additional text field to appear when the driver selects ‘YES’.

Following our example, it would look like this:

data['CONTROL-FIELD'] == 'YES’  

**IMPORTANT: THIS MUST EXACTLY MATCH THE OPTIONS IN YOUR LIST AND IS CASE SENSITIVE**

 

Section 3: Adding Action to Dashboard for Testing

The form that contains the Dynamic Fields can be used for many different solutions. The action can be within the driver’s workflow, added to the Menu or even the Dashboard or Home Screen.


For quick testing to ensure your dynamic fields are working as expected, you can add the form to the Dashboard.

To do so, within Drive Axle, navigate to Actions > App Configuration > Dashboards.


Choose the Dashboard you would want to login to the app under to test the form and action. Here we will be adding the new action to the Default Dashboard.

Depending on your environment, you have the option to add your action / form to whichever section within the Dashboard that makes the most sense for testing. For this document, we will put the Action/Form under Driver Actions. 


By clicking on your Dashboard Tile (Driver Actions), you will be presented with a list of Actions on the bottom right. This is where you want to select the form that you plan on testing i.e., DYNAMIC-FIELDS.


** IF THERE ARE ACTIONS ALREADY HIGHLIGHTED IN THIS LIST, YOU MUST +CTRL ON YOUR KEYBOARD WHEN SELECTING YOUR NEW ACTION. FAILURE TO DO SO WILL RESULT IN ALL OTHER ACTIONS BEING UNSELECTED. **

                               

Make sure to hit ‘Save’ in the top right corner to make sure your changes are saved prior to logging into the app for testing.


Section 4: Testing the Dynamic Fields within App

You are now ready to test your Dynamic Fields. Log into your app using your User Code and Password.                                                             

Then navigate to your Action/Button on the Dashboard or where you decided to put your Action from Section 4. In this document, we put the ‘How to Create Dynamic Fields’ action on the Dashboard within Driver Actions.


Your form will populate after clicking on Action. Below is our example of form DYNAMIC-FIELDS showing our question with Option List choices.   

When clicking on ‘No’, no additional field appears for comments. When clicking on ‘Yes’, our additional field now appears for the user to provide additional information pertaining to his or her choice of ‘Yes’.

Making the field ‘Required’ in form design requires the user to fill out the additional field. The form will not be able to be submitted until answered. An error, like below, will be presented. Once filled out, the error will go away, and the user will be able to submit the form without issue.