Static templates

To implement the "static template" type.

Create your own backend widget.

Reference : https://voidagency.gitbook.io/factory/developpeur-frontend/dynamic-field

Here's an example

./modules/custom/doc_v4_df_examples/news/widgets/content-text-image-right/settings.yml

name: 'Content Text & Image Right'
multiple: FALSE
category: 'Doc V4'
enabled: TRUE
fields:
 title:
   type: text
   label: 'Titre'
 description:
   type: text_format
   label: 'Description'
   options:
     '#format': 'full_html'
 image:
   type: image
   label: 'Image'
   options:
     '#required': TRUE

Congratulations! You have managed to create your first template.

Now let's start by creating a page (vactory_page) with this template.

Try now to access the page you have created.

http://localhost:3000/fr/created_page

Huh!? What's this?

No worries, it's completely normal. This warning indicates that we have successfully injected the template into the page, but Next.js is having trouble figuring out what to display!

To resolve this warning, you need to create a mapping file on the Next.js side, which will allow us to receive data from Drupal and display it as desired.

And here we go with JS!

Let's start by creating a new mapping file (a simple React component) in the components/widgets directory.

It is necessary to suffix the mapping files with the word "Widget".

A full mapping file would look like this:

./components/widgets/examples/SimpleContentWidget.jsx

export const config = {
    id: "doc_v4_df_examples:content-text-image-right",
}

const SimpleContentWidget = ({data}) => {
    console.log({data})
    return <>My super mapping widget</>
}

export default SimpleContentWidget

Well, we have created a simple React component, and for now, there is nothing special about it. However, we notice the existence of a constant called config. Now, the question to ask is :

what is the purpose of this constant and what value should it have?

The config constant is used to map between the widget created on the backend and the component created on the frontend.

Note that the config contains an id key, which should have the value of the template's ID (created on the backend) mentioned in the previous warning. Now, try refreshing the page.

Still nothing is happening. That's because it's necessary to restart the application (Next.js).