Custom data object in Sling Model - Multifield - AEM VueJS Data Agreement

[Cross_Leaf]

Hey fellas,

I have a multifield which has some custom data.

I want to expose the data to vuejs in a custom data model object.

What is the best approach for the same?

1. Create a custom JsonObject with the fields we want.

2. Use Sling Model Exporter

The problem with #2 is I can get the json response for parent model but the child multifield is coming as items - item0.model.json, item1.model.json
How do I combine it in JsonArray format?

Here's a sample -

parentComp: {

 title: "Parent Title",

 subtitle: "Parent Subtitle",

 childComp : [

        {

          title: "Child 1 Title",

          description: "Some Subtext can go here for more details",

          imageSrc: "/src/assets/Icons/Document.svg",

          label: "Learn More",

          link: "https://google.com",

        },

        {

          title: "Child 2 Title",

          description: "Some Subtext can go here for more details",

          imageSrc: "/src/assets/Icons/Email.svg",

          label: "Learn More",

          link: "https://google.com",

        },

        .

        .

        ......

]

[SureshDhulipudi]

please try like this :

== parent model ===

@Model(adaptables = Resource.class)
@exporter(name = "jackson", extensions = "json")
public class ParentCompModel {

@JsonProperty("title")
public String getTitle() {
  return  title;
}

@JsonProperty("subtitle")
public String getSubtitle() {
 return subtitle;
}

@JsonProperty("childComp")
public List<ChildCompModel> getChildComp() {
 return listChildComp;
}
}

=== child model ===

@Model(adaptables = Resource.class)
@exporter(name = "jackson", extensions = "json")
public class ChildCompModel {

@JsonProperty("title")
public String getTitle() {
 return  title;
}

@JsonProperty("description")
public String getDescription() {
  return description;
}

@JsonProperty("imageSrc")
public String getImageSrc() {
   return imageSrc;
}

@JsonProperty("label")
public String getLabel() {
  return label;
}

@JsonProperty("link")
public String getLink() {
 return link;
}
}

[Cross_Leaf]

@SureshDhulipudi  - What would be the variable in sightly to access this JSON object and then expose it to vueJS?

I want to pass the custom JSON object as below -

<vue-component data-component="xyz" data-xyz="${customModel.object}"></vue-component>

[Sady_Rifat · Accepted solution]

Hello @Cross_Leaf ,
You might not get the automated json transform in Slightly.
One thing you can do,

ObjectMapper objectMapper = new ObjectMapper();
jsonData = objectMapper.writeValueAsString(this);

on your ParentComponent.
Ref: https://github.com/Sady-Rifat/aem-vue/blob/component-api-setup/core/src/main/java/com/aem/vue/core/m... 

[Cross_Leaf]

Hey @Sady_Rifat, thanks for the reply but the URL is pointing to 404 for me -

https://github.com/Sady-Rifat/aem-vue/blob/component-api-setup/core/src/main/java/com/aem/vue/core/m...

[Sady_Rifat]

Just for your idea,

import com.adobe.cq.export.json.ExporterConstants;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
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.injectorspecific.ValueMapValue;

import javax.annotation.PostConstruct;

@Model(adaptables = {Resource.class, SlingHttpServletRequest.class}, adapters = {LoginModel.class},
        resourceType = LoginModel.RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION, selector = ExporterConstants.SLING_MODEL_SELECTOR)
public class LoginModel {
    public static final String RESOURCE_TYPE = "aem-vue/components/login";

    @ValueMapValue
    protected String email;
    @ValueMapValue
    protected String password;
    @ValueMapValue
    protected String submit;
    @JsonIgnore
    private String jsonData;

    @PostConstruct
    protected void init() throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        jsonData = objectMapper.writeValueAsString(this);
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getSubmit() {
        return submit;
    }

    public void setSubmit(String submit) {
        this.submit = submit;
    }

    public String getJsonData() {
        return jsonData;
    }
}

<sly data-sly-use.model="com.aem.vue.core.models.LoginModel"/>
<login :model-data="${model.getJsonData}"></login>

You can change accordingly.