column control container component export json

[sreenu539]

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


    @inject
    @Deleted Account
    public String desktopColumns;

    @inject
    @Deleted Account
    public String backgroundColor;
 

    @inject
    @Deleted Account
    public String fileReference;
 

    @inject
    @Deleted Account
    public String backgroundGradient; 

    private List<Columns> col; 

    @PostConstruct
    protected void init() {
        col = new ArrayList<Columns>(); 

        if (desktopColumns != null) {
            int deskTopCols = 0;
            switch (desktopColumns) {  
		case "one-column-100" : {
                    deskTopCols = 1;
                    break;
                } 
	             
		case "two-column-33-66":
                case "two-column-66-33":
                case "two-column-50-50" : {
                    deskTopCols = 2;
                    break;
                }

		case "three-column-6-47-47":
                case "three-column-33-33-33":
                case "cmp-custom-column-control-carousel-stack--3columns": {
                    deskTopCols = 3;
                    break;
                }

        case "four-column-25-25-25-25":
                case "cmp-custom-column-control-carousel-stack--4columns": {
                    deskTopCols = 4;
                    break;
                }

            }

            int mdVal = 12 / deskTopCols;
            for (int i = 0; i < deskTopCols; i++) {
                Columns item = new Columns();
                item.setCount(i);
                item.setDeskVal(mdVal);
                col.add(item);

            }

        }
        setCol(col);

    }

 

    public List<Columns> getCol() {
        return col;
    } 

    public void setCol(List<Columns> col) {
        this.col = col;
    } 

    public String getColumnCountClass() {
        return "column-count-" + col.size();
    }

    public String getInLineClass(){
        String bgColor = backgroundColor !=null ? "background-color:"+ backgroundColor +";" : "";
        String bgGradient = backgroundGradient !=null ? "background:"+ backgroundGradient +";" : "";
        String bgImage = fileReference !=null ? "background-image:url('"+fileReference+"');" : "";
        return bgColor+bgGradient+bgImage;

    }

}

I have a column control component with parsys and authored teaser components inside it.

when I do page.model.json I am not seeing json data for teaser inside column control exported.

how to export column control child components inside?

Thanks,

Sri

[Shashi_Mulugu]

@sreenu539 just declare the parent colum control component as container, AEM automatically goes to next level executes sling model of each child node/component.

If it's not what you are looking for or you want it in custom json format, follow this AEM core component Hava class, where they are getting all items under a container..

https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...

[sreenu539]

<div data-sly-unwrap data-sly-use.colControl="com.company.appinuse.core.models.ColumnControl"></div>

<div class="column-control--background" id="${properties.id}" style="${colControl.inLineClass @ context='styleComment'}">
<div class="responsivegrid column-control-cmp container-fluid ${colControl.columnCountClass} cmp-custom-column-control-container ${properties.desktopColumns== 'four-column-25-25-25-25' ? 'stack960' : ''}">

    <div class="colctrl-container"
         data-sly-test="${properties.desktopColumns == 'two-column-50-50'}">
        <div class="cq-placeholder cq-marker-start" data-emptytext="Start of 2 Columns"
             data-sly-test="${wcmmode.edit}">
        </div>
        <div class="aem-Grid aem-Grid--medium--12 aem-Grid--default-12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--6 aem-GridColumn--default-12" >

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--6 aem-GridColumn--default-12" >

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
        </div>
    </div>

    <div class="colctrl-container"
         data-sly-test="${properties.desktopColumns == 'two-column-66-33' || properties.desktopColumns =='two-column-33-66'}">
        <div class="cq-placeholder cq-marker-start" data-emptytext="Start of 2 Columns"
             data-sly-test="${wcmmode.edit}">
        </div>
        <div class="aem-Grid aem-Grid--medium--12 aem-Grid--default-12 colctrl-row ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
            <div class="colctrl-column aem-GridColumn ${properties.desktopColumns=='two-column-66-33' ? 'aem-GridColumn--medium--8' : 'aem-GridColumn--medium--4'} aem-GridColumn--default-12" >

                    <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                         data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
            <div class="colctrl-column aem-GridColumn ${properties.desktopColumns=='two-column-66-33' ? 'aem-GridColumn--medium--4' : 'aem-GridColumn--medium--8'} aem-GridColumn--default-12" >

                    <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                         data-sly-unwrap></div>

            </div>
        </div>
    </div>

    <div class="colctrl-container"
         data-sly-test="${properties.desktopColumns== 'three-column-33-33-33'}">
        <div class="cq-placeholder cq-marker-start" data-emptytext="Start of 3 Columns"
             data-sly-test="${wcmmode.edit}">
        </div>

        <div class="aem-Grid aem-Grid--medium--12 aem-Grid--default--12 colctrl-row  ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--4 aem-GridColumn--default-12 ">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--4 aem-GridColumn--default-12">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',2]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--4 aem-GridColumn--default-12">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
        </div>
    </div>


    <div class="colctrl-container"
         data-sly-test="${properties.desktopColumns== 'three-column-6-47-47'}">
        <div class="cq-placeholder cq-marker-start" data-emptytext="Start of 3 Columns"
             data-sly-test="${wcmmode.edit}">
        </div>

        <div class="aem-Grid aem-Grid--medium--12 aem-Grid--default--12 colctrl-row  ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--2 aem-GridColumn--default-12 ">
               
                    <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                         data-sly-unwrap></div>
                
            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--5 aem-GridColumn--default-12">
                
                    <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                        data-sly-unwrap></div>
                
            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',2]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--5 aem-GridColumn--default-12">
               
                    <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                         data-sly-unwrap></div>
                
            </div>
        </div>
    </div>


    <div class="colctrl-container"
         data-sly-test="${properties.desktopColumns== 'four-column-25-25-25-25'}">
        <div class="cq-placeholder cq-marker-start" data-emptytext="Start of 4 Columns"
             data-sly-test="${wcmmode.edit}">
        </div>

        <div class="aem-Grid aem-Grid--medium--12 aem-Grid--large--12 aem-Grid--default--12 colctrl-row  ${properties.isFlexboxEnabled ? 'container--flexbox' : ''}">
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',0]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12 ">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',1]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',2]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
            <sly data-sly-test.par="${'{0}{1}' @format=['par_',3]}"/>
            <div class="colctrl-column aem-GridColumn aem-GridColumn--medium--12 aem-GridColumn--large--3 aem-GridColumn--default-12">

                <div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}"
                     data-sly-unwrap></div>

            </div>
        </div>
    </div>


    <div class="cq-placeholder cq-marker-end" data-emptytext="End of Columns" data-sly-test="${wcmmode.edit}">
        <!--End of Columns-->
    </div>
</div>

<div data-sly-test="${(wcmmode.edit || wcmmode.preview)}"
     class="cq-placeholder ${classAppend}"
     data-emptytext="${component.properties.jcr:title}${emptyTextAppend && ' - '}${emptyTextAppend}">
</div>
</div>

using parsys inside component html. I tried first option and it seems to get to parsys but not teasers authored inside.

supertyped to v1/container in component xml and changed model class code to be 

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, adapters = {ContainerExporter.class,
        ComponentExporter.class, ColumnControl.class }, resourceType = { "appinuse/components/content/custom-column-control" })
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION, selector = ExporterConstants.SLING_MODEL_SELECTOR)
@JsonSerialize(as = ColumnControl.class)
public class ColumnControl {

    private List<Columns> col;

    @Self
    (type = ResourceSuperType.class)
    private com.adobe.cq.wcm.core.components.models.Container container;

    @PostConstruct
    protected void init() {
        col = new ArrayList<Columns>();
        for (int i = 0; i < 3; i++) {
            Columns item = new Columns();
            item.setCount(i);
            item.setDeskVal(3);
            col.add(item);
        }
        setCol(col);
    }

    public List<Columns> getCol() {
        return col;
    } 

    public void setCol(List<Columns> col) {
        this.col = col;
    } 

    public String getColumnCountClass() {
        return "column-count-" + col.size();
    }

    public String getInLineClass(){
        return "";
    }

}

[vivek101 · Accepted solution]

Hi Sri,

Changing the init() method of your ColumnControl class to repeatedly iterate over the child components inside the column control component and include them in the JSON output is one approach to accomplish this. You can obtain the child components using the Sling API and write them to the JSON output using the JSONWriter API.

Here is an example implementation of the modified init() method:

Java:

@PostConstruct
protected void init() {
col = new ArrayList<Columns>();

if (desktopColumns != null) {
int deskTopCols = 0;
switch (desktopColumns) {
case "one-column-100" : {
deskTopCols = 1;
break;
}

case "two-column-33-66":
case "two-column-66-33":
case "two-column-50-50" : {
deskTopCols = 2;
break;
}

case "three-column-6-47-47":
case "three-column-33-33-33":
case "cmp-custom-column-control-carousel-stack--3columns": {
deskTopCols = 3;
break;
}

case "four-column-25-25-25-25":
case "cmp-custom-column-control-carousel-stack--4columns": {
deskTopCols = 4;
break;
}
}

int mdVal = 12 / deskTopCols;
for (int i = 0; i < deskTopCols; i++) {
Columns item = new Columns();
item.setCount(i);
item.setDeskVal(mdVal);
col.add(item);
}

}

// Get the child components inside the column control component
Resource childResource = resource.getChild("par/sys/columncontrol");
if (childResource != null) {
Iterator<Resource> childIterator = childResource.listChildren();
while (childIterator.hasNext()) {
Resource child = childIterator.next();
// Write the child component to the JSON output
try {
jsonWriter.key(child.getName());
jsonWriter.value(child.adaptTo(ValueMap.class));
} catch (JSONException e) {
// Handle the exception
}
}
}

setCol(col);
}

This code assumes that the parsys inside the page contains a component with the sling:resourceType "myproject/components/columncontrol". You may need to modify the code to match your component hierarchy and resource types.

Thank you.