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>
Solved! Go to Solution.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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...
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies