Solved

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

Forum|Forum|1 year ago
September 28, 2024
2 replies
1155 views

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",

},

.

......

]

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 Sady_Rifat

Hello @nageshraja ,
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/models/LoginModel.java

SureshDhulipudi

Community Advisor

please try like this :

== parent model ===

@Model(adaptables = Resource.class)
@3484101(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)
@3484101(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;
}
}

NageshRajaAuthor

@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

Community Advisor

Hello @nageshraja ,
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/models/LoginModel.java

NageshRajaAuthor

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/models/LoginModel.java

Sady_Rifat

Community Advisor

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded