column control container component export json | Community
Skip to main content
sreenu539
New Participant
April 3, 2023
Solved

column control container component export json

  • April 3, 2023
  • 2 replies
  • 1035 views
@Model(adaptables = Resource.class) public class ColumnControl { @586265 @7392697 public String desktopColumns; @586265 @7392697 public String backgroundColor; @586265 @7392697 public String fileReference; @586265 @7392697 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

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 vivek101

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.

 

 

 

2 replies

vivek101Accepted solution
New Participant
April 4, 2023

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.

 

 

 

Shashi_Mulugu
New Participant
April 3, 2023

@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/wcm/core/components/internal/models/v1/LayoutContainerImpl.java

sreenu539
sreenu539Author
New Participant
April 3, 2023

 

 

<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 ""; } }