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?

7 Replies
Advisor | Gold Partner
Advisor | Gold Partner

@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!

HubSpot Product Team
HubSpot Product Team
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 }}
</div>

2. Custom module 

<div 
{% 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 }}
        </div>
        {% 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 %}
    </span>
</div>

3. Javascript

<script src="https://cdn2.hubspot.net/hubfs/2702450/Omniflow/assets/js/masonry.pkgd.min.js"></script>
<script>
$(".grid-item").unwrap().unwrap().unwrap(); $(document).ready(function(){ $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); setItemHeight(); }); </script>

4. Result

 

Module StructureModule Structure

ResultResult

 

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

Hi!

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.

 

Without individual LabelsWithout individual LabelsWith individual labelsWith individual labels  

Best,

 

Arno

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