How can i set different no.of columns for 'Column control' component on load for different templates in AEM 6.5?

[Rajumuddana]

Hi Team,

I have a Column control component and i'm aware of the by using cq:template node we can set default no.of columns

ex: columnAmount="2". (this is fixed across all templates)

But, i wanted have different no.of columns for 'Column control' component on load for different templates

I searched and couldn't found any solution.

Thanks in advance!

Raju.

[arunpatidar]

Hi @Rajumuddana 
Are you using dynamic/editable template or static template?

you can initialise default value from code as well, in Author instance when component is dragged add a custom column property from sling model.

With dynamic template, you can set the initial properties in the initial node

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/pla... 

[Rajumuddana]

Hi @arunpatidar ,

Thanks for your Response.

1. I'm using Editable templates.
2. yes, my understanding was same, setting up a property in 'initial' node of template would work, but it didn't.Added a property 'columnAmount=4' in initial node of HnF template.Upon Drag n Drop my 'Column Control', i still see 2 columns only.

am i doing it in wrong way?

[arunpatidar]

Hi @Rajumuddana 

You need to add these entries to the component node, not to the jcr:content.

Alternatively, you can modify your code to utilize the design dialog to read the number of column properties if none are set. This allows the property to be set differently for each template.

[Rajumuddana]

Hi @arunpatidar ,

Thanks for the reply.

If i understood this correctly,

thought we use 'design dialog' and set value and modify java code to read from 'design dialog', this would always load fixed columns unlike the regular 'column control' component (though we change values in component drop down, our code still consider design dialog value only).

Thanks,

Raju.

[arunpatidar · Accepted solution]

Hi @Rajumuddana 

(though we change values in component drop down, our code still consider design dialog value only).

Your code should read values from component first then design dialog value as a fallback/initial value.

[Rajumuddana]

Hi @arunpatidar,

Thanks for you response again!

I did try the way you suggested and it worked like a champ!

For reference:

1. Design dialog Structure
2. Design dialog configuration
3. Sling Model class

    @Inject
    @Getter
    @Via("resource")
    private int columnAmount;

    @SlingObject
    private ResourceResolver resourceResolver;

    @CurrentPage
    private Page currentPage;

    private int columnAmountFromDD = 0;

    @PostConstruct
    protected void init() {
        ContentPolicyManager contentPolicyManager = resourceResolver.adaptTo(ContentPolicyManager.class);
        if (contentPolicyManager != null) {
            ContentPolicy contentPolicy = contentPolicyManager.getPolicy(currentPage.getContentResource());
            if (contentPolicy != null) {
                String columnAmountDD = (String) contentPolicy.getProperties().get("columnAmount");
                columnAmountFromDD = Integer.parseInt(columnAmountDD != null ? columnAmountDD : "0");
            }
        }
    }

    public boolean isDefaultColumnAmount() {
        return getColumnAmount() == 2;
    }

    public int getColumnAmount() {
        if (columnAmount == 0) {//No value is authored in component dialog.
            if (columnAmountFromDD != 0) {//Value from Design Dialog.
                columnAmount = columnAmountFromDD;
            } else {
                columnAmount = 2;//None of them authored, default value.
            }
        }
        return columnAmount;
    }​

•  Column Control Sightly code

<sly data-sly-use.columnControl="com.abc.xyz.core.components.models.columncontrol.ColumnControlModel"/>

<sly data-sly-test="${columnControl.isDefaultColumnAmount}">
    <div class="column-control__flex flex gap-7.5 ${columnControl.switchOnMobile ? 'flex-col-reverse' : 'flex-col'} md:flex-row">
        <div class="column-control__flex-item basis-full md:basis-${columnControl.leftColumnWidth}/12">
            <div data-sly-resource="${'column-1' @ decorationTagName='div', resourceType='ccx-commons/components/utils/responsivegrid'}"></div>
        </div>
        <div class="column-control__flex-item basis-full md:basis-${columnControl.rightColumnWidth}/12">
            <div data-sly-resource="${'column-2' @ decorationTagName='div', resourceType='ccx-commons/components/utils/responsivegrid'}"></div>
        </div>
    </div>
</sly>

<sly data-sly-test="${!columnControl.isDefaultColumnAmount}">
    <div class="grid grid-cols-1 gap-7.5 md:grid-cols-${columnControl.columnAmount} gap-y-3.75 md:gap-x-3.75" data-sly-test="${columnControl.columnAmount > 2}">
        <div data-sly-resource="${'column-1' @ decorationTagName='div', resourceType='ccx-commons/components/utils/responsivegrid'}"></div>
        <div data-sly-resource="${'column-2' @ decorationTagName='div', resourceType='ccx-commons/components/utils/responsivegrid'}"></div>
        <div data-sly-resource="${'column-3' @ decorationTagName='div', resourceType='ccx-commons/components/utils/responsivegrid'}"></div>
        <sly data-sly-test="${columnControl.columnAmount > 3}">
            <div data-sly-resource="${'column-4' @ decorationTagName='div', resourceType='ccx-commons/components/utils/responsivegrid'}"></div>
        </sly>
    </div>
</sly>

Thanks once again @arunpatidar , @HrishikeshKa 

[HrishikeshKa]

HI @Rajumuddana ,

By default, the Column Control component in AEM allows you to set a fixed number of columns using the columnAmount property. However, if you want to have different numbers of columns for the Column Control component on load for different templates, you can achieve this by customizing the component's logic.

Here's a general approach to implement this customization:

1. Create a new component that extends the Column Control component. This new component will serve as a wrapper for the original Column Control component.

2. In the new component, create a new dialog field (e.g., templateColumns) to specify the number of columns for each template. This field will allow authors to set different numbers of columns for different templates.

3. In the new component's HTL file, retrieve the current template path and use it to determine the number of columns to display. You can use the templateColumns field value from the dialog to map the template path to the corresponding number of columns.

4. Pass the calculated number of columns to the original Column Control component as a property.

Here's an example of how the HTL file of the new component could look like:

<sly data-sly-use.templatePath="com.adobe.cq.wcm.core.components.models.TemplatePath">
    <!-- Get the current template path -->
    <sly data-sly-test="${templatePath.templatePath}">
        <!-- Determine the number of columns based on the template path -->
        <sly data-sly-test="${properties.templateColumns}">
            <sly data-sly-test="${properties.templateColumns[templatePath.templatePath]}">
                <!-- Pass the number of columns to the original Column Control component -->
                <sly data-sly-resource="${'columncontrol' @ columnAmount=properties.templateColumns[templatePath.templatePath]}"></sly>
            </sly>
        </sly>
    </sly>
</sly>

In this example, the templatePath object is used to retrieve the current template path. The templateColumns field from the dialog is used to map the template path to the corresponding number of columns. The calculated number of columns is then passed to the original Column Control component using the columnAmount property.

By customizing the Column Control component in this way, you can set different numbers of columns for the component on load for different templates in AEM 6.5.

[Rajumuddana]

Hi @HrishikeshKa ,

Thanks for you response.

I didn't get that completely.

first of all,

1. The no.of 'columns - templates', no need to be authored by Authors.
2. Only, initially(on first drop of component) i should show different columns in different template pages, later all the 'column control' components should work similar way based on the selection of columns count dropdown value from component dialog.

let me know if i'm not clear.

[HrishikeshKa]

Hi @Rajumuddana ,

Sure, I understand now. You want the Column Control component to automatically adjust the number of columns based on the template it's placed in upon initial creation, without requiring authors to specify it manually. After the initial setup, authors should be able to adjust the number of columns through a dropdown in the component dialog, and this setting should persist across different pages/templates.

To achieve this:

1. Automatic Adjustment of Columns on Initial Creation:

   • You can achieve this by customizing the component's logic to automatically detect the template it's placed in and set the number of columns accordingly.
   • This can be done in the component's HTL file by retrieving the current template path and mapping it to a predefined set of column counts.

2. Persistent Column Count Setting:

   • Once the component is dropped onto a page and the initial column count is set based on the template, you can provide authors with a dropdown in the component dialog to adjust the number of columns.
   • The selected column count should be stored as a property of the component node in the repository so that it persists across different pages/templates.

Here's how you can modify the approach to achieve this:

1. Automatic Adjustment of Columns on Initial Creation:

   • Implement logic to automatically detect the template path and set the number of columns accordingly, without relying on author input.
   • This can still be done in the new component's HTL file as described earlier, but instead of using a dialog field for authors to specify column counts, you'll map template paths to predefined column counts within the HTL logic itself.

2. Persistent Column Count Setting:

   • After the initial setup, allow authors to adjust the number of columns through a dropdown in the component dialog.
   • When the author selects a different column count, update the component's property in the repository to reflect the new setting.
   • Ensure that the component retrieves this property value when rendering, so it uses the correct number of columns based on the author's selection.

This modified approach should meet your requirements: automatically setting the column count based on the template upon initial creation and allowing authors to adjust the column count through the component dialog, with the selected setting persisting across different pages/templates.

[kautuk_sahni]

@Rajumuddana I hope you found the AEM community helpful. We look forward to seeing you return as either a learner or a mentor. The community flourishes with SMEs like you. Happy AEM learning!