Dynamicallly add attribute to top level element of co...

[akatsuki07]

Use Case:

I'm trying to implement bootstrap like row's and columns where the rows component can have column components as childs. The column component dialog should be able to have dynamic width sizes set by the author (25%, 33%, 50%).

Problem:

In order for me to dynamically set the column width's I would have to add it to the top level element (div class='column') but I'm not sure how to do this.

HTML for my ROW component:

<div class="row">
    <sly data-sly-resource="${'row-parsys' @ resourceType='wcm/foundation/components/parsys'}"></sly>
</div>

HTML for my COLUMN component:

<sly data-sly-resource="${'col-parsys' @ resourceType='wcm/foundation/components/parsys'}">
</sly>

Code generated in the DOM when I add column within row component parsys:

<div class="row">
   <div class="column"></div>
   <div class="column"></div>
</div>

 
How can I dynamically pass in column widths to the column component div so it looks like this:

<div class='row'>
    <div style='width: 25%;' class='column'></div>
    <div style='width: 50%;' class='column'></div>
</div>

The only other solution I can think of is have multiple column components with set sizes. I would like to do this with one component which can be authored to different sizes.

[Asutosh_Jena_ · Accepted solution]

Hi @akatsuki07 

You can create a select dropdown in dialog with different column value (starting from 1 up to 12) for mobile, tablet and desktop (if required). Else it can be done only for desktop.

Now you can write a sling model which will read the dialog value and send it as a list to HTL. In HTL you can iterate over the list and add the required number of columns inside row which will be driven dynamically based on the dialog selection.

<div class="row">
    <sly data-sly-list="${object.columnControl}">
        <sly data-sly-test.control="control${itemList.index}"></sly>
        <div class="col-xs-${item.mobile} col-sm-${item.tablet} col-md-${item.desktop}">
            <div data-sly-resource="${@path=control, resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap="${wcmmode.disabled}"></div>
        </div>
    </sly>
</div>

Hope it helps

Thanks!

[akatsuki07]

Thanks for your reply. This can be done but I would like to add customizable options to the child component (column) as well. Is the mentioned method in my question not possible?

[Asutosh_Jena_]

Hi @akatsuki07 

With the above approach that I have mentioned, you will be able to achieve "The column component dialog should be able to have dynamic width sizes set by the author (25%, 33%, 50%)" use case. It's all will be for dynamic column only.

Thanks!

[akatsuki07]

@Asutosh_Jena_  Hey while this does work with preset values it doesn't answer my question of setting class names to the component wrapper element.

Please check my post for the correct solution. Please mark that as the correct answer. Thank You.

[BrianKasingli]

@akatsuki07,

I recommend you provide the author with preset values in the touch UI dialogue options. Since you are using bootstrap, these options will be column numbers, from 1-12 example:

 + 4, 4, 4

 + 2, 8, 2

 + 3, 4, 5

Then as you are writing sightly, you can simply do something like:

<div class="col-${author.col1}"></div>
<div class="col-${author.col2}"></div>
<div class="col-${author.col3}"></div>

 I hope this helps!

[akatsuki07]

@BrianKasingli That is my solution for now however what if authors want to have padding, alignment, etc. Too many combinations to have presets. A dynamic approach would be much better.

I did find this class which does the wrapper element around the components IncludeOptions 

[BrianKasingli]

Or you ca stick to the AEM grid.

[akatsuki07]

This can be done by adding the cq:HtmlTag node under the component and setting a property name of "class" as String with your custom class name.
More information can be found here https://experienceleague.adobe.com/docs/experience-manager-64/developing/components/decoration-tag.h...