Level 3

Solved

Writing Sling Models for Nested Multifields.

4 replies
2319 views
Translate All

How can I write a sling Model to display a nested multifield with an image field in one of the multifield?

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

DEBAL_DASAccepted solution

New Member

You can refer https://blogs.perficient.com/2018/08/24/using-sling-models-with-nested-composite-mulitifields-in-aem-6-3/ , I used the similar approach to manage pathbrowser (to select image) , text area( for description) and text field(title).

Debal Das, Senior AEM Consultant

DEBAL_DASAccepted solution

New Member

You can refer https://blogs.perficient.com/2018/08/24/using-sling-models-with-nested-composite-mulitifields-in-aem-6-3/ , I used the similar approach to manage pathbrowser (to select image) , text area( for description) and text field(title).

Translate

Debal Das, Senior AEM Consultant

M

Manasi29Author

Level 3

Thank you.

Translate

DEBAL_DAS

New Member

Sample code for nested multifields-

1. Sling model -

package com.aem.demo.core.models;

import java.util.List;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

@Model(
	    adaptables = {Resource.class},
	    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface CompaniesModel {
	@Inject
	  List<Company> getCompanies(); // the name `getCompanies` corresponds to the multifield name="./companies"
	  /**
	   * Company model
	   * has a name and a list of departments
	   */
	  @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
	  interface Company {
	    @Inject
	    String getName();
	    @Inject
	    List<Department> getDepartments(); // the name `getDepartments` corresponds to the multifield name="./departments"
	  }
	  /**
	   * Department model
	   * has a name and a manager
	   */
	  @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
	  interface Department {
	    @Inject
	    String getImage();
	    
	  }

}

2. .context.xml associated with cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Companies"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <companies
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldDescription="Click 'Add Field' to add a new company.">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./companies">
                            <items jcr:primaryType="nt:unstructured">
                                <name
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Comp. Name"
                                    name="name"/>
                                <departments
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                    composite="{Boolean}true"
                                    fieldDescription="Click 'Add Field' to add a new department."
                                    fieldLabel="Departments">
                                    <field
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container"
                                        name="./departments">
                                        <items jcr:primaryType="nt:unstructured">
                                            <image
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                fieldLabel="Image"
                                                name="image"
                                                rootPath="/content/dam/we-retail/en/people"/>
                                        </items>
                                    </field>
                                </departments>
                            </items>
                        </field>
                    </companies>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

3. htl code -

<sly data-sly-use.companiesModel="com.aem.demo.core.models.CompaniesModel"/>
<sly data-sly-test.empty="${!companiesModel.companies}" />
<div data-sly-test="${wcmmode.edit && empty}" class="cq-placeholder" data-emptytext="${component.title}"></div>
<sly data-sly-test="${!empty}">
  <div>
      <ul data-sly-list.company="${companiesModel.companies}">
        <li>${company.name}
          <ul data-sly-list.department="${company.departments}">
            <li>
               <img src="${department.image}" width="300" height="300"></br>
            </li>
          </ul>
        </li>
      </ul>
  </div>
</sly>

4. Author's entries using touch ui dialog and rendered output -

Translate

Debal Das, Senior AEM Consultant

SantoshSai

Community Advisor

Dear @manasi29

You can use list of class as mentioned below for filed injectors

@Model(adaptables = {Resource.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface CompaniesModel {
  @Inject
  List<Names> getNames(); // `getNames` corresponds to the multifield name="./names"
  /**
   * Names model
   * has a name and a list of first names
   */
  @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
  interface Names {
    @Inject
    String getFirstName();
  }
  /**
   * First Name model
   * 
   */
  @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
  interface Firstname {
    @Inject
    String getName();
  }
}

Regards,

Santosh

Translate

Santosh Sai

Sign up

Login with SSO

Login to the community

Login with SSO