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
Validate 1
Level 1
akatsuki07
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
akatsuki07
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Affirm 100
Level 10
asutosh_jena
Level 10

Likes

373 likes

Total Posts

480 posts

Correct Reply

133 solutions
Top badges earned
Affirm 100
Ignite 1
Establish
Give Back 50
Give Back 5
View profile

Avatar
Affirm 100
Level 10
asutosh_jena
Level 10

Likes

373 likes

Total Posts

480 posts

Correct Reply

133 solutions
Top badges earned
Affirm 100
Ignite 1
Establish
Give Back 50
Give Back 5
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!

Answers (2)

Answers (2)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

582 likes

Total Posts

564 posts

Correct Reply

218 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

582 likes

Total Posts

564 posts

Correct Reply

218 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

03-05-2021

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

Avatar

Avatar
Validate 1
Level 1
akatsuki07
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
akatsuki07
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

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

06-05-2021

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...