How to Configure Components Efficiently in AEM with Parameterized Namespace include
Prerequisites
- AEM development environment set up
- AEM version 6 or above
- ACS AEM(my version 5.1.2) Commons library must be installed in your AEM instance.
- Understanding of the Granite UI framework
Adobe Experience Manager (AEM) is a powerful web content management system that allows developers to create and manage digital experiences across various channels. One of its key features is the Granite UI framework, which provides a flexible and extensible way to build user interfaces.
This blog post explores the concept of importing and configuring components using the Granite UI framework. Specifically, it focuses on the “acs-commons/granite/ui/components/include” resource type, which allows us to import and include other components within a page or component in AEM. This feature provides a powerful mechanism for code reuse, making development more efficient and maintaining consistency across the application.
The blog post uses an example scenario to demonstrate how to use the “acs-commons/granite/ui/components/include” resource type to import and share a centralized configuration for colors across multiple components.
By the end of the blog post, you will have a basic understanding of how to import and configure components using the Granite UI framework in AEM.
Granite Include
One of the key features of AEM is the ability to import and configure components using the Granite UI framework. In this blog, we’ll look at how we can import the configuration and set parameters using the “acs-commons/granite/ui/components/include” resource type. The “acs-commons/granite/ui/components/include” resource type is used to import and include other components within a page or component. This allows us to reuse existing components and configurations, making development faster and more efficient.
In my case, I had requirements for different components that needed either a background color or a button color, both of which would use the same color swatches. Writing the color configuration for each component separately would be redundant. Instead, I decided to create a common configuration that could be included in multiple components. This would not only ensure consistency but also allow for easy integration into future components. To import the “color” configuration, we can use the “path” parameter within the “acs-commons/granite/ui/components/include” component, like this.
The color configuration:
The Button Component configuration:
Here, we are using the “colorfield” tag to include the “color” configuration from the “myProject/components/common/configs/colorconfig” path. This configuration includes a set of predefined colors that can be used within the component to select a background color for the button. Once we have imported the “color” configuration, we can set parameters to configure the behavior and appearance of the component. We have set the following parameters in this case, as shown in the image above.
It contains a set of parameters defined within the “parameters” block to specify the field description, field label, and field key for the component. The “fieldDescription” parameter provides a description of the field’s purpose, which is to “Choose the font color of the button”. The “fieldLabel” parameter specifies the label that will be displayed for the field, which is “Font color.” Finally, the “fieldKey” parameter specifies the key that will be used to identify the field, which is “color.”
By importing the “color” configuration and setting these parameters, we have created our button component, and we can use this “color” configuration throughout our AEM pages and components.
The Button Component:
Conclusion
Overall, the “acs-commons/granite/ui/components/include” resource type and the “parameters” parameter are powerful tools for importing and configuring components in AEM. By using these tools effectively, we can build custom features and functionality that meet the unique needs of our users and our business. Follow us on social media for more updates, and check out our other blog posts for more insights.
References
