Problem with the custom column control | Community
Skip to main content
G
guruprasadbhat
Level 2
February 29, 2016
Solved

Problem with the custom column control

  • February 29, 2016
  • 6 replies
  • 1726 views

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>
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 guruprasadbhat

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

6 replies

smacdonald2008
smacdonald2008
Level 10
February 29, 2016

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... 

G
guruprasadbhatAuthor
Level 2
March 1, 2016

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
edubey
Level 10
March 1, 2016

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

G
guruprasadbhatAuthorAccepted solution
Level 2
March 2, 2016

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
sandeepm744005
Level 5
March 2, 2016
        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.
G
guruprasadbhatAuthor
Level 2
March 2, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...