# dnd\_module

**URL:** <https://community.hubspot.com/t/dnd-module/53564>\
**Category:** CMS Development\
**Tags:** local-development, starter\
**Created:** [March 22, 2022, 1:10am UTC](https://community.hubspot.com/t/dnd-module/53564 "2022-03-22T01:10:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![iBarros](https://avatars.discourse-cdn.com/v4/letter/i/73ab20/32.png) [@iBarros](https://community.hubspot.com/u/iBarros)\
**Post date:** [March 22, 2022, 1:10am UTC](https://community.hubspot.com/t/dnd-module/53564/1 "2022-03-22T01:10:32Z")

</div>

I need help, I can’t overwrite the default values, I don’t know what I’m doing wrong  
Follow the code below

calling module in template

```lia-code-sample
{% dnd_module 'buttons-stores', path="./../modules/buttons-stores" %}
 {% module_attribute "spacing" is_json=True %}
 {
 "spacing_bottom": 0,
 "spacing_top": 100
 }
 {% end_module_attribute %}
 {% end_dnd_module %}

```

module fields.json file

```lia-code-sample
[
 {
 "label": "Buttons-stores",
 "name": "buttons_stores",
 "required": false,
 "locked": false,
 "occurrence": {
 "default": 2,
 "min": 1
 },
 "children": [
 {
 "id": "item_menu.name",
 "type": "text",
 "label": "Name Item",
 "name": "name_item",
 "validation_regex": "",
 "allow_new_line": false,
 "show_emoji_picker": false,
 "type": "text",
 "default": "App store"
 },
 {
 "id": "item_menu.path_local_item",
 "type": "text",
 "label": "Path local",
 "name": "path_local_item",
 "type": "text",
 "default": "./../../images/icons/app_store.svg"
 },
 {
 "id": "item_menu.url",
 "type": "text",
 "label": "URL Item",
 "name": "url_item",
 "validation_regex": "",
 "allow_new_line": false,
 "show_emoji_picker": false,
 "type": "text",
 "default": "#"
 },
 {
 "id": "item_menu.src",
 "type": "image",
 "required": false,
 "locked": false,
 "responsive": true,
 "resizable": true,
 "show_loading": false,
 "label": "src Item",
 "name": "src_item",
 "default": {
 "size_type": "exact",
 "src": "",
 "alt": "image-alt-text",
 "loading": "lazy",
 "width": 128,
 "height": 128,
 "max_width": 128,
 "max_height": 128
 }
 },
 {
 "id": "item_menu.target",
 "type": "boolean",
 "display": "checkbox",
 "label": "Target Blank",
 "name": "target_blank_item",
 "allow_new_line": false,
 "show_emoji_picker": false,
 "default": true
 }
 ],
 "type": "group",
 "default": [
 {
 "name_item": "App store",
 "src_item": "",
 "url_item": "https://www.apple.com/br/app-store/",
 "target_blank_item": true,
 "path_local_item": "./../../images/icons/app_store.svg"
 },
 {
 "name_item": "Google Play",
 "src_item": "",
 "url_item": "https://play.google.com/",
 "target_blank_item": true,
 "path_local_item": "./../../images/icons/google_play.svg"
 }
 ]
 },
 {
 "label": "Spacing",
 "name": "spacing",
 "required": false,
 "locked": false,
 "type": "group",
 "children": [
 {
 "label": "Spacing Bottom",
 "name": "spacing_bottom",
 "type": "number"
 },
 {
 "label": "Spacing Top",
 "name": "spacing_top",
 "type": "number"
 }
 ],
 "default": {
 "spacing_bottom": 0,
 "spacing_top": 0
 }
 }
]

```

In the panel I can change the spacing\_bottom and spacing\_top but in the module\_attribute I can’t

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [March 22, 2022, 8:07am UTC](https://community.hubspot.com/t/dnd-module/53564/2 "2022-03-22T08:07:13Z")

</div>

Hey iBarros

Use these codes i hope one of them will work

{% dnd\_module ‘buttons-stores’, path=“./../modules/buttons-stores” %}

{% module\_attribute “spacing” is\_json=True ‘spacing\_bottom’: ‘0’, ‘spacing\_top’: ‘100’ %}

{% end\_module\_attribute %}

{% end\_dnd\_module %}

OR

{% dnd\_module ‘buttons-stores’, path=“./../modules/buttons-stores” , ‘spacing\_bottom’: ‘0’, ‘spacing\_top’: ‘100’ %}

{% end\_dnd\_module %}  
Hope this helps! If we were able to answer your query, kindly help the community by marking it as a solution. Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![iBarros](https://avatars.discourse-cdn.com/v4/letter/i/73ab20/32.png) [@iBarros](https://community.hubspot.com/u/iBarros)\
**Post date:** [March 22, 2022, 12:12pm UTC](https://community.hubspot.com/t/dnd-module/53564/3 "2022-03-22T12:12:48Z")

</div>

Thanks for trying to help me but it didn’t work.

 ![iBarros_0-1647951056045.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/0/d0bdb44c8ddf2b3cc4463bc535daf052e7ebe558.png)

I tried both ways

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 22, 2022, 1:02pm UTC](https://community.hubspot.com/t/dnd-module/53564/4 "2022-03-22T13:02:35Z")

</div>

Hi @iBarros,

how does your module HTML looks like?

edit:

I’ve recreated a simple module with just two number fields for padding and tested it.

Here’s my working setup:

```lia-code-sample
{% require_css %}
<style>
.{{name}}{
padding-top:{{ module.spacings.top }}px;
padding-bottom:{{ module.spacings.bottom }}px
}
</style>
{% end_require_css %}

<div class="{{name}}">
Some content
</div>

```

the JSON

```lia-code-sample
[
 {
 "type": "group",
 "id": "d67118f8-c8b0-1b3c-3620-5b25c1e92517",
 "label": "Spacings",
 "children": [
 {
 "type": "number",
 "id": "185eb0fc-a846-fc23-d6c0-f1a5991d98ad",
 "display": "text",
 "step": 1,
 "label": "top",
 "name": "top",
 "min": 1,
 "max": 100,
 "default": 1
 },
 {
 "type": "number",
 "display": "text",
 "step": 1,
 "label": "bottom",
 "name": "bottom",
 "oldId": "185eb0fc-a846-fc23-d6c0-f1a5991d98ad",
 "id": "152d3625-926b-dc6f-b9b5-0f88fdfb5c90",
 "min": 1,
 "max": 100,
 "default": 1
 }
 ],
 "name": "spacings",
 "default": {
 "top": 1,
 "bottom": 1
 }
 }
]

```

module in template:

```lia-code-sample
{% dnd_module path="./../modules/test"%}
{% module_attribute 'spacings' is_json=True %}
{
"bottom":100,
"top":100
}
{% end_module_attribute %}
{% end_dnd_module %}

```

It will work as soon as you define a default value in the fields.

hope this helps.

best,

Anton

---

<div class="post-metadata">

**Author:** ![iBarros](https://avatars.discourse-cdn.com/v4/letter/i/73ab20/32.png) [@iBarros](https://community.hubspot.com/u/iBarros)\
**Post date:** [March 23, 2022, 11:29am UTC](https://community.hubspot.com/t/dnd-module/53564/5 "2022-03-23T11:29:09Z")

</div>

Hello @Anton I tried to assign your solution to my context

didn’t work, did you insert dnd\_module inside dnd\_column? maybe it’s some bug

I’m trying to think of another way, it’s weird because only within the context of dnd\_area \> dnd\_section \> dnd\_colunm \> dnd\_row

does not work  
code template

```lia-code-sample
<!--
 templateType: page
 label: Landing-page
 isAvailableForNewContent: true
-->
<!doctype html>
<html>
 {% extends "./layouts/base.html" %}
 {% block body %}
 <body>
 {% dnd_area "area_intro", class="intro" %}
 {% dnd_section max_width=1200, vertical_alignment="MIDDLE", margin={ "bottom": "120px" } %}
 {% dnd_column offset=0, width=5 %}
 {% dnd_row %}
 {% dnd_module path="@hubspot/rich_text" %}
 {% module_attribute "html" %}
 <h1 class="head-text my-0">Helping make <span class="primary-medium-color"> net-zero</span> an achievable target.</h1>
 <h4 class="sub-head-text my-1">we are empowering consumers to achieve a more sustainable lifestyle.</h4>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}

 {% dnd_row %}
 {% dnd_module 'buttons-stores', path="./../modules/buttons-stores" %}
 {% module_attribute "spacing" is_json=True %}
 {
 "spacing_bottom": 100,
 "spacing_top": 100
 }
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}

 {% end_dnd_column %}

 {% dnd_column offset=5, width=7 %}
 {% dnd_row %}
 {% dnd_module 'image_intro'
 path='./../modules/image-intro' %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}

 {% end_dnd_area %}

 {% dnd_area "area_features", class="features" %}
 {% dnd_section max_width=1200, vertical_alignment="MIDDLE", margin={ "bottom": "120px" } %}
 {% dnd_column offset=0, width=12 %}
 {% dnd_row %}
 {% dnd_module 'switch-images'
 path='./../modules/switch-images' %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}

 {% end_dnd_area %}
 </body>
 {% endblock %}
</html>

```

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 24, 2022, 7:15am UTC](https://community.hubspot.com/t/dnd-module/53564/6 "2022-03-24T07:15:09Z")

</div>

Hi @iBarros,

very strange. Maybe it’s a bug. Will investigate it later today.

In the meantime: this is the part of template(home.html of the boilerplate) i’ve pasted it in.

```lia-code-sample
 {% dnd_area 'dnd_area'
 label='Main section',
 class='body-container body-container--home'
 %}

 {% dnd_section
 background_color='#f8fafc',
 vertical_alignment='MIDDLE'
 %}
		{% dnd_module path="./../modules/test" width=6%}
		{% module_attribute 'spacings' is_json=True %}
		{
		"bottom":100,
		"top":100
		}
		{% end_module_attribute %}
		{% end_dnd_module %}
 {% dnd_module
 path='@hubspot/rich_text',
 html='<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>'
 offset=6,
 width=6
 %}
 {% end_dnd_module %}
 {% end_dnd_section %}

 {% end_dnd_area %}

```

so it’s area\>section\>module for me

hope this helps

best,

Anton

---

<div class="post-metadata">

**Author:** ![iBarros](https://avatars.discourse-cdn.com/v4/letter/i/73ab20/32.png) [@iBarros](https://community.hubspot.com/u/iBarros)\
**Post date:** [March 24, 2022, 1:28pm UTC](https://community.hubspot.com/t/dnd-module/53564/7 "2022-03-24T13:28:00Z")

</div>

ow man @Anton

I found out what my mistake was

`{% dnd_module 'buttons-stores', path="./../modules/buttons-stores" %}`

Dont work

`{% dnd_module 'buttons-stores', path="./../modules/buttons_stores" %}`

Work

I just changed the “-” to “\_”