Restrict supported modules available to Flexible Column

Is there a parameter that will allowlist or blocklist 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?

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

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

Empty

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 Structure

Result

Empty

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 LabelsWith individual labels

Best,

Arno

@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 :grinning_face_with_smiling_eyes:

Hello! My name is Hallie, and I’m a Program Manager on the CXM Team. This isn’t currently on the roadmap, so I am marking this as ‘Not Currently Planned’ for the time being. If anything changes with this feature request, I’ll update this post with relevant information right away. Thank you for your understanding and continued feedback for our product teams in the meantime!