dual resource call from the same component with mobile view and desktop view | Community
Skip to main content
R
RaunakRa2
New Participant
April 3, 2025
Solved

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

  • April 3, 2025
  • 3 replies
  • 424 views

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 

Best answer by giuseppebaglio

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.

3 replies

kautuk_sahni
kautuk_sahni
Employee
April 15, 2025

@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
giuseppebaglio
giuseppebaglioAccepted solution
New Participant
April 3, 2025

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.
    N
    NavyaSri_M
    New Participant
    April 3, 2025

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

      Terms & ConditionsAccessibility statement

      Loading footer...