Adding Columns(parsys) based on number field entries in AEM 6.4

[#1]

Hi All,

I am trying to create a component which will add number of columns based on the number selected in the numberfield in dialog. For exm - If I add 3 in the number field it should then generate a layout consisting of three columns with three parsys.

Currently I'm trying to read the number field value and add these values in a list in java. This is the snippet:

if (null != columnProperties) {

numberofcolumns = (Integer) columnProperties.get("numberofcolumns", 1); //number entered from the dialog in numberfield

log.info("Number of Columns: " + numberofcolumns);

for (int i = 0; i < numberofcolumns; i++) {

log.info("Inside for loop");

ColumncontainerVO columnItemVO1 = new ColumncontainerVO();

//String col = "autocomplete" + String.valueOf(i + 1);

columnItemVO1.setNumber(i);

log.info("Column Item"+columnItemVO1);

columnList.add(columnItemVO1);

log.info("columnList"+columnList.get(i));

}

log.info("Outside for loop");

}

public List<ColumncontainerVO> getcolumnList() {  //list being generated for the entries

return columnList;

}

After this I'm trying to access this list in sightly using the below code:

<div data-sly-test="${wcmmode.edit}" class="col-content" style="color: gray;">Edit Column Container</br></div>

<div data-sly-use.colControl="com.aem.common.components.mysample.Columncontrol" data-sly-unwrap>

     <div class="sample-container">

         <div class="row class">

           <div data-sly-list="${colControl.columnList}" data-sly-unwrap>

           <div data-sly-resource="${ @path=item.number, resourceType='foundation/components/parsys'}"></div>

            </div>    

         </div>

      </div>
</div>

However, i'm not getting the list value on the page. The above approach has to be done using WCMUsePojo class in java.

Can anyone please provide their insight?

Regards,

Bernadine Soman

Arun Patidar​Veena_07​smacdonald2008​

[#2]

Please check Creating a custom Touch UI Grid Component for Adobe Experience Manager

[#3]

import java.util.ArrayList;

import java.util.List;

import javax.annotation.PostConstruct;

import javax.inject.Inject;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.models.annotations.Model;

import org.apache.sling.models.annotations.Optional;

@Model(adaptables=Resource.class)

public class CustomColumnModel {

    @Inject @Optional

    protected String numberofcolumns;

    List<String> colList = new ArrayList<String>();

    @PostConstruct

    protected void init() {

    if(!numberofcolumns.isEmpty()) {

    for(int i=0; i<Integer.parseInt(numberofcolumns);i++){

    colList.add("col"+i);

    }

    }

    }

    public List<String> getColumns() {

        return colList;

    }

}

--------------------------------------------------------------------------------

<div data-sly-test="${wcmmode.edit}" class="col-content" style="color: gray;">Edit Column Container</br></div>

<div data-sly-use.colControl="com.acc.aem64.core.models.CustomColumnModel" data-sly-unwrap>

     <div class="sample-container">

         <div class="row class">

           <div data-sly-list="${colControl.columns}" data-sly-unwrap>

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

            </div>   

         </div>

      </div>

</div>

[#4]

Are you looking for something like this https://helpx.adobe.com/experience-manager/using/bootstrap_grid.html

Creating a custom Touch UI Grid Component for Adobe Experience Manager