Creating multi filed block model definitions in EDS Universal editor

[sofiyans8042875]

Hi All,

Can someone please guide on how to create multifiled button in block model.

I want to create tease block with multifield button. Need two property for button link and button title same way how we can do in AEM component. 

I didn’t find any documentation to achieve this. 

Regards

Sofiyan

[ShaileshBassi]

Hi @sofiyans8042875 

You can create a block (Buttons) and blockItem (Button)

{
    "definitions": [
        {
            "title": "Buttons",
            "id": "buttons",
            "plugins": {
                "xwalk": {
                    "page": {
                        "resourceType": "core/franklin/components/block/v1/block",
                        "template": {
                            "name": "Buttons",
                            "filter": "buttons"
                        }
                    }
                }
            }
        },
        {
            "title": "Button",
            "id": "button",
            "plugins": {
                "xwalk": {
                    "page": {
                        "resourceType": "core/franklin/components/block/v1/block/item",
                        "template": {
                            "name": "Button",
                            "model": "button"
                        }
                    }
                }
            }
        }
    ],
    "models": [
        {
            "id": "button",
            "fields": [
                {
                    "component": "richtext",
                    "name": "text",
                    "value": "",
                    "label": "Text",
                    "valueType": "string"
                }
            ]
        }
    ],
    "filters": [
        {
            "id": "buttons",
            "components": [
                "button"
            ]
        }
    ]
}

Then post this you can write the logic in your class i.e. buttons.js to fetch all the child elements of the blockItem i.e. button and render it as per the desired HTML.

Hope this helps!

Thanks

[HemanthSreenu]

Hi @sofiyans8042875 , Although I'm still working on the JS, I was able to get the dialog structure. Adding the reference link as well. Good luck!

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

{
"component": "container",
"name": "test",
"label": "Multi Text",
"multi": true,
"fields": [
{
"component": "reference",
"name": "image",
"value": "",
"label": "Sample Image",
"valueType": "string"
},
{
"component": "text",
"name": "alt",
"value": "",
"label": "Alt Text",
"valueType": "string"
}
]
}

[caiohaag]

@ShaileshBassi and how can I make a button pre-added to the block, with Lorem content?