dual resource call from the same component with mobile view and desktop view | Community
Skip to main content
R
RaunakRa2
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 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
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

N
NavyaSri_M
Level 2
April 3, 2025

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

    giuseppebaglio
    giuseppebaglioAccepted solution
    Level 10
    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.
      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      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
      Terms & ConditionsAccessibility statement

      Loading footer...