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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Is there a possibility to persist markup through data-sly-template & data-sly-call?

skbhardwaj
Level 1
Level 1

Hello everyone,

In one of my tab implementation i am using data-sly-template to generate a consistent markup.

So, I want data-sly-template to persist the markup inside the data-sly-call, after the template is processed.

The representational code is given below:

source.html

<sly data-sly-use.tabTpl="templates/tab.html">

    <!--/* SCENARIO 1 */-->

    <sly data-sly-call="${ tabTpl.tabList @ ariaLabel='LIST_ARIA_LABEL' }">

          <!--/* TABLIST_CONTENT */-->

          <sly data-sly-call="${ tabTpl.tabButton @ title='TAB_NAME', isSelected='true', tabId='TAB_ID' }"></sly>

    </sly>

    <!--/* SCENARIO 2 */-->

    <sly data-sly-call="${ tabTpl.tabPanel @ tabId='TAB_ID' }">

          <!--/* TABPANEL_CONTENT */-->

          <div>hello world markup</div>

    </sly>

</sly>

<sly data-sly-use.tabTpl="templates/tab.html">

    <!--/* SCENARIO 1 */-->

    <sly data-sly-call="${ tabTpl.tabList @ ariaLabel='LIST_ARIA_LABEL' }">

          <!--/* TABLIST_CONTENT */-->

          <sly data-sly-call="${ tabTpl.tabButton @ title='TAB_NAME', isSelected='true', tabId='TAB_ID' }"></sly>

    </sly>

    <!--/* SCENARIO 2 */-->

    <sly data-sly-call="${ tabTpl.tabPanel @ tabId='TAB_ID' }">

          <!--/* TABPANEL_CONTENT */-->

          <div>hello world markup</div>

    </sly>

</sly>

templates/tab.html

<!--/*

    Template to create tab button

*/-->

<sly data-sly-template.tabButton="${ @ title, isSelected, tabId }">

    <button class="tab-button" role="tab" aria-selected="${ isSelected == 'true' ? 'true' : false }" aria-controls="${ tabId }-tab" id="${ tabId }" tabindex="0">

        ${ title }

    </button>

</sly>

<!--/*

    Template to create tab button wrapper

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabList="${ @ ariaLabel }">

    <div class="tab-list" role="tablist" aria-label="${ ariaLabel }">

        <!--/* EXPECTED_TABLIST_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */--> 

    </div>

</sly>

<!--/*

    Template to create tab panel

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabPanel="${ @ tabId }">

    <div class="tab-panel" role="tabpanel" id="${ tabId }-tab" aria-labelledby="${ tabId }">

        <!--/* EXPECTED_TABPANEL_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->

    </div>

</sly>

<!--/*

    Template to create tab button

*/-->

<sly data-sly-template.tabButton="${ @ title, isSelected, tabId }">

    <button class="tab-button" role="tab" aria-selected="${ isSelected == 'true' ? 'true' : false }" aria-controls="${ tabId }-tab" id="${ tabId }" tabindex="0">

        ${ title }

    </button>

</sly>

<!--/*

    Template to create tab button wrapper

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabList="${ @ ariaLabel }">

    <div class="tab-list" role="tablist" aria-label="${ ariaLabel }">

        <!--/* EXPECTED_TABLIST_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->

    </div>

</sly>

<!--/*

    Template to create tab panel

    NOTE: This is unsupported at the moment

*/-->

<sly data-sly-template.tabPanel="${ @ tabId }">

    <div class="tab-panel" role="tabpanel" id="${ tabId }-tab" aria-labelledby="${ tabId }">

        <!--/* EXPECTED_TABPANEL_CONTENT_FROM_SOURCE */-->

        ${ callee.children } <!--/* <- Is this possible, thinking of something like this, which pastes the content from source */-->

    </div>

</sly>

Is there any way to achieve the CONTENT inside template (tabList/tabPanel) ?

Really appreciate any kind of possible solutions to this.

Thanks & Regards,

Shri.

0 Replies