How implement a multifield component in AEM React SPA ? | Community
Skip to main content
akashkriz005
akashkriz005
Level 2
January 9, 2024

How implement a multifield component in AEM React SPA ?

  • January 9, 2024
  • 2 replies
  • 2385 views

Hi Team, 

Trying to implement a multified component in AEM React SPA. But not sure how to pass the json data for each item being generated in multifield. Could anyone please suggest me the best and possible method for this one with an example ? Preferably java sling model for the same. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Raja_Reddy
Community Advisor
Raja_ReddyCommunity Advisor
Community Advisor
January 9, 2024

Hi @akashkriz005 
Please follow the below steps
1.Create the Sling Model
2.Create the Sightly (HTML) file
3.Create the React Component
4.Create the React Component
5.Display the Multifield Component in SPA
you might need to adjust the Sling Model and React component accordingly.
Also, make sure to replace /content/multifield-component-path with the actual path to your multifield.

Thanks

    akashkriz005
    akashkriz005Author
    Level 2
    January 9, 2024

    Hi @raja_reddy  

    Thanks for the info. But in case of SPA we are passing json data to UI team for mapping it with react component right? So do we need to write any sightly ? 
    And also if you have any Sling model reference to pass multifield data as a json , could you please mention ? 

      Raja_Reddy
      Community Advisor
      Raja_ReddyCommunity Advisor
      Community Advisor
      January 9, 2024

      Hi @akashkriz005 
      a Single Page Application (SPA) where you pass JSON data to the UI team for mapping with React components, you typically don't need to use Sightly (HTL) directly. Instead, you use Sling models on the server side to convert AEM content into a JSON format that can be consumed by your SPA.

      1.Define Sling Models
      2.Implement the Sling Models
      3.Serialize the Model to JSON
      4.Use the JSON in the SPA
      With this setup, you can access the JSON data in your SPA by making a request to the appropriate URL, which corresponds to the Sling resource that has the Multifield Model applied.

      Thanks.

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        January 11, 2024

        @akashkriz005 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

        Kautuk Sahni
        akashkriz005
        akashkriz005Author
        Level 2
        January 17, 2024

        Hi Everyone , 

        I was trying all the possible way to implement this , but still I'm not able to proceed further. Mentioning the issue on detail. 

        This my Java sling model code written for multifield. 

        import java.util.List;

         

        import javax.inject.Inject;

         

        import org.apache.sling.api.SlingHttpServletRequest;

        import org.apache.sling.api.resource.Resource;

        import org.apache.sling.models.annotations.DefaultInjectionStrategy;

        import org.apache.sling.models.annotations.Exporter;

        import org.apache.sling.models.annotations.Model;

        import org.apache.sling.models.annotations.Optional;

         

         

        import com.adobe.cq.export.json.ComponentExporter;

        import com.adobe.cq.export.json.ExporterConstants;

         

        @Model(adaptables = SlingHttpServletRequest.class, adapters = ComponentExporter.class, resourceType = BannerModel.RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

         

        @3484101( // Exporter annotation that serializes the model as JSON

        name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)

         

        public class BannerModel implements ComponentExporter {

         

         

        protected static final String RESOURCE_TYPE = "sampleproject/components/banner";

         

        @586265

        @Optional

        private List<MultifieldItem> bannerlist;

         

        @9944223

        public String getExportedType() {

         

        return null;

        }

         

        public static String getResourceType() {

        return RESOURCE_TYPE;

        }

         

        public List<MultifieldItem> getBannerlist() {

        return bannerlist;

        }

         

         

        public class MultifieldItem {

         

        @586265

        @Optional

        private String bannertext;

         

        @586265

        @Optional

        private String bannericon;

         

        public String getBannertext() {

        return bannertext;

        }

         

        public String getBannericon() {

        return bannericon;

        }

         

        }

         

        }

        After building the code , Even the component itself is not getting loaded on the page. But if I remove the List concept , Component is getting loaded. Could someone please suggest if any wrong approach I'm following here ?

          Terms & ConditionsAccessibility statement

          Loading footer...