Advanced Question Options Configuration (JSON)

There are some additional features relating to the creation of Questions which we've summarised in this article. In order to manage tasks and questions, you'll need the relevant permission - explained in this article: Managing Workflows - Permissions. These options utilise JSON to determine the behaviour of questions - a detailed explanation of what JSON is can be read in this support article: JSON - Question Options Explanation. Some of these configuration options will require some technical ability and training by Locata. Contact us at [email protected] regarding any training requirements.

TABLE OF CONTENTS

• Editing Options
• Larger Text Boxes
• Guidance Text Larger Text Boxes
• Adding An Icon
• Making Questions Mandatory
• Changing Date Question Appearance
  • Days
  • Months 
  • Decades
• Date Validation - 
• When Question A = "Yes", Make Question B Mandatory
• When Question A = value in a drop down list, Make Question B Mandatory
• When Question A is "X", Disable Question B

Editing Options

All JSON options are configured within the "Options" fields on questions in the question configuration section of settings.

Larger Text Boxes

For "Text" type questions, you can add the following text to the options to adjust the size of the text box, which defaults to a single line. 

{ "inputType": "textarea", "rows": 6}

To make the text box larger or smaller, adjust the number - currently set to "6".

Here's an example:

Guidance Text Larger Text Boxes

You can add guidance text to show in large text boxes by using the following.

{ "inputType": "textarea", "rows": 6, "required": "true" , "placeholder":  "Provide as much detail as possible, including why they might have lost their last settled address."}

Adding An Icon

You can add specific icons to questions.

To add a £ to a number question 

Use: {"icon": "£"}

To add an @ to a text question

Use: {"icon": "@"}

Making Questions Mandatory

You can make any question mandatory by entering the below options text into the options field of the question:

{"required": "true" }

Here's an example:

Changing Date Question Appearance

Date questions default to looking like this:

The above calendar is defaulting to showing the date picker in a "Years" format. Here are some other options:

Days

Use: {"calendarViewMode": "days"}

Months 

Use: {"calendarViewMode": "months"}

Decades

Use: {"calendarViewMode": "decades"}

Date Validation - 

If you'd like to configure a date field with validation criteria - such as only allowing future or past dates. In this example we are restricting the date field to only allow today's date to be entered. 

In this code moment() is today and what we want to happen is only allow a date to be entered when it is 16 years ago. 

{ "required": "true", "validationToDate": "moment().add(-16,'years')", "calendarViewMode": "decades" }

In this next example we want to restrict the dates that can be entered so that only today's date can be entered. 

{ "required": "true", "validationFromDate": "moment().add(-1, 'days')",   "validationToDate": "moment()", "calendarViewMode": "days" }

When Question A = "Yes", Make Question B Mandatory

You can make another question or a series of questions to become mandatory based on the answer to another question. 

In the below example POD3 is the element code for the question we want to become mandatory if the answer to POD1 is Yes

{"onchange": "(function() { Tasks.setRequiredAsterisk('POD3', this.value === '1'); })" }

If you'd like more than one question to become mandatory add a comma between the question names e.g. 'POD3,POD5,POD6'

In the system a Yes answer = "1" and a No answer = "0"

When Question A = value in a drop down list, Make Question B Mandatory

Much like the example above you can also make questions mandatory depending on the answer to an attribute (drop down list) question.

{ "onchange": "(function() { var reqValues = new Array('1', '2', '3', '11', '12', '13'); Tasks.setRequiredAsterisk('HNA_EMPLOYMENTDETAILS,OS_DISTANCETOWORK,OS_TRAVELTOANDFROMWORK,OS_OTHERTRANSPORTTOWORK,OS_NEWEMPLOYMENT,OS_WHYCANTMOVEWORK', reqValues.indexOf(this.value) != -1); })" }

In this example if the answer to the Employment status of the main applicant equals any of the below then it makes following questions mandatory.

• Working: 30 hours a week or more (contracted, regular or guaranteed)
• Working: less than 30 hours a week (contracted, regular or guaranteed)
• Training Scheme / apprenticeship
• Registered employed but currently off work due to ill health / disability on reduced or SSP
• Registered employed but currently off work on maternity/paternity / adoption leave on reduced or statutory pay (i.e. SMP)
• Working: irregular hours  with variable or irregular pay

The values in the array ('1', '2', '3', '11', '12', '13') relate to the code in the attribute list for the question you are adding the JSON to.

When Question A is "X", Disable Question B

You can disable a question based on an answer to another question.

{"required":"true","onchange": "(function() { Tasks.setRequiredAsterisk('APP_PB_DETAILS,APP_PB_APPROVED,APP_PB_APPROVAL_DATE', this.value === '1'); Tasks.enableDisableQuestion('APP_PB_DETAILS', this.value === '0'); Tasks.enableDisableQuestion('APP_PB_APPROVED', this.value === '0'); Tasks.enableDisableQuestion('APP_PB_APPROVAL_DATE', this.value === '0'); })" }

In the example below if Priority Banding Requested = No then Priority banding case summary, priority banding approved and priority banding approved date are disabled and will appear greyed out/non clickable.