AEM REACT multifield Component.

[SwapnilGaikwad008]

hey,

I am trying to create Multifield Authorable Component in React AEM, but I am not able to create it I am trying to Use Slingmodel but not getting any results from it.

I had gone through the documentation but not able to figure out about multifield component in react.

please help!

[pfauchere]

Be sure to understand the basics [0,1]. Then, yes you will have to create both a Sling Model and a frontend component

[0] https://docs.adobe.com/content/help/en/experience-manager-learn/sites/spa-editor/spa-editor-framework-feature-video-use.html [1] https://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events

[I2obiN]

stuck on this too, cannot figure out if it's possible to map a multifield to a react component prop

[keepthebyte]

We recently released a set of React components that works great together with Core Components and Content Services. Please check out https://github.com/adobe/aem-react-core-wcm-components

[I2obiN]

I had a look at that but couldn't see an analogous solution.

Here is my model.

Here is my react-spa

The title maps fine, the component renders, and the data is there in the crxde. I just can't seem to retrieve my list of multifield values as a prop. When I console.log the props value there is only the title which makes me think I've mapped the multifield incorrectly to the java core model. Not sure.

[godanny86]

So your trying to map gridChildLinks to your React component? Does the JSON model show an entry for gridChildLInks? What does it look like?

[I2obiN]

[godanny86]

Yes thats in CRXDE Lite... i'm asking about what gets outputted by the JSON Model, i.e /content/mysite/home.model.json

[I2obiN]

It doesn't seem to be getting output in the model.json

[godanny86]

Do you have a getter method in your Java Sling Model? In your screenshot I can see the @Getter annotation but I'm not familiar with how the Sling Exporter will serialize List<LinkItem>. Might be worth it to create a vanilla getGridChildLinks() method and experiment with getting the JSON populated.

[I2obiN]

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import com.dep.company.core.beans.LinkItem;
import lombok.Data;
import lombok.Getter;
import com.fasterxml.jackson.annotation.JsonProperty;
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.injectorspecific.Self;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

import javax.annotation.Nonnull;
import javax.inject.Inject;
import java.util.List;

@Model(
        adaptables = {Resource.class},
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
        resourceType = GridComponentModel.RESOURCE_TYPE
)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION, selector = ExporterConstants.SLING_MODEL_SELECTOR)
@Data
@Getter
public class GridComponentModel  implements ComponentExporter {
  protected static final String RESOURCE_TYPE = "company-dep/components/content/grid";

  @Getter
  @Inject
  private List<LinkItem> gridChildLinks;

  @ValueMapValue(name = "gridTitle")
  private String gridTitle;

  @Self
  private Resource resource;

  @JsonProperty("gridChildLinks")
  public List<LinkItem> getGridChildLinks() {
    return gridChildLinks;
  }

  @Nonnull
  @Override
  public String getExportedType() {
    return RESOURCE_TYPE;
  }

}

[I2obiN]

There is a ListImpl in the aem-react-core-wcm-components I dunno if I should be using that over the generic Java list but given the generic Java List was populating in CRXDE I figured it was successful

[godanny86]

The Java.util.List should be fine. I'm not convinced that gridChildLinks List is populated correctly in Java based on the values in the JCR... As a quick sanity check what is the value of gridChildLinks.size()? Does it get properly injected with LinkItems?

POJOs should be automatically serialized by the Sling Model Exporter...for example in Core Components https://github.com/adobe/aem-core-wcm-components/blob/master/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/NavigationItemImpl.java. I'm assuming com.dep.company.core.beans.LinkItem is a similar POJO?

[I2obiN]

Yeh my LinkItem is fairly straightforward. I wonder do I have to initialize the list on my GridComponent

import lombok.Getter;
import lombok.Setter;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@Model(adaptables = Resource.class)
public class LinkItem {

    /*
     * title
     */
    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
    protected String title;

    /*
     * link
     */
    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
    protected String link;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getLink() {
        return link;
    }

    public void setLink(String link) {
        this.link = link;
    }
}

[barani-ramakrishnan-ey]

@I2obiN Did you find any solutions for above problem. I am also stuck with multifield react components.

[I2obiN]

@barani-ramakrishnan-ey Did you find any solutions for above problem. I am also stuck with multifield react components.

not a concrete one no, rolled off the project and I'm pretty sure it was scrapped so I've no way to check for you I'm afraid.

[FL33TW00D]

Do we have a concrete example for this yet?

[patel1643]

I am afraid not, I have checked everything but no luck :(