Restrict supported modules available to Flexible Column

Is there a parameter that will whitelist or blacklist certain modules for the Flexible Column? Setting which modules can be used in a column would be excellent.


Flexible Columns could be a very useful if that were the case, but having to sort through every available primitive, global module, and custom module every time is not ideal. Am I missing something?

HubSpot updates
Restrict supported modules available to Flexible ColumnHubSpot Product Team
changed to: In Planning
Jun 22, 2017

Restrict supported modules available to Flexible ColumnCommunity Manager
changed to: New
Apr 3, 2017

7 Replies

@CH_Engineer I agreed, this would be a nice feature to have. Maybe this should be moved to the Ideas board.

Regular Advisor

@CH_Engineer, I like that idea as well. Sometimes, you want to give your team more control over the layout, but seeing and potentially adding a custom module designed for another template can have a negative impact on the design. Being able to apply restrictions for a flex column would be great!

Community Manager
Community Manager
updated to: Idea Submitted
Top Contributor

There is definitely a need for restrictions in flexible columns. Especially if you use the flexible column as a wrapper for masonry items, accordion items or panel items, it is a must to restrict the usage of modules to the particular custom modules. Otherwise content editors will mess it up faster then you would expect it. Here is an example:


1. Flexible column  (Custom Wrapping HTML)

<div class="grid">
    <div class="grid-sizer"></div>
    {{ html }}

2. Custom module 

{% if widget.background_type == 'image' %}
class="grid-item grid-item-image {{ widget.item_height }}" 
style="background: url('{{ widget.background_image.src }}') no-repeat center center;" 
title="{{ widget.background_image.alt }}"
{% endif %}
{% if widget.background_type == 'color' %}
class="grid-item grid-item-color {{ widget.item_height }}" 
style="background: {{ widget.background_color }};"
{% endif %}
    <span class="grid-item-content {{ widget.content_horizontal_alignment }} {{ widget.content_vertical_alignment }}">
        {% if widget.icon_show and widget.icon_position == 'before' %}<i class="{{ widget.icon_library }} {{ widget.icon }}" style="font-size: {{ widget.icon_size }}; color: {{ widget.content_color }};"></i>{% endif %}
        <div style="color: {{ widget.content_color }};">
            {{ widget.content }}
        {% if widget.icon_show and widget.icon_position == 'after' %}<i class="{{ widget.icon_library }} {{ widget.icon }}" style="font-size: {{ widget.icon_size }}; color: {{ widget.content_color }};"></i>{% endif %}

3. Javascript

<script src=""></script>
$(".grid-item").unwrap().unwrap().unwrap(); $(document).ready(function(){ $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); setItemHeight(); }); </script>

4. Result


Bildschirmfoto 2017-04-07 um 13.18.02.pngModule Structure

Bildschirmfoto 2017-04-07 um 13.18.57.pngResult


HubSpot Product Team
HubSpot Product Team
updated to: In Planning
Top Contributor


That's pretty cool. When you touch this, please add the possibility to label instances of custom modules individually.

Otherwise it's really hard to keep it manageable.


Without individual labels organizing, editing and sorting custom modules becomes a nightmare as soon as you have more than three custom modules in a flexible column or group.


Bildschirmfoto 2017-06-22 um 22.45.55.pngWithout individual LabelsCustom-Model-Labeling.pngWith individual labels  




derekcavaliero Esteemed Contributor | Diamond Partner
Esteemed Contributor | Diamond Partner

@kleonard any update on when we might be able to expect something like this?


As everyone else has mentioned, this is very important for COS/CMS design integrity Smiley Very Happy