# Update a nested/grouped field on a HubSpot custom module (HubL module or dnd_module)

Technical Difficulty: Advanced

Written by  [Stephanie O'Gay Garcia](/content/hubspot-website-development/author/stephanie-ogay-garcia/index.html)

First Published:  April 18, 2020

Last Updated:  July 7, 2020

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! _(Last updated: July 7, 2020)_

On HubSpot's new local development tools for the CMS Hub, you have the option to create a custom module with [grouped fields](https://designers.hubspot.com/docs/building-blocks/module-theme-fields#field-groups).

## Simple fields within the group

By simple fields I'm referring to fields with a single value, like a text or number field.

For example, in this "Hero Banner" custom module I've built, I have an "Advanced Options" section in which users can update the background image's horizontal and vertical positions. It looks like this in the UI:

I can use this module as a [drag-and-drop module (dnd_module)](https://designers.hubspot.com/docs/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-) in a [drag-and-drop section (dnd_section)](https://designers.hubspot.com/docs/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-).

I'll use the group name in the attribute field ("advanced_option") and for its value I'll use JSON to access each field, like this:

{% raw %}`{% module
path="../modules/Hero Banner.module",
advanced_options = {
    'imgx' : 'center',
    'imgy' : 'center'
}
%}
{% end_module %}`

## More complex fields within the group (e.g. colour picker)

If you have a more complex field with nested values like color picker field in your custom module and want to select that from within a HubL `{% module %}` or `{% dnd_module %}` it's best to use a module block tag.

For example, in this Social Icons custom module I have a Group called "styling" with two Color fields to set an icon's colour and hover colour. It looks like this in the UI:

To update those values on my dnd_module, I'll use the [block syntax](https://developers.hubspot.com/docs/cms/building-blocks/modules/using-modules-in-templates#block-syntax). and can update my grouped colour values as follows:

`{% module_block module "social_icons" path="../../modules/social-links.module" %}
{% module_attribute 'styling' is_json=true %}
    {
      "icon_colour": {
        "color": "#FFFFFF",
        "opacity": 100
      },
      "icon_hover_colour": {
        "color": "#FFFFFF",
        "opacity": 70
      }
    }
{% end_module_attribute %}
{% end_module_block %}`

So now my template has some default options for nested fields!