Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Dynamicallly add attribute to top level element of component

Avatar

Avatar
Boost 1
Level 1
akatsuki07
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Validate 1
View profile

Avatar
Boost 1
Level 1
akatsuki07
Level 1

Like

1 like

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Validate 1
View profile
akatsuki07
Level 1

30-04-2021

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.

View Entire Topic

Avatar

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

551 likes

Total Posts

663 posts

Correct Reply

191 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

551 likes

Total Posts

663 posts

Correct Reply

191 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile
asutosh_jena
Level 10

30-04-2021

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!