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

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

How Catalan Numbers Help in Solving DSA Problems?

Catalan numbers are a sequence of natural numbers that appear in various combinatorial problems, often related to recursively defined structures. These numbers are widely used in counting problems, particularly in dynamic programming and combinatorics. The sequence of Catalan numbers starts as follows: C 0 = 1 , C 1 = 1 , C 2 = 2 , C 3 = 5 , C 4 = 14 , C 5 = 42 , … C_0 = 1, C_1 = 1, C_2 = 2, C_3 = 5, C_4 = 14, C_5 = 42, \dots Formula for Catalan Numbers The n-th Catalan number can be computed using the following formula: C n = ∑ i = 0 n − 1 C i ⋅ C n − i − 1 C_n = \sum_{i=0}^{n-1} C_i \cdot C_{n-i-1} Alternatively, it can be expressed using the binomial coefficient: Catalan numbers are a sequence of natural numbers that appear in various combinatorial problems, often related to recursively defined structures. These numbers are widely used in counting problems, particularly in dynamic programming and combinatorics. The sequence of Catalan numbers starts as follows: Formula for Catalan ...
Post a Comment
Read more