The helpPath configuration property is often used in AEM components or templates to specify the location where users can access contextual help documentation related to the specific component or template. This can be helpful for content authors and administrators who need guidance on how to use certain features or elements within the AEM interface.

By setting the helpPath property, you provide a reference to the relevant documentation that users can access directly from the AEM interface, making it easier for them to understand and work with different components and features. Clicking on the help path will redirect the author to documentation which may be useful for them to understand how the component works as expected.

Keep in mind that the exact implementation and usage of helpPath can vary based on the specific version of AEM and the customizations made by the organization. Always refer to the official AEM documentation or any relevant resources specific to your version of AEM for the most accurate and up-to-date information.

Example Code

The post Granite UI, Touch UI helpPath appeared first on Sourced Code.

Before we solve this issue, you must understand that AEM templates are made up of two different types of templates; static templates and editable templates. Static templates ensure that template structures are only created and modified by the developer, while editable templates are template structures that can be created and modified by the authors.

In this article, you will be given instructions on how to enable allowed components to be used on Static templates & Editable Templates.

1. How to allow components to be use on Static Templates
2. How to allow components to be use on Editable Templates

A. How to allow components to be use on Static Templates

After the creation of the page using a static template, follow the steps below to enable components. Please make sure the steps below are followed when you have the page opened.

1. On a static AEM template, you will realize that the parsys has no available components. From the component finder, you can find empty results.

2. From the page, enter design mode by clicking on the top right drop-down button; select on “design” and the page will flash. (if not please refresh the page).

3. Click on the target parsys, and click on the page icon; this should make visible of Touch UI modal with options inside.

4. Select components via group or individual component’s that you would like to enable, and then click on save.

5. Making sure you refresh the page, and navigate back to “edit” mode (by clicking on the drop down in the top right hand side), scroll down to the page to the target parsys. Now you should see a + button when you click on it. In the component’s finder, you are able to see the available components too. At this point, you should be able to drag and drop components into the parsys.

When the configuration is enabled allow component’s to be used on a page, developers should find the configuration saved in CRX/DE, /etc/designs/my-site/jcr:content/${template}. Making sure if you are a developer, save this configuration into your code to ensure that the configurations. You’ll realize in the node consist of a new property named “components”; this is where the configuration is saved.

B. How to allow components to be use on Editable Templates

After the creation of the page using an editable template, follow the steps below to enable components. Please make sure the steps below are followed when you have the page opened.

1. On a editable AEM template, you will realize that the parsys has no available components. From the component finder, you can find empty results.

2. From the top left options of the editor.html, click on the second icon. A drop down should be visible. Click on the “edit template” button, and you should be redirected to the editable template page.

3. From the editable template page, click on the target parsys; there should be some options made visible. Click on the icon that looks like a cog, and the components policies UI should be visible.

4. Polices UI

Editable templates handles allowed component’s configuration differently than static templates. They are defined with component policies. Component policies are configurations that is saved under /conf/my-product/wcm/*; and will be bound to a component. Unlike static templates, these configurations can be shared (which means that you can define a policy once, and re-use it over and over again without the overhead of redefining these again). When you see “Select Policies”, these are policies that are defined by either the developer or super author.

If your organization already configured some component policies, then some options will be visible, and if not, create your own! Most of the time, there will be some pre-configured options for you to select. Please understand that component policies are binding to one component (most common component policies be configured, will be the wcm/foundation/components/responsivegrid component (after all, this out of the box component created by Adobe allows content authors to drag and drop components on to the page).

In this scenario, we will create a new policy. We add in a title and description, so that in the future, other editable templates that are created can re-use this policy. Next select the component group of individual components that you will want to be allowed on the page. Click save.

5. Making sure you refresh the page, and head back to “edit” mode (by clicking on the drop down in the top right hand side), scroll down to the page to the target parsys. Now you should see a + button when you click on it. In the component’s finder, you are able to see the available components too. At this point, you should be able to drag and drop components into the parsys.

The post AEM Components are not showing up on Page Templates appeared first on Sourced Code.

These are the common questions we have when we are trying to figure out the number of use and the node-paths of the targeted searched component within the Java content repository, known as “JCR”. In this article, you will discover one of the quickest techniques used to retrieve the total number of uses and node-paths of a component within the JCR by using the Query Builder API, query debugger tool.

If you don’t have certain user priveledges within your AEM instance, there’s another way to find out the usage of your component(s), Components Console; however, the Components Console is restricted in a sense where the component search results-list only display pages of a given component and does not provide a total number of how many pages are returned from the search.

1. Component Search by the Query Builder API, Query Builder Debugger Tool

The AEM Query Builder is an API which can be used to search for nodes in JCR. Well defined “Predicates” are typically created from using the Query Builder Debugging Tool, as this tool serves instant search results within the UI.

Step 1: With your running AEM instance, visit http://localhost:4502/libs/cq/search/content/querydebug.html.

Step 2: Paste in the search query below & hit search; view screenshot.
Replace with your component’s path: weretail/components/content/heroimage
Note!: sometimes the descendant path must be more nested, so /content/we-retail/gb/en

This query searches for all types of nodes with the sling:resourceType equals to the value, weretail/components/content/heroimage, and where the path is descendant from /content/we-retail; to learn more about the Query builder API and queries, click here (Adobe Documentation)

Step 3: Review the results.

2. Component Search by the Components Console

This out of the box Components Console, CC, is available from AEM 6.2+ right under Tools -> General -> Components. The CC displays search results in a form of pages where the component is being used; rather than each node from the example above. This console is accessible to authors so that even they can check for which pages use the searched component.

Step 1: Within your running AEM instance, visit http://localhost:4502/libs/wcm/core/content/sites/components.html.

Step 2: Search for a component. Insert your search criteria with either by “keyword”, “component path”, or “component group”. On every change of the search criteria, you should see results in a list format on the right hand side of the search left side bar.
Step 3: Click on the targeted component, and you will be redirected to the details page.
Step 4: From the details page, click on “live usage”, and a results-list of pages will be displayed, where the targeted component can be found.
Step 5: From the results-list, clicking on a link will open the page’s editor.

Components Console – Steps 2 & 3

Components Console – Steps 4 & 5

The post How many times is an AEM Component used in the JCR? appeared first on Sourced Code.