Hi @vishal_kagde ,
This rule flags usage of outdated UI components like:
granite/ui/components/foundation/...
granite/ui/components/coral/foundation/...
These were part of older versions of Granite UI (based on Coral 2) and are no longer recommended. AEMaaCS expects you to use Coral 3-based components, which follow Adobe's latest UI standards.
Step 1: Get the Full Error Report
After the pipeline fails, go to the failed Code Quality step and:
- Click "Download Report"
- Open the ZIP and look at the index.html file inside
- Find the CQBP-84 section — this will show exactly where the deprecated components are used (file path and line number)
This saves you from manually digging through dozens of dialogs.
Step 2: Update the Dialogs
Look for any usage of granite/ui/components/foundation/... or coral/foundation in your dialogs (typically inside .content.xml or .xml under cq:dialog).
Here’s an example:
<!-- Deprecated -->
<myField
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
name="./title"
fieldLabel="Title"/>
Update it to use the Coral 3 version:
<!-- Compliant -->
<myField
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
name="./title"
fieldLabel="Title"/>
Repeat this for all deprecated resource types in your dialogs and components.
Step 3: Run Checks Locally Before Committing
To avoid pipeline failures, you can run the same analysis locally using Adobe's AEM Analyzer plugin.
Add this plugin to your pom.xml:
<plugin>
<groupId>com.adobe.aem</groupId>
<artifactId>aemanalyzer-maven-plugin</artifactId>
<version>latest</version>
<executions>
<execution>
<goals>
<goal>analyze</goal>
</goals>
</execution>
</executions>
</plugin>
Then run:
mvn clean install -Pcloud-manager-analyze
This will generate the same code quality report locally, so you can catch and fix issues early.
Step 4: Follow Adobe’s UI Best Practices
When building dialogs or authoring interfaces for AEMaaCS:
- Use Coral 3-based Granite UI components only
- Stick to modern field types under: granite/ui/components/coral/foundation
- Avoid any legacy Classic UI patterns or foundation components
- Use AEM Project Archetype to bootstrap compliant projects
Spot Deprecated Code Quickly
If you’re using IntelliJ or VS Code, try searching for:
granite/ui/components/foundation/
This helps locate all outdated components across the project in seconds.
Regards,
Amit