Skip to main content

AEM 6.3 - How to extend Granite UI


Here in this article, I am going to explain how to extent Granite UI that is basically used to create AEM 6.x consoles.

There can be various use cases where in you may need that. In our case, author wants to take all the page creation requests through AEM instead of email communication. Authors are basically looking for a form in AEM authoring console so that requestor can login and submit page creation/Asset upload request.

Overall requirement is -

  1. Need a link in Navigation so that author can click on it and go to a Intake form.
  2. Author must be able to fill and save the intake requests.
  3. Author must be able to see the history of submitted intake requests
  4. Able to see the details of submitted intake requests.

Solution -

1. Create a following structure - /apps/cq/core/content/nav/form and add the details given in below screenshot -




You basically need to add - href, title and icon. Href is the path of page where user will land on clicking it. 



After that, you will be able to see the icon in Navigation as shown below -


2. Next task is to create the Intake form, History and details pages. Lets start with request form -

Request form -

In order to create the request form, I have used sling:resourcesupertype - granite/ui/components/shell/page. Shell page actually give screens, AEM console like look and feels. 



 Create head, content, title and action nodes under page as per the screenshots -

Mention client libs as - coralui3, granite.ui.coral.foundation, granite.cloudviz, granite.operations.monitoring



content node's sling super type would be  - granite/ui/components/coral/foundation/container


Under Items, create one more node and give resourcetype of your component that you want to render as intake form - intakeform/components/content/request


Create title node and mention text and resourceType as - granite/ui/components/coral/foundation/text


Create History button with supertype - granite/ui/components/coral/foundation/anchorbutton


Component intakeform/components/content/request, looks like -


 It is written in JSP.

After doing all these efforts, request form will look like -



Similarly you can create History page and Details page -




Here is the package attached, you can install and go through it -

https://bitbucket.org/sujeetsharma1980/extendgraniteui.git



Note : There screens are dummy screens, you can write backend code for the same.



Let me know if you have any question.








Comments

Post a Comment

Popular posts from this blog

AEM 6.3 - Check if page is published or not

If you want to know if the page is published or not you can use the below utility method to know if the page is published or not. Steps - Take Resource Object. Adapt it to Page Adapt page to ReplicationStatus, you will get the status Here is the code - public static Boolean isPublished(Resource resource) { Boolean activated; ReplicationStatus status = null; activated = false; if (resource != null) { try { Page page = resource.adaptTo( Page.class ); status = page.adaptTo( ReplicationStatus.class ); } catch (Exception e) { LOG.debug(e.getMessage (), e); } if (status != null) { activated = status.isActivated(); } } return activated; }
Post a Comment
Read more

Forecasting EB-2/EB-3 Green Card Filing Dates - Machine Learning Model

In this blog post, we'll explore the process of forecasting Green Card filing dates using a simple linear regression model in Python. By analyzing historical data from the United States Citizenship and Immigration Services (USCIS), we can use basic machine learning techniques to predict future filing dates. I will walk you through the process step-by-step. Gathering Data:    To begin our journey, we need to gather relevant data. You can collect data from USCIS or other trustworthy sources. This dataset should include essential information such as the visa category, country of chargeability, and the final action date for each month. For this use case, I collected data manually from USCIS visa bulletin for India EB-2 and EB-3 categories. Data looks like this - Visa bulletin - Building the Linear Regression Model:    Using Python libraries like scikit-learn, we can construct our linear regression model. This simple yet powerful algorithm will help us forecast Green Card...
Post a Comment
Read more

CQ Page Properties from Javascript

To get CQ page properties inside javascript you can use core CQ JS API. It can be convenient if you need to get this information inside your custom JS widgets.              var pageData = CQ.HTTP.get(CQ.HTTP.externalize(CQ.utils.WCM.getPagePath() + "/jcr:content.json")); After that you can retrieve any property you need (assuming it's present in JCR):              var resourceType = pageData ? CQ.Util.formatData(CQ.HTTP.eval(pageData))['sling:resourceType'] : null; Please do not overuse it because it invokes additional ajax call to server. It's OK to use it in edit mode on author instance. Copied from -  http://adobecms.blogspot.com/2014/04/cq-page-properties-in-javascript.html
Post a Comment
Read more