Community Advisor and Adobe Champion

Solved

Universal Editor - Model Definitions & Component Types

Forum|Forum|1 year ago
October 6, 2024
2 replies
1342 views

Hello,

I am doing a POC with Next.js and Universal Editor and I see Adobe has recently publish documentation on Model Definitions & Component Types: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/universal-editor/field-types.

As I am not 100% sure where to place those definitions in my code, I was wordering if there is as example project on GitHub? Maybe a version of the WKND tutorial with Universal Editor?

Thanks,

Daniel

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by arunpatidar

Hi Daniel,

In EDS, the parsys has been replaced by the Section component (core/franklin/components/section/v1/section), but nesting sections within one another isn't supported. The default page structure includes a main section where you can add either blocks or new sections, depending on the layout you want to achieve.

By default page component includes just a root container.

/libs/core/franklin/components/page/v1/page

h_kataria

Community Advisor

These might help
https://github.com/adobe/universal-editor-sample-editable-app/tree/main
https://github.com/adobe/universal-editor-sample-editable-app-vue/tree/main

arunpatidar

Community Advisor

Hi @daniel-strmecki
Please check https://github.com/adobe-rnd/wknd-xwalk/tree/main

Arun Patidar

daniel-strmecki

Author

Community Advisor and Adobe Champion

Thank you both, I was able to figure out from the examples you shared that this JSON configuration can be loaded in a script of a specific type. For example in Next it would be:

         <Script 
            id="aio-group-definitions" 
            type="application/vnd.adobe.aue.model+json"
            strategy="lazyOnload">
            {`
              [
                {
                  "id": "hero",
                  "fields": [
                    {
                      "component": "text-input",
                      "name": "title",
                      "label": "Title",
                      "valueType": "string"
                    },
                    {
                      "component": "text-area",
                      "name": "text",
                      "label": "Text",
                      "valueType": "string"
                    },
                    {
                      "component": "text-input",
                      "name": "linkText",
                      "label": "Link text",
                      "valueType": "string"
                    },
                    {
                      "component": "text-input",
                      "name": "fileReference",
                      "label": "Image",
                      "valueType": "string"
                    }
                  ]
                }
              ]
            `}
          </Script>

I do have one follow-up question, is there a way to define where to place a container/parsys in the Universal editor?

All the best,

Daniel

arunpatidar

Accepted solution

Community Advisor

Hi Daniel,

In EDS, the parsys has been replaced by the Section component (core/franklin/components/section/v1/section), but nesting sections within one another isn't supported. The default page structure includes a main section where you can add either blocks or new sections, depending on the layout you want to achieve.

By default page component includes just a root container.

/libs/core/franklin/components/page/v1/page

Arun Patidar

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded