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

Search engine optimization in CQ

SEO Optimization Search engine optimization ( SEO ) is the process of affecting the visibility of a website or a web page in a search engine 's "natural" or un-paid (" organic ") search results . Source : Wiki Whenever you enter a query in a search engine and hit 'enter' you get a list of web results that contain that query term. Users normally tend to visit websites that are at the top of this list as they perceive those to be more relevant to the query. If you have ever wondered why some of these websites rank better than the others then you must know that it is because of a powerful web marketing technique called Search Engine Optimization (SEO) . SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. SEO thus helps you get traffic from search engines.  HTML Tags and SEO Here is the list of important html tags which help search engine t
9 comments
Read more

Create Your Own Private Ethereum Blockchain

Prerequisites You need to have Geth installed. The easiest way to do this is through homebrew. Open Terminal and  install homebrew ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. Now  install geth brew tap ethereum/ethereum brew install ethereum Create Genesis File The Genesis  block  is the first block in the chain, the Genesis  file  is a JSON file that defines the characteristics of that initial block and subsequently the rest of the blockchain. Create a directory to hold your network files mkdir my-eth-chain cd my-eth-chain 2. Create your genesis file touch myGenesis.json 3. Open your genesis file and paste the following { "config": { "chainId": 1994, "homesteadBlock": 0, "eip155Block": 0, "eip158Block": 0, "byzantiumBlock": 0 }, "difficulty": "400", "gasLimit": "2000000", "alloc"
2 comments
Read more