Repeatable component
Sometime you want to create a form that consist of multiple fields but with the same structure and for multiple different paths.
Simple example
Example, you want to collect, for 3 persons, their firstname and lastname. The first way to do it should look like this :
{
"policy_owner": {
"type": "section",
"properties": {
"person": {
"type": "section",
"properties": {
"first_name": {
"component": "text",
"label": "Firstname"
},
"last_name": {
"component": "text",
"label": "Lastname"
}
}
}
}
},
"main_driver": {
"type": "section",
"properties": {
"first_name": {
"component": "text",
"label": "Firstname"
},
"last_name": {
"component": "text",
"label": "Lastname"
}
}
},
"secondary_driver": {
"type": "section",
"properties": {
"first_name": {
"component": "text",
"label": "Firstname"
},
"last_name": {
"component": "text",
"label": "Lastname"
}
}
}
}
That would have the result :
{
"policy_owner": {
"person": {
"first_name": "Bernard",
"last_name": "Jarzincko"
}
},
"main_driver": {
"first_name": "Bernard",
"last_name": "Jarzincko"
},
"secondary_driver": {
"first_name": "Josefina",
"last_name": "Jarzincka"
}
}
But with the repeatable component you can simplify the schema :
{
"repeatable": {
"type": "repeatable",
"iterations": [
"policy_owner.person",
"main_driver",
"secondary_driver"
],
"properties": {
"%1.first_name": {
"component": "text",
"label": "t:%1.first_name"
},
"%1.last_name": {
"component": "text",
"label": "t:%1.last_name"
}
}
}
Storybook example
Simple Repeatable#
For each iterations, it will replace the %1 in the path found in properties
Iterations from
Like almost everywhere in the schema, we can use an iteration list coming from the data
{
"repeatable": {
"type": "repeatable",
"iterations": {
"from": "constants.iteration_list"
},
"properties": {
"%1.first_name": {
"component": "text",
"label": "t:%1.first_name"
},
"%1.last_name": {
"component": "text",
"label": "t:%1.last_name"
}
}
}
}
Storybook example
Iterations From#
Repeatable rows for a premiums table
It can also be often than a premiums table have the same schema for each rows, but only the main property name change, so you can use repeatableRow and iterations on a premium table. So in this case, for each iteration, the repeatableRow will be generated replacing the %1 by the iteration.
{
"property.content.specified": {
"type": "premiums_table",
"headers": [
{
"title": "t:coverage_selected",
"className": "text-center",
"size": "1/20"
},
{
"title": "t:coverage",
"className": "text-center",
"size": "1/4"
},
{
"title": "t:rate",
"className": "text-center",
"size": "1/10"
},
{
"title": "t:netto_premium",
"className": "text-center",
"size": "1/8"
},
{
"title": "t:bruto_premium",
"className": "text-center",
"size": "1/8"
},
{
"title": "t:premium_details",
"className": "text-center",
"size": "1/4"
}
],
"iterations": ["furniture", "not_furniture", "coucou"],
"repeatableRow": {
"cells": [
{
"type": "group",
"properties": {
"%1.base.selected": {
"component": "checkbox",
"default": {
"value": true
}
}
}
},
{
"type": "group",
"properties": {
"name": {
"type": "text",
"textStyles": ["italic"],
"text": "t:property_premium.property.content.%1.base"
}
}
},
{
"type": "group",
"properties": {
"rate": {
"type": "text",
"textStyles": ["italic"],
"text": {
"from": "property_premium.property.content.%1.base.technical_premium.rate"
},
"visible": [
{
"operators": "and",
"property": "property_premium.property.content.%1.base.technical_error.indicator",
"assertion": "equal",
"value": 0
},
{
"operators": "and",
"property": "property_premium.property.content.%1.base.is_accepted",
"assertion": "isTrue"
}
]
}
}
},
{
"type": "group",
"properties": {
"price": {
"type": "text",
"className": "text-center",
"text": {
"from": "property_premium.property.content.%1.base.technical_premium.selected.ht"
},
"format": "price",
"visible": [
{
"operators": "and",
"property": "property_premium.property.content.%1.base.technical_error.indicator",
"assertion": "equal",
"value": 0
},
{
"operators": "and",
"property": "property_premium.property.content.%1.base.is_accepted",
"assertion": "isTrue"
}
]
},
"technical_error_message": {
"type": "message",
"className": "text-center",
"message": {
"from": "property_premium.property.content.%1.base.technical_error.message"
},
"visible": {
"property": "property_premium.property.content.%1.base.technical_error.indicator",
"assertion": "equal",
"value": 1
}
},
"accepted_error_message": {
"type": "message",
"className": "text-center",
"message": "t:bo_analysis_needed",
"visible": {
"property": "property_premium.property.content.%1.base.is_accepted",
"assertion": "isFalse"
}
}
}
},
{
"type": "group",
"properties": {
"price": {
"type": "text",
"className": "text-center",
"text": {
"from": "property_premium.property.content.%1.base.technical_premium.selected.ttc"
},
"format": "price",
"visible": [
{
"operators": "and",
"property": "property_premium.property.content.%1.base.technical_error.indicator",
"assertion": "equal",
"value": 0
},
{
"operators": "and",
"property": "property_premium.property.content.%1.base.is_accepted",
"assertion": "isTrue"
}
]
}
}
},
{
"type": "group",
"properties": {
"price_details": {
"type": "text",
"className": "text-center",
"text": {
"from": "property_premium.property.content.%1.base.technical_premium.premium_details"
},
"textStyles": ["small"]
}
}
}
]
},
"rows": [
{
"cells": [
{},
{
"type": "group",
"properties": {
"name": {
"type": "text",
"textStyles": ["bold"],
"text": "t:property_premium.property.content"
}
}
},
{},
{
"type": "group",
"properties": {
"price": {
"type": "text",
"textStyles": ["bold"],
"className": "text-center",
"text": {
"from": "property_premium.property.content.technical_premium.selected.ht"
},
"format": "price"
},
"technical_error_message": {
"type": "message",
"className": "text-center",
"message": {
"from": "property_premium.property.content.technical_error.message"
},
"visible": {
"property": "property_premium.property.content.technical_error.indicator",
"assertion": "equal",
"value": 1
}
},
"accepted_error_message": {
"type": "message",
"className": "text-center",
"message": "t:bo_analysis_needed",
"visible": {
"property": "property_premium.property.content.is_accepted",
"assertion": "isFalse"
}
}
}
},
{
"type": "group",
"properties": {
"price": {
"type": "text",
"textStyles": ["bold"],
"className": "text-center",
"text": {
"from": "property_premium.property.content.technical_premium.selected.ttc"
},
"format": "price"
}
}
},
{
"type": "group",
"properties": {
"price_details": {
"type": "text",
"className": "text-center",
"text": {
"from": "property_premium.property.content.technical_premium.premium_details"
},
"textStyles": ["small"]
}
}
}
]
}
]
}
}