Expand my Community achievements bar.

Submissions are now open for the 2026 Adobe Experience Maker Awards.
SOLVED

dual resource call from the same component with mobile view and desktop view

Avatar

Level 1

Hey i have a component in which i have created two view mobile view and desktop view, i have used two different resources for the same call. i need to minimize number of call to one. how do i use one resource and pass the values to both of them 

1 Accepted Solution

Avatar

Correct answer by
Level 10

Without seeing the actual code, it's challenging to provide a context-aware response.

However, you can achieve your goal by creating a shared template that both views can use while initializing your resource or Sling Model only once. Here's how to do it:

<!--/* Initialize your resource/model ONCE */-->
<sly data-sly-use.model="com.example.MyComponentModel"/>

<!--/* Define template for both views */-->
<template data-sly-template.mobileView="${@ model}">
    <!--/* Mobile-specific markup using ${model.property} */-->
    <div class="mobile">
        ${model.mobileContent}
    </div>
</template>

<template data-sly-template.desktopView="${@ model}">
    <!--/* Desktop-specific markup using ${model.property} */-->
    <div class="desktop">
        ${model.desktopContent}
    </div>
</template>

<!--/* Render appropriate view */-->
<sly data-sly-call="${desktopView @ model=model}"></sly>
<sly data-sly-call="${mobileView @ model=model}"></sly>
  1. The data-sly-use initializes the model once at the root level

  2. Templates accept the pre-initialized model as a parameter

  3. Both templates share the same model instance

  4. The templates act as pure presentation layers that consume the already initialized model, eliminating duplicate resource calls.

View solution in original post

3 Replies

Avatar

Level 3

Hi @RaunakRa2 , Can you please share the code snippet you have created with 2 resource calls

Avatar

Correct answer by
Level 10

Without seeing the actual code, it's challenging to provide a context-aware response.

However, you can achieve your goal by creating a shared template that both views can use while initializing your resource or Sling Model only once. Here's how to do it:

<!--/* Initialize your resource/model ONCE */-->
<sly data-sly-use.model="com.example.MyComponentModel"/>

<!--/* Define template for both views */-->
<template data-sly-template.mobileView="${@ model}">
    <!--/* Mobile-specific markup using ${model.property} */-->
    <div class="mobile">
        ${model.mobileContent}
    </div>
</template>

<template data-sly-template.desktopView="${@ model}">
    <!--/* Desktop-specific markup using ${model.property} */-->
    <div class="desktop">
        ${model.desktopContent}
    </div>
</template>

<!--/* Render appropriate view */-->
<sly data-sly-call="${desktopView @ model=model}"></sly>
<sly data-sly-call="${mobileView @ model=model}"></sly>
  1. The data-sly-use initializes the model once at the root level

  2. Templates accept the pre-initialized model as a parameter

  3. Both templates share the same model instance

  4. The templates act as pure presentation layers that consume the already initialized model, eliminating duplicate resource calls.

Avatar

Administrator

@RaunakRa2 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you!



Kautuk Sahni