Add dnd_area to module

Developer Support CMS Development
1

Is it possible to add a dnd_area to a module? We are trying to implement a module which is more like a section with a different background color:

36218i383C69D17B964751.png
36218i383C69D17B964751.png400×224 32.2 KB

So we would like to have one module which is the orange box, and then the possibility to add an instance of rich text and accordion inside of it. Is that possible?

When I try the obvious, add dnd_area to module.html, I get “‘dnd_area’ is disabled in this context”

2

@RRimestad9 dnd tags are only available in templates, not modules. Modules are the inner-most elements of a dnd template so it woudn’t make sense for it to be able to have a whole nother dnd_area in it.

{% dnd_area %}
 {% dnd_section %}
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_module %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_dnd_section %}
{% end_dnd_area %}

Any reason you can’t create the module without the background and then in a drag and drop template the background can be set on the section that the module is added to? And if you’re wanting the rich text and accordion to be optional you can always use if statements in the module to do that. Like if your rich text field’s name is rich_text just add the following around the content for the rich text to only show if the field is filled out.

{% if module.rich_text %}
<div>{{ module.rich_text }}</div>
{% endif %}

Could even use boolean fields and if statements to change the order of the contents.

3

Hi, and thanks for replying!

That’s a disappointment. Adding that section to the page template is definitely one way of solving it, but it gives us way less flexibility if we for example want to have more than one section of this kind on a page. There should not really be any reason why one module cannot be the container of other modules. That is something I actually assumed would be present in a professional tool like HubSpot CMS.

But that is not your fault! Thanks a lot for replying. We will look into your solutions.

4

OK. So I am trying to make a new module with booleans for various other modules that this module can contain. Do you, by chance, know of any way I can import fields.json from the other modules into the fields.json file of my section module so I do not have to duplicate them?

5

@RRimestad9 If you’re using CMS CLI for local development you can use hs fetch to get your module files and then just copy paste one module’s fields.json data into another module’s.

I don’t see why this would decrease flexibility? You can use a module more than once in a template, with different settings set, and also have multiple sections. And if you already have modules for the pieces you want you can just pull those into section columns.

{% dnd_area %}
 {% dnd_section background_color="#FFFFFF" %}
 {% dnd_column width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-module" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}

 {% dnd_column offset=6, width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-other-module" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_dnd_section %}

 {% dnd_section background_color="#EEEEEE" %}
 {% dnd_column width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-module", your_field_name="some other setting/text" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}

 {% dnd_column offset=6, width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-other-module", your_field_name="some other setting/text" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_dnd_section %}
{% end_dnd_area %}
6

Yeah, but I would like to keep my code DRY :slightly_smiling_face: We wrote a custom compiler which makes it possible to use {% include %} inside fields.json, so that problem has been solved.

A colleague just discovered that you can style sections! So as long as that is possible, your approach works perfectly. Thanks a lot for your time :+1::+1::+1: