JSON Field Utils

The JFU module allows us to use a JSON field type to create reusable “components” which can be used for different contents. It has components for banners, quotes, images with text, accordions, tabs and so on.

In the following versions of the module are going to add the possibility to create custom components, and an editor for fields to build components without writing code.

This module is really useful to create pages that show a merge of grouped information in different ways like a frontpage or a landing page of a section in a website.

A “component” is composed of 3 parts:

• A JSON structure that represents the information.
• A widget to fill in the information
• An appearance for the end user.

The goals that we had when we created this module

• Create complex pages in a simple way, reusing “components”
• To have a friendly UI
• Mix different components in only one content
• All the components can be sortable into the page
• Reuse components between projects
• Simple way to customize the appearance (theming) as the markup and the styles

HOW TO USE?

Install the module via composer and add it to your drupal project.

Add a field of the type JSON (stored as raw JSON in database) to the content type you want to use JSON field utils in, in field settings choose "Unlimited".

Then in form display search for the recently created field and change its widget to "Component", (there are more configuration options for the components but these are optional and will be detailed further in the documentation ).

And finally in display, change the format to "components".

Then go to your content type and create or edit a node, you will see a light blue button "Add component" that will let you start adding components.

While editing you can easily arrange the order of the components by dragging them, you can also collapse/display the components for ease of use.

**Important**

In the current state, after JSON field Utils has been updated to a new version, usually we can't see the new components or others improvements. There is a way to force Drupal to refresh the changes, but we loose the Json field configurations. Be carefull with this. In the content types that use JFU it's necesary to go to manage form dispĺay, find the field/s that use the widget Component change it for Plain textarea, save then finally change the widget to Component save and that is all.

Dependencies

• json_field
• twig_tweak
• rest

Similar modules
Paragraphs
Stacks
Gutenberg