accordion2

The accordion allows collapsable data rows, much like a portal.

Accordion2 version adds slots that can replace the row header.

KeyTypeDescription

bfId

object

a BetterForms UUID is generated and added to all browser side created records to help in post processing

defaultModel

object

when provided will be used to populate browser side created rows.

min

number

{optional} The minimum number of tabs the user is allowed to create. The delete icon will had when this number is reached.

max

number

{optional} The maximum number of tabs the user is allowed to create. The add icons will hide when this number is reached.

model

array

the data key the tab row data resides in. model must be initialized as an array. []

schema

object

the schema object follows the same construct as schema of its parent. It only needs to contain a fields array.

slots

array

Array of slot objects. Slot names: tabLabel `row._idex` contains the current rows index

tabLabelModel

string

Point this to the data model.field. It will be used to display on the tab.

Usage

{
                "label": "Enter Some Contacts (min. 1 max 4)",
                "max": 4,
                "min": 1,
                "model": "contacts",
                "slots": [{
                    "html": "This is row:{{row._index +1}}, with the full name: {{model.nameFirst}} {{model.nameLast}}`",
                    "slot": "tabLabel"
                }],
                "schema": {
                    "fields": [{
                        "inputType": "text",
                        "label": "First Name",
                        "model": "nameFirst",
                        "styleClasses": "",
                        "type": "input"
                    },{
                        "inputType": "text",
                        "label": "Last Name",
                        "model": "nameLast",
                        "styleClasses": "",
                        "type": "input"
                    }]
                },
                "styleClasses": "col-md-6",
                "type": "accordion2"
            }

Notes

Set the min and max values to the same number to permanently hide the add and delete icons. Data within your data models array will still render rows accordingly.

Last updated