I recently tried to create my first component for our employee overview.
For this, I list all departments as well as all employees in them.
At the end of each department, it should be possible to use other components.
Therefore, I looked into Parsys and tried to implement the whole thing using the following code:
<div class="department-container" style="background-color:${model.componentColor @ context='styleToken'};">
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
<sly data-sly-list.department="${model.departments}">
<h1 class="department-name">${department.name}</h1>
<sly data-sly-list.employee="${model.fetchEmployeeInfo}">
<div class="employee-card" data-sly-test="${employee.department == department.name}" style="background-color:${department.color @ context='styleToken'};">
<div class="img-container">
<div class="blue-badget" data-sly-test="${employee.badgeteins}">
<div>
<h6 class="img-text">${employee.badgeteins}</h6>
</div>
</div>
<div class="entry-badget" data-sly-test="${employee.entry}">
<div>
<h6 class="img-text">${employee.entry}</h6>
</div>
</div>
<img src="${employee.image}" alt="${employee.name}">
</div>
<h3>${employee.name}</h3>
</div>
</sly>
<sly data-sly-resource="${ department.name @ resourceType='wcm/foundation/components/parsys'}" style="margin: 10px;"></sly>
</sly>
</div>
My component itself is provided with the property isContainer,
and all Parsys Components got dynamically assigned names based on the Sly List
The whole thing works so far, however, only the last Parsys Component can be added. All others are not selectable
Also the main body of my Component is included in a container as Parsys
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hi,
I think that is caused because the parsys(and btw, you should use a container instead) are being included without a wrapper, try to use this:
<div data-sly-resource="${ department.name @ resourceType='wcm/foundation/components/parsys'}" style="margin: 10px;"></div>
Hope this helps
Hi,
I think that is caused because the parsys(and btw, you should use a container instead) are being included without a wrapper, try to use this:
<div data-sly-resource="${ department.name @ resourceType='wcm/foundation/components/parsys'}" style="margin: 10px;"></div>
Hope this helps
Hey, thanks. I tried it and it works!
However, an empty div is now always displayed. is there any way I can prevent this?
How would i implement this functionality using a container. Responsivegrid?
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies