Problem with the custom column control

[guruprasadbhat]

Hi,

I am new to AEM. I am working with v6.0. I have created a custom column control using bootstrap. It allows the content author to configure the number of columns he needs and the proportion of each column (ex: Column: 3, Ratio:4:4:4). I have created a custom client library to use bootstrap css files and I have added editConfig component to refresh the page every time the component is edited/inserted. I have added the JSP code of my component below

This code works the first time when I configure the values.

Problem:

1. If I refresh the page again, the columns disappear.

2. If I add more column than what is configured, then only the extra columns appear. Ex: if previously I have configured 2 columns and then I say I need 3 columns, only 1 column appears.

3. If I just add some text to the JSP page and refresh, all the columns appear. But if I refresh again everything disappears.

Please advise if I am making any mistake or if this is some kind of bug in the product

<%-- Bootstrap Grid Layout component. Bootstrap Grid Layout --%><% %><%@include file="../../global/global.jsp"%><% %><%@page session="false" %><% %><% // TODO add you code here %> <cq:includeClientLib categories="demo.libs"/> This is Bootstrap Layout <div class="container"> <div class="row"> <%! int noCol=0; int width=0; int i=0; String tmpStr; String[] result; int occurance=0; %> <% // Lets see how many columns user wants. If blank we will default to 2 columns tmpStr=(String) properties.get("noColumn", "2"); noCol=Integer.valueOf(tmpStr); // Lets get the ratio for each column. If blank we will default to 6:6 ratio tmpStr=(String) properties.get("ratio", "6:6"); // Now count the colons, so that we can validate Ex: 3 columns should have 2 colons occurance = (tmpStr.length() - tmpStr.replace(":","").length())+1; // just a validation to see if the ratio is correct if (occurance == noCol) { // Now get the ratio for each column in an array result = tmpStr.split(":"); // Lets loop, to create as many column as requested for(;i<noCol;i++) { // Lets give a unique name to each parsys in our column tmpStr = "parsys-" + noCol + "-" + tmpStr.replace(":","-") + "-" + i; // Remeber result has the ratio of the column. We are just converting it to integer width = Integer.valueOf(result[i]); %> <%-- Finally lets create the column with the defined ratio and include a parsys in it --%> <div class="col-md-<%=width%>" > <cq:include path="<%=tmpStr%>" resourceType="foundation/components/parsys"/> </div> <% } } else { %>Sorry incorrect input ratio..! No. of column and Ratio mismatch <% } %> </div> </div>

[smacdonald2008]

We have this use case in a community article. Check this article: 

https://helpx.adobe.com/experience-manager/using/custom_columns.html

Hope this helps... 

[guruprasadbhat]

Hi,

Thanks for your reply. I have referred to this article before implementing my own custom control. The only change I have made is to allow the author to specify the ratio instead of selecting from a combo box.

Do you see any isues in my code..? I have now added comments to my code, so that it is easy to understand

[edubey]

Not sure why are you going for too many complex calculations

There are easier ways to achieve, make you u create class name (CSS) with the ratio's of column you will be using

[guruprasadbhat · Accepted solution]

Reason for the complex calculation is that, I don't want to restrict the content author to go with the pre-defined ratio's. Bootstrap already gives the CSS class, all I need to do is, use it.

I have finally figured out the issue. I should have re-initialized the for loop to 0. Silly me :) 

Thanks anyways for your reply

[sandeepm744005]

        Just checking, did you look into acs-common package? There is  custom ready made column control component comes with the package which is compatible with both touchui and classic ui.

[guruprasadbhat]

No. Did not come across this one. Just had a quick glance. Sounds interesting. Some one made my life easy. 

Thanks for letting me know