{"id":57722,"date":"2023-07-10T11:31:27","date_gmt":"2023-07-10T06:01:27","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=57722"},"modified":"2024-06-10T15:38:25","modified_gmt":"2024-06-10T10:08:25","slug":"how-to-configure-components-efficiently-in-aem-with-parameterized-namespace-include","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-configure-components-efficiently-in-aem-with-parameterized-namespace-include\/","title":{"rendered":"How to Configure Components Efficiently in AEM with Parameterized Namespace include"},"content":{"rendered":"<h3><b>Prerequisites<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">AEM development environment set up<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">AEM version 6 or above<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">ACS AEM(my version 5.1.2) Commons library must be installed in your AEM instance.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Understanding of the Granite UI framework<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This blog post explores the concept of importing and configuring components using the Granite UI framework. Specifically, it focuses on the &#8220;acs-commons\/granite\/ui\/components\/include&#8221; 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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The blog post uses an example scenario to demonstrate how to use the &#8220;acs-commons\/granite\/ui\/components\/include&#8221; resource type to import and share a centralized configuration for colors across multiple components.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<h3><b>Granite Include<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">One of the key features of AEM is the ability to import and configure components using the Granite UI framework. In this blog, we&#8217;ll look at how we can import the configuration and set parameters using the <\/span><b>&#8220;acs-commons\/granite\/ui\/components\/include&#8221;<\/b><span style=\"font-weight: 400;\"> resource type. The <\/span><b>&#8220;acs-commons\/granite\/ui\/components\/include&#8221;<\/b><span style=\"font-weight: 400;\"> 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.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">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 <\/span><b>&#8220;color&#8221;<\/b><span style=\"font-weight: 400;\"> configuration, we can use the <\/span><b>&#8220;path&#8221;<\/b><span style=\"font-weight: 400;\"> parameter within the <\/span><b>&#8220;acs-commons\/granite\/ui\/components\/include&#8221;<\/b><span style=\"font-weight: 400;\"> component, like this.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The color configuration:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-57718\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-12-10-19-3.png\" alt=\"color configuration\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-12-10-19-3.png 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-12-10-19-3-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-12-10-19-3-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-12-10-19-3-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p>The Button Component configuration:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-57761 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-12-10-43-41-1.jpg\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-12-10-43-41-1.jpg 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-12-10-43-41-1-300x127.jpg 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-12-10-43-41-1-768x325.jpg 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/07\/Screenshot-from-2023-07-12-10-43-41-1-624x264.jpg 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here, we are using the <strong>&#8220;colorfield&#8221;<\/strong><\/span><span style=\"font-weight: 400;\">\u00a0tag to include the <\/span><b>&#8220;color&#8221;<\/b><span style=\"font-weight: 400;\"> configuration from the <\/span><b>&#8220;myProject\/components\/common\/configs\/colorconfig&#8221;<\/b><span style=\"font-weight: 400;\"> path. This configuration includes a set of predefined colors that can be used within the component to select a background color for the button. <\/span><span style=\"font-weight: 400;\">Once we have imported the <\/span><b>&#8220;color&#8221;<\/b><span style=\"font-weight: 400;\"> configuration, we can set parameters to configure the behavior and appearance of the <\/span><span style=\"font-weight: 400;\">component. We have set the following parameters in this case, as shown in the image above.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It contains a set of parameters defined within the <strong>&#8220;parameters&#8221;<\/strong> block to specify the field description, field label, and field key for the <\/span><span style=\"font-weight: 400;\">component. The <\/span><b>&#8220;fieldDescription&#8221;<\/b><span style=\"font-weight: 400;\"> parameter provides a description of the field&#8217;s purpose, which is to <\/span><b>&#8220;Choose the font color of the button&#8221;<\/b><span style=\"font-weight: 400;\">. The <\/span><b>&#8220;fieldLabel&#8221;<\/b><span style=\"font-weight: 400;\"> parameter specifies the label that will be displayed for the field, which is <\/span><b>&#8220;Font color.&#8221;<\/b><span style=\"font-weight: 400;\">\u00a0Finally, the <\/span><b>&#8220;fieldKey&#8221;<\/b><span style=\"font-weight: 400;\"> parameter specifies the key that will be used to identify the field, which is <\/span><b>&#8220;color.&#8221;<\/b><\/p>\n<p><span style=\"font-weight: 400;\">By importing the <\/span><b>&#8220;color&#8221;<\/b><span style=\"font-weight: 400;\"> configuration and setting these parameters, we have created our button <\/span><span style=\"font-weight: 400;\">component, and we can use this <strong>&#8220;color&#8221; <\/strong>configuration throughout our AEM pages and components.\u00a0<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p>The Button Component:<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-57721\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-13-25-55.png\" alt=\"Button Component authoring\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-13-25-55.png 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-13-25-55-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-13-25-55-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/Screenshot-from-2023-06-30-13-25-55-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<h3><b>Conclusion<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Overall, the <\/span><b>&#8220;acs-commons\/granite\/ui\/components\/include&#8221;<\/b><span style=\"font-weight: 400;\"> resource type and the <\/span><b>&#8220;parameters&#8221;<\/b><span style=\"font-weight: 400;\"> 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.\u00a0<\/span><\/p>\n<h3><b>References<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/adobe-consulting-services.github.io\/acs-aem-commons\/features\/granite\/parameterized-namespace-include\/index.html\"><i><span style=\"font-weight: 400;\">https:\/\/adobe-consulting-services.github.io\/acs-aem-commons\/features\/granite\/parameterized-namespace-include\/index.html<\/span><\/i><\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1600,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":189},"categories":[5868],"tags":[5279,4847,1657,5280],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57722"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1600"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57722"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57722\/revisions"}],"predecessor-version":[{"id":57763,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57722\/revisions\/57763"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}