Universal Editor - Model Definitions & Component Types

[daniel-strmecki]

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/dev....

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

[h_kataria]

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]

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

[daniel-strmecki]

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]

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

[daniel-strmecki]

Thanks @arunpatidar, I really wish this was mentioned in the Universal Editor docs, but instead it looks like I need to re-engineer stuff from the EDS examples. Hopefully this gets updated soon.

All the best,

Daniel