Accordion #
The accordion
field is a container field. It can define multiple input
fields, which are displayed as subform. The output is an array of dictionaries.

Accordion
Properties #
property | value type | optional | description |
---|---|---|---|
key | string | mandatory | Keys are for internal use and must be unique |
title | string | optional | The title of the accordion element |
dynFormSearchKey | string | optional (default: null) | key of one of the child field of which the value refers to a custom partial form |
dynFormObjectFile | string with relative path to file without file extension | optional (default: null) | if dynFormSearchKey is set this path points to the file containing a subform. Do not define the used file extension. Quiqr will automatically try to open json, toml or yaml files. If dynFormObjectFile is not set it refers to the partials in the ./quiqr/model/base file itself. |
dynFormObjectRoot | string | optional (default: null) | if dynFormObjectFile is set this points to the root node where the subform is defined e.g. components |
fields | array of dictionaries | mandatory | These are the form input fields. |
fields.[n].arrayTitle | boolean | optional (default: false) | The value of the child field which has arrayTitle=true will be displayed as the accordion item title |
Regular accordion #
Below an example of a regular accordion configuration without dynamic forms.
./quiqr/model/base.
fields:
- arrayTitle: true
key: title
title: Title
type: string
- key: boolean1
title: boolean1
type: boolean
- key: boolean2
title: boolean2
type: boolean
- key: boolean3
title: boolean3
type: boolean
key: my-accordion
title: accordion
type: accordion
key = "my-accordion"
title = "accordion"
type = "accordion"
[[fields]]
arrayTitle = true
key = "title"
title = "Title"
type = "string"
[[fields]]
key = "boolean1"
title = "boolean1"
type = "boolean"
[[fields]]
key = "boolean2"
title = "boolean2"
type = "boolean"
[[fields]]
key = "boolean3"
title = "boolean3"
type = "boolean"
{
"fields": [
{
"arrayTitle": true,
"key": "title",
"title": "Title",
"type": "string"
},
{
"key": "boolean1",
"title": "boolean1",
"type": "boolean"
},
{
"key": "boolean2",
"title": "boolean2",
"type": "boolean"
},
{
"key": "boolean3",
"title": "boolean3",
"type": "boolean"
}
],
"key": "my-accordion",
"title": "accordion",
"type": "accordion"
}
Accordion with dynamic forms defined in ./quiqr/model/base.yaml #
Fragments of the ./quiqr/model/base.yaml
with a dynamic accordion and a partials section
./quiqr/model/base.
dynFormSearchKey: component_type
fields:
- arrayTitle: true
key: title
title: Title
type: string
- key: component_type
multiple: false
options:
- text: Component 1
value: component1
- text: Component 2
value: component2
title: Component Type
type: select
key: page_sections
title: Page sections
type: accordion
dynFormSearchKey = "component_type"
key = "page_sections"
title = "Page sections"
type = "accordion"
[[fields]]
arrayTitle = true
key = "title"
title = "Title"
type = "string"
[[fields]]
key = "component_type"
multiple = false
title = "Component Type"
type = "select"
[[fields.options]]
text = "Component 1"
value = "component1"
[[fields.options]]
text = "Component 2"
value = "component2"
{
"dynFormSearchKey": "component_type",
"fields": [
{
"arrayTitle": true,
"key": "title",
"title": "Title",
"type": "string"
},
{
"key": "component_type",
"multiple": false,
"options": [
{
"text": "Component 1",
"value": "component1"
},
{
"text": "Component 2",
"value": "component2"
}
],
"title": "Component Type",
"type": "select"
}
],
"key": "page_sections",
"title": "Page sections",
"type": "accordion"
}
./quiqr/model/base.
dynamics:
- component_type: poppy-banner
fields:
- key: poppy_variant
multiple: false
options:
- text: Full height
value: header-banner-full-height
- text: Regular
value: header-banner
title: Quiqr Variant
type: select
- key: bg_image
title: Background image
type: string
- key: buttontxt
title: Button text
type: string
key: component1
- component_type: poppy-shortlist
fields:
- key: text1
title: Text 1
type: string
- key: text2
title: Text 2
type: string
- key: text3
title: Text 3
type: string
groupdata: true
key: component2
type: section
[[dynamics]]
component_type = "poppy-banner"
key = "component1"
[[dynamics.fields]]
key = "poppy_variant"
multiple = false
title = "Quiqr Variant"
type = "select"
[[dynamics.fields.options]]
text = "Full height"
value = "header-banner-full-height"
[[dynamics.fields.options]]
text = "Regular"
value = "header-banner"
[[dynamics.fields]]
key = "bg_image"
title = "Background image"
type = "string"
[[dynamics.fields]]
key = "buttontxt"
title = "Button text"
type = "string"
[[dynamics]]
component_type = "poppy-shortlist"
groupdata = true
key = "component2"
type = "section"
[[dynamics.fields]]
key = "text1"
title = "Text 1"
type = "string"
[[dynamics.fields]]
key = "text2"
title = "Text 2"
type = "string"
[[dynamics.fields]]
key = "text3"
title = "Text 3"
type = "string"
{
"dynamics": [
{
"component_type": "poppy-banner",
"fields": [
{
"key": "poppy_variant",
"multiple": false,
"options": [
{
"text": "Full height",
"value": "header-banner-full-height"
},
{
"text": "Regular",
"value": "header-banner"
}
],
"title": "Quiqr Variant",
"type": "select"
},
{
"key": "bg_image",
"title": "Background image",
"type": "string"
},
{
"key": "buttontxt",
"title": "Button text",
"type": "string"
}
],
"key": "component1"
},
{
"component_type": "poppy-shortlist",
"fields": [
{
"key": "text1",
"title": "Text 1",
"type": "string"
},
{
"key": "text2",
"title": "Text 2",
"type": "string"
},
{
"key": "text3",
"title": "Text 3",
"type": "string"
}
],
"groupdata": true,
"key": "component2",
"type": "section"
}
]
}
Accordion with dynamic forms defined in a seperate file #
Fragments of the ./quiqr/model/base.yaml
with a dynamic accordion.
./quiqr/model/base.
dynFormObjectFile: data/pageComponentsTree
dynFormObjectRoot: components
dynFormSearchKey: component_type
fields:
- arrayTitle: true
key: title
title: Title
type: string
- key: component_type
multiple: false
options:
- text: Component 1
value: component1
- text: Component 2
value: component2
title: Component Type
type: select
key: page_sections
title: Page sections
type: accordion
dynFormObjectFile = "data/pageComponentsTree"
dynFormObjectRoot = "components"
dynFormSearchKey = "component_type"
key = "page_sections"
title = "Page sections"
type = "accordion"
[[fields]]
arrayTitle = true
key = "title"
title = "Title"
type = "string"
[[fields]]
key = "component_type"
multiple = false
title = "Component Type"
type = "select"
[[fields.options]]
text = "Component 1"
value = "component1"
[[fields.options]]
text = "Component 2"
value = "component2"
{
"dynFormObjectFile": "data/pageComponentsTree",
"dynFormObjectRoot": "components",
"dynFormSearchKey": "component_type",
"fields": [
{
"arrayTitle": true,
"key": "title",
"title": "Title",
"type": "string"
},
{
"key": "component_type",
"multiple": false,
"options": [
{
"text": "Component 1",
"value": "component1"
},
{
"text": "Component 2",
"value": "component2"
}
],
"title": "Component Type",
"type": "select"
}
],
"key": "page_sections",
"title": "Page sections",
"type": "accordion"
}
The complete object file in this case data/pageComponentsTree.yaml
data/pageComponentsTree.
components:
- component_type: poppy-banner
fields:
- key: poppy_variant
multiple: false
options:
- text: Full height
value: header-banner-full-height
- text: Regular
value: header-banner
title: Quiqr Variant
type: select
- key: bg_image
title: Background image
type: string
- key: buttontxt
title: Button text
type: string
key: component1
- component_type: poppy-shortlist
fields:
- key: text1
title: Text 1
type: string
- key: text2
title: Text 2
type: string
- key: text3
title: Text 3
type: string
groupdata: true
key: component2
type: section
[[components]]
component_type = "poppy-banner"
key = "component1"
[[components.fields]]
key = "poppy_variant"
multiple = false
title = "Quiqr Variant"
type = "select"
[[components.fields.options]]
text = "Full height"
value = "header-banner-full-height"
[[components.fields.options]]
text = "Regular"
value = "header-banner"
[[components.fields]]
key = "bg_image"
title = "Background image"
type = "string"
[[components.fields]]
key = "buttontxt"
title = "Button text"
type = "string"
[[components]]
component_type = "poppy-shortlist"
groupdata = true
key = "component2"
type = "section"
[[components.fields]]
key = "text1"
title = "Text 1"
type = "string"
[[components.fields]]
key = "text2"
title = "Text 2"
type = "string"
[[components.fields]]
key = "text3"
title = "Text 3"
type = "string"
{
"components": [
{
"component_type": "poppy-banner",
"fields": [
{
"key": "poppy_variant",
"multiple": false,
"options": [
{
"text": "Full height",
"value": "header-banner-full-height"
},
{
"text": "Regular",
"value": "header-banner"
}
],
"title": "Quiqr Variant",
"type": "select"
},
{
"key": "bg_image",
"title": "Background image",
"type": "string"
},
{
"key": "buttontxt",
"title": "Button text",
"type": "string"
}
],
"key": "component1"
},
{
"component_type": "poppy-shortlist",
"fields": [
{
"key": "text1",
"title": "Text 1",
"type": "string"
},
{
"key": "text2",
"title": "Text 2",
"type": "string"
},
{
"key": "text3",
"title": "Text 3",
"type": "string"
}
],
"groupdata": true,
"key": "component2",
"type": "section"
}
]
}