Overview

This guide is a reference for the different display and form element block types that can be included in a claims blocks schema. Read more about how claims blocks fit into the broader claims workflow in the claims workflow overview guide. Read more about how claims blocks work and how they are linked to other aspects of the product module build in the claims blocks overview guide.

Block categories

Three categories of blocks can be defined in the claims blocks schema:

Display blocks- These blocks neither accept nor store any input. They are included in the claim's block states but do not have a value attribute.
Form element blocks- These blocks render on the claim description form as form inputs. They accept and store input values in block states.
Disbursement blocks - This is a special category of blocks that facilitate the transfer of monetary and non-monetary compensation to beneficiaries. Disbursement blocks are covered in the disbursement blocks guide.

Display blocks

Alert

A text block that displays important information to the user. You can specify one of a predefined set of color schemes to customise the alert's meaning or severity.

Properties

Property	Definition
`"key"`	String. The unique identifier of this block.
`"type"`	String. The block type. In this case, `"alert"`.
`"markdown"`	String. The content that will be parsed as markdown and rendered inside the alert.
`"color"`	String. Sets the display color of the alert to indicate severity. One of `["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]`.

Example

{
    "block": {
        "key": "claim_within_waiting_period",
        "type": "alert",
        "markdown": "This claim is still within the waiting period.",
        "color": "warning"
    }
}

State

Property	Definition
`"type"`	String. The block type. In this case, `"alert"`.

{
  "claim": {
    "block_states": {
      "claim_within_waiting_period": {
        "type":"alert"
      }
    },
   ...
  }
}

Heading

A text block that will render a heading on screen. Useful for grouping input fields under the same category.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block.
`"type"`	String. The block type, in this case `"heading"`.
`"title"`	String. The text that will be rendered as a heading.

Example

{
    "block": {
        "key": "payout_details",
        "type": "heading",
        "title": "Payout details"
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"heading"`.

{
  "claim": {
    "block_states": {
      "payout_details": {
        "type":"heading"
      }
    },
   ...
  }
}

Markdown

A text block that will parse and render given text content according to the markdown specification.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"markdown"`.
`"markdown"`	String. The content to be parsed as markdown and rendered.

Example

{
    "block": {
        "key": "fsca_information",
        "type": "markdown",
        "markdown": "For more information see [here](https://www.fsca.co.za/)"
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"markdown"`.

{
  "claim": {
    "block_states": {
      "fsca_information": {
        "type":"markdown"
      }
    },
   ...
  }
}

Divider

A block that will render a horizontal line on screen to separate sections of input fields.

Properties

Property	Definition
`"key"`	String .The unique identifier for this block
`"type"`	String. The block type, in this case `"divider"`.

Example

{
    "block": {
        "key": "section_divider",
        "type": "divider"
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"divider"`.

{
  "claim": {
    "block_states": {
      "section_divider": {
        "type":"divider"
      }
    },
   ...
  }
}

Form element blocks

Checkbox

A boolean block that stores true if checked and false if unchecked. The user interface renders a single checkbox element with a description.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block.
`"type"`	String. The block type, in this case `"checkbox"`.
`"title"`	String. The text heading that will be displayed above the checkbox element.
`"default_value"`	Boolean. The default value of the block before the user enters a value. One of `[true, false]`.

Example

{
    "block": {
        "key": "documents_uploaded",
        "type": "checkbox",
        "title": "Have the necessary documents been uploaded?",
        "default_value": true
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"checkbox"`.
`"value"`	Boolean. The currently stored value value of the block. One of `[true, false]`.

{
  "claim": {
    "block_states": {
      "documents_uploaded": {
        "type": "checkbox",
        "value": true
      }
    },
    ...
  }
}

Radio block

This block renders a list of radio buttons, of which one can be selected. Each option has a key and a value attribute. Both the key and the value of the selected option are persisted to the block state.

For each option, the label displayed next to the corresponding radio button will be the option value, in title case.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block.
`"type"`	String. The block type, in this case `"dropdown"`.
`"title"`	String. The text heading that will be displayed above the list of radio buttons.
`"description"` optional	String. The text description that will accompany the input element rendered for this block.
`"default_value"`	String. The value of the default option that is saved to the block state if the block state has not been updated.
`"options"`	Array. A list of key-value pairs, each representing one of the radio button options.

Example

{
    "block": {
        "key": "was_third_party_insured",
        "type": "radio",
        "title": "Was the third party insured?",
        "description": "Was the third party vehicle involved in the accident insured?",
        "default_value": "No",
        "options": [
          {
            "key": "no",
            "value": "No"
          },
          {
            "key": "yes",
            "value": "Yes"
          },
        ]
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"radio"`.
`"option_value"`	String. The value of the option currently selected.
`"option_key"`	String. The key of the option currently selected.

{
  "claim": {
    "block_states": {
      "was_third_party_insured": {
        "type": "radio",
        "option_value": "No",
        "option_key": "no"
      }
    },
    ...
  }
}

Dropdown

Renders a dropdown element with a list of options, from which the user can select one option. Each option has a key and a value attribute. Both the key and the value of the selected option are persisted to the block state.

For each option, the label displayed in the dropdown list will be the option value, in title case.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"dropdown"`.
`"title"`	String. The text heading that will be displayed above the dropdown element.
`"options"`	Array. A list of key-value pairs, each representing one of the dropdown options.
`"default_value"` optional	String. The value of the option that is saved in the block state by default, if the block state has not been updated.

Example

{
    "block": {
        "key": "bank_for_payout",
        "type": "dropdown",
        "title": "Select bank for payout:",
        "options": [
          {
            "key": "absa",
            "value": "ABSA"
          },
          {
            "key": "fnb",
            "value": "FNB"
          },
          {
            "key": "capitec",
            "value": "Capitec"
          },
          {
            "key": "investec",
            "value": "Investec"
          },
          {
            "key": "nedbank",
            "value": "Nedbank"
          },
          {
            "key": "standard_bank",
            "value": "Standard Bank"
          },
        ],
        "default_value": "FNB"
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"dropdown"`.
`"option_value"`	String. The value of the option currently selected.
`"option_key"`	String. The key of the option currently selected.

{
  "claim": {
    "block_states": {   
      "bank_for_payout": {
        "type": "dropdown",
        "option_value": "FNB",
        "option_key": "fnb"
      }
    },
    ...
  }
}

Input currency

A numeric block designated with a specified currency. Renders an interactive input element that displays the currency symbol and two decimal points. The values are persisted as integers in cents on the block’s state.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"input.currency"`.
`"title"`	String. The text heading that will be displayed above the input element rendered for this block.
`"isoCode"` optional	String. The three character ISO code for the chosen currency. The default value for this attribute is `ZAR`.
`"placeholder"` optional	Integer. The value, in cents, that is displayed as a placeholder if the block state has not been updated.
`"max"` optional	Integer. The maximum value, in cents, that can be captured in this block.
`"min"` optional	Integer. The minimum value, in cents, that can be captured in this block.

Example

{
    "block": {
        "key": "payout_amount",
        "type": "input.currency",
        "title": "Payout amount",
        "isoCode": "ZAR",
        "placeholder": 10000000,
        "max": 25000000,
        "min": 5000000,
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"input.currency"`.
`"value"`	Integer. The current value of the block.

{
  "claim": {
    "block_states": {   
      "payout_amount": {
        "type": "input.currency",
        "value": 10000000
      }
    },
    ...
  }
}

Input number

A numeric block that accepts an integer or floating point value. The user interface renders an interactive input element that only accepts numeric input.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"input.number"`.
`"title"`	String. The text heading that will be displayed above the input element rendered for this block
`"placeholder"` optional	Integer. The placeholder value that is displayed as a hint to the user if this block's state has not been updated.
`"max"` optional	Integer. The maximum value that can be saved to the block's state.
`"min"` optional	Integer. The minimum value that can be saved to the block's state.

Example

{
    "block": {
        "key": "number_of_beneficiaries",
        "type": "input.number",
        "title": "Number of beneficiaries",
        "placeholder": 1,
        "max": 5,
        "min": 1
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"input.number"`.
`"value"`	Integer. The current value of the block.

{
  "claim": {
    "block_states": {  
      "number_of_beneficiaries": {
        "type": "input.number",
        "value": 1
      }
    },
    ...
  }
}

Input text

A free text element used to capture shorter string fields.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block.
`"type"`	String. The block type, in this case `"input.text"`.
`"title"`	String. The text heading that will be displayed above the input element rendered for this block.
`"description"` optional	String. The text description that will accompany the input element rendered for this block. The description will be displayed between the title and the input element itself.
`"placeholder"` optional	String. The placeholder text displayed on the frontend as a hint to the user if the block state has not been updated.
`"max_length"` optional	Integer. The maximum number of characters of text that can be captured.
`"min_length"` optional	Integer. The minimum number of characters of text that can be captured.

Example

{
    "block": {
        "key": "name_of_account_holder",
        "type": "input.text",
        "title": "Account holder name",
        "description": "The payout will be made to the account holder specified below.",
        "placeholder": "Mr John Doe",
        "max_length": 25,
        "min_length": 5
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"input.text"`.
`"value"`	String. The current value of the block.

{
  "claim": {
    "block_states": {   
      "name_of_account_holder": {
        "type": "input.text",
        "value": "Mr John Doe"
      }
    },
    ...
  }
}

Input paragraph

This block is used to capture longer text input, for example where a full description of the incident needs to be captured. It renders as a form input into which the user can enter a paragraph of text.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block.
`"type"`	String. The block type, in this case `"input.paragraph"`.
`"title"`	String. The text heading that will be displayed above the input element rendered for this block.
`"placeholder"` optional	String. The placeholder value that is displayed as a hint to the user if this block's state has not been updated.
`"max_length"` optional	Integer. The maximum number of characters allowed.
`"min_length"` optional	Integer. The minimum number of characters allowed.

Example

{
    "block": {
        "key": "incident_description",
        "type": "input.paragraph",
        "title": "Incident description",
        "placeholder": "On the date of the incident, the following occurred...",
        "max_length": 500,
        "min_length": 150
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"input.paragraph"`.
`"value"`	String. The current value of the block.

{
  "claim": {
    "block_states": {
      "incident_description": {
        "type": "input.paragraph",
        "value": "On the date of the incident, the following occurred..."
      }
    },
    ...
  }
}

Input time

A block that accepts the time of day in the ISO 8601 time format. On the frontend, this block allows both direct string input and displays a time picker.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"input.time"`.
`"title"`	String. The text heading that will be displayed above the input element rendered for this block.
`"placeholder"` optional	String. The placeholder value that will be displayed as a hint to the user. Must be a time of day in ISO 8601 format.
`"default_value"` optional	String. The default value for this block if the block state has not been updated. Must be a time of day in ISO 8601 format.

Example

{
    "block": {
        "key": "time_of_incident",
        "type": "input.time",
        "title": "Time of incident",
        "placeholder": "12:00",
        "default_value": "12:00"
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"input.time"`.
`"value"`	String. The block's current value.

{
  "claim": {
    "block_states": {   
      "time_of_incident": {
        "type": "input.time",
        "value": "12:00"
      }
    },
    ...
  }
}

Input date

A block that accepts a date in the ISO 8601 time format. On the frontend, this block allows both direct string input and displays a date picker.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"input.date"`.
`"title"`	String. The text heading that will be displayed above the input element rendered for this block.
`"default_value"` optional	String. The default value that is stored when this block's state has not been updated. Must be a date in ISO 8601 format.
`"placeholder"` optional	String. The placeholder value that is displayed as a hint to the user if this block's state has not been updated. Must be a date in ISO 8601 format.
`"max"` optional	String. The latest date that can be captured by this block. Must be a date in ISO 8601 format.
`"min"` optional	String. The earliest date that can be captured by this block. Must be a date in ISO 8601 format.

Example

{
    "block": {
        "key": "date_of_death",
        "type": "input.date",
        "title": "Date of death:",
        "default_value": "{{ dateNow }}",
        "placeholder": "{{ dateNow }}",
        "max": "{{ dateNow }}",
        "min": "2021-01-01"
    }
}

State

Property	Definition
`"type"`	String. The block type, in this case `"input.date"`.
`"value"`	String. The current value of the block.

{
  "claim": {
    "block_states": {  
      "date_of_death": {
        "type": "input.date",
        "value": "2021-07-29T13:56:47+02:00"
      }
    },
    ...
  }
}

Group

The block enables grouping nested blocks related to a specific context.

Properties

Property	Definition
`"key"`	String. The unique identifier for this block
`"type"`	String. The block type, in this case `"group"`.
`"title"`	String. The text that will be rendered as the group's title.
`"blocks"`	Array. An array of sub-blocks, each representing an input field within the group.
`"collapsible"`	Boolean. Defines whether the group can be collapsed or not.

Example

{
    "block": {
      "key": "police_block",
      "type": "group",
      "title": "Provide the following details:",
      "blocks": [
        {
          "block": {
            "key": "police_station",
            "type": "input.text",
            "title": "Police station reported",
            "max_length": 25,
            "min_length": 0
          }
        },
        {
          "block": {
            "key": "investigating_officer",
            "type": "input.text",
            "title": "Investigating officer information - name and contact number",
            "max_length": 25,
            "min_length": 0
          }
        },
        {
          "block": {
            "key": "case_number",
            "type": "input.text",
            "title": "Case Number",
            "max_length": 25,
            "min_length": 0
          }
        }
      ],
      "collapsible": false
    },
    "show_if": "{{if (ifCondition claim.block_states.claim_type.option_key '===' 'accidental') '||' (ifCondition claim.block_states.claim_type.option_key '===' 'unnatural')}}"
  }

State

Property	Definition
`"type"`	String. The block type, in this case `"group"`.

Note that each nested block saves on the claim record at the same level as the group block.

{
  "claim": {
    "block_states": {  
      "police_block": {
            "type": "group"
        },
       "police_station": {
            "type": "input.text",
            "value": "Tokai"
        },
      "investigating_officer": {
            "type": "input.text",
            "value": "PC Wayne"
        },
       "case_number": {
            "type": "input.text",
            "value": "ABCDE1234"
        },
    ...
  }
}

Display conditions

Display conditions allow you to customise the claims workflow by hiding or disabling certain blocks based on other block states, or based on existing claim, policy or policyholder information. You can also use the required_if parameter to define conditions under which the input for a given block will be mandatory.

All display conditions are optional.

`"show_if"`

Default value: true.

If the value is truthy, the Block will be visible, else it will be hidden. If this condition is specified, "hide_if" will be ignored.

"show_if": "{{ifCondition claim.status '===' 'open'}}"

"show_if": "{{ifCondition claim.block_states.claim_type.option_key '===' 'accidental_death'}}"

`"hide_if"`

Default value: false.

If truthy, the Block will be hidden, else it will be visible. If "show_if" is specified, this condition will be ignored.

"hide_if": "{{ifCondition claim.policy.sum_assured '<' 2000000}}"

`"disabled_if"`

Default value: false.

This property is only relevant for form element blocks. If truthy, the block will be disabled, effectively making it read-only. The value of a disabled block can't be changed via the frontend but it can still be changed via the API. A disabled block’s value(s) will still be visible on the dashboard.

"disabled_if": "{{ifCondition claim.policy.module_data.life_benefit '===' 'expired' }}"

`"required_if"`

Default value: false.

This property is only relevant for form element blocks. If truthy, and the block has no value, the form input will have a red border applied on the frontend, indicating that a value is required. If this property is false, it will have no effect on the styling of the block on the dashboard. This property does not have any effect when retrieving and updating block states over the API.

Note that when a block has "required_if": true, and has a missing value, this will not prevent the claim from progressing. In other words, a claim will still be able to pass through the full process from opening to approval if a required input is missing.

"required_if": "{{ifCondition claim.block_states.has_excess_applicable_check.value '===' true }}"