Accordion Tab Naming

Support
1

I have been having some trouble naming my accordion tabs based on some the fields that reside in the accordion.

The fields that reside in my accordion are First Name ( model: firstName ) and Last Name ( model: lastName ). If the user entered the following:

First Name: Jerry
Last Name: Bell

I would like the tab name to show Jerry Bell.

I have tried to use the JSON attribute “tabLabelModel” to reference the field models firstName and lastName but it doesn’t seem like it works. I can get text to show up on tab with “tabLabel” but how can I reference a field within the model with this attribute? Or should I be using “tabLabelModel” or another attribute?

Let me know if you need a copy of the JSON Model on my page.

2

This indeed is a bit tricky.

This older component came before BF had _calc 's which would solve it easily.

There is not an easy want to add this calculation, but what you can do is in your asJSON have a fullName field and let FM generate that. It would not show up live as you type, but thats probably fine.

When you save, the FM hook can return the full asJSON.fullName field and you can point the model to that.

If you can wait until the next build we can augment that component to support the calc’s.
c

3

As it turns out, we have already updated this component and renamed to accordion2

The newest version supports slots

There is an example showing how you can calculate (In a slot ) first and last name here:
https://app.fmbetterforms.com/#/forms/formedetail?id=12B84BEE-194C-4360-98B0-D3B0845C69B5

4

In the original accordion component the “add” works well, as soon as I change type to “accordion2”, the add button is no longer functioning. Is this a bug or am I doing something wrong?

{
                    "label": "Enter Some Contacts (min. 2 max 4)",
                    "max": 8,
                    "min": 0,
                    "model": "address",
                    "schema": {
                        "fields": [{
                            "inputType": "text",
                            "label": "First Name",
                            "model": "nameFirst",
                            "styleClasses": "col-md-6",
                            "type": "input"
                        }, {
                            "inputType": "text",
                            "label": "Last Name",
                            "model": "nameLast",
                            "styleClasses": "col-md-6",
                            "type": "input"
                        }, {
                            "inputType": "text",
                            "label": "Street 1",
                            "model": "street1",
                            "styleClasses": "col-md-12",
                            "type": "input"
                        }, {
                            "inputType": "text",
                            "label": "Street 2",
                            "model": "street2",
                            "styleClasses": "col-md-12",
                            "type": "input"
                        }, {
                            "inputType": "text",
                            "label": "City",
                            "model": "city",
                            "styleClasses": "col-md-12",
                            "type": "input"
                        }]
                    },
                    "slots": [{
                        "html": "This is a slot with the full name: {{model.nameFirst}} {{model.nameLast}}",
                        "slot": "tabLabel"
                    }],
                    "styleClasses": "col-md-12",
                    "tabLabelModel": "nameFirst",
                    "type": "accordion2",
                    "visible_calc": "app.tab == '5'"
                }