Level 2

Solved

Dynamicallly add attribute to top level element of component

Forum|Forum|4 years ago
April 30, 2021
3 replies
2380 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Asutosh_Jena_

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!

Asutosh_Jena_

Accepted solution

Community Advisor

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!

A

akatsuki07Author

Level 2

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?

BrianKasingli

Community Advisor and Adobe Champion

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

BrianKasingli

Community Advisor and Adobe Champion

Or you ca stick to the AEM grid.

A

akatsuki07Author

Level 2

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.html?lang=en#recommendations

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded