Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Unable to add components above custom editbar's

Avatar

Level 2

Hi all,

I have created a sightly column-control by extending the OOTB column control component which uses editbar for start and end of component.

but now i am not able to drag and drop any other component above this column control component.

I used OOTB column control component which also uses editbar and tried to place a component above it and i am able to do that.

can any one help on this please?

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hey Guys, got the solution finally :).

i found out that it was because i didn't include "insert" action in editbar, so because of that i was not able to place any other component above or below it.

@steve cave thanks for helping sir :).

View solution in original post

6 Replies

Avatar

Level 4

In your modification, did you remove code that lets components to be dropped? 

Avatar

Level 2

yes kind of... i needed to build column control using sightly... so i used OOTB column control written in JSP, since there is no column control OOTB component in sightly... and replaced JSP code with HTML code.

Avatar

Level 2

column-control code:

<div class="row">
    <sly data-sly-test="${properties.columnlayout == 'twoColumns(50%-50%)' || properties.columnlayout == null}">
        <div class="col-md-6 col-xs-12"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-md-6 col-xs-12"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
    </sly>
    <sly data-sly-test="${properties.columnlayout == 'twoColumns(70%-30%)'}">
        <div class="col-xs-8" ><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-xs-4"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
    </sly>
    <sly data-sly-test="${properties.columnlayout == 'twoColumns(30%-70%)'}">
        <div class="col-xs-4"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-xs-8"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
    </sly>
    <sly data-sly-test="${properties.columnlayout == 'threeColumns'}">
        <div class="col-md-4 col-xs-12"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-md-4 col-xs-12"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-md-4 col-xs-12"><sly data-sly-resource="${'column-3' @ resourceType='wcm/foundation/components/parsys'}"/></div>
    </sly>
    <sly data-sly-test="${properties.columnlayout == 'fourColumns'}">
        <div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-3' @ resourceType='wcm/foundation/components/parsys'}"/></div>
        <div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-4' @ resourceType='wcm/foundation/components/parsys'}"/></div>
    </sly>
</div> 

<div data-sly-resource="${'colctrl-end' @ resourceType='fridays-www/components/content/columncontrol/endbar'}"></div> 

 

- In above code, column layout options are populated through a JSON file

Avatar

Correct answer by
Level 2

Hey Guys, got the solution finally :).

i found out that it was because i didn't include "insert" action in editbar, so because of that i was not able to place any other component above or below it.

@steve cave thanks for helping sir :).

Avatar

Administrator

Thanks for sharing the Solution.

~kautuk



Kautuk Sahni