If you look at the Siteadmin board of AEM, page titles are displayed in tree hierarchy in Classic UI. However if you see the same in Touch page are created in http://localhost:4502/sites.html/content.
All the pages can be shown in different views
1. Card View
2. Column View
3. List View
In both the views(Classic/Touch) page title are displayed.
In this blog we will learn how to display page name in place of page title.
1. Card View
2. Column View
3. List View
In both the views(Classic/Touch) page title are displayed.
In this blog we will learn how to display page name in place of page title.
Solution for Classic UI:
First, we should know from where these values are coming.
In Classic UI "/libs/cq/ui/widgets/source/ext/override/widgets/tree/TreeNodeUI.js" is responsible for tree hierarchy in Siteadmin.
Fig - Highlighted code need to update in TreeNodeUi.js |
In TreeNodeUI.js file, Go to Line No-85 and find the below code.
We need to change the above code with below code
Classic UI Site Admin
Classic UI Site Admin
Fig- Classic Ui Site Admin in Card view with existing and updated feature |
Solution for Touch UI:
In the Card View: This script "/libs/cq/gui/components/coral/admin/page/card/card.jsp" helps to render the page list in card view.
Fig- Touch Ui Site Admin in Card view with existing and updated feature |
In the Column View:
The script "/libs/cq/gui/components/coral/admin/page/columnitem/columnitem.jsp" handles the column View and
this script "/libs/cq/gui/components/coral/admin/page/columnpreview/columnpreview.jsp"
this script "/libs/cq/gui/components/coral/admin/page/columnpreview/columnpreview.jsp"
handles the preview of column view.
Fig- Touch Ui Site Admin in Column view with existing and updated feature |
Column Preview
Fig- Touch Ui Site Admin in Column view with existing and updated feature |
In the List View:
The script "/libs/cq/gui/components/coral/admin/page/row/row.jsp" renders the list view.
Fig- Touch Ui Site Admin in List view with existing and updated feature |
To make changes in jsp files of all views:
Replace this line:
to
But Ideally we don’t make any change in /libs/hierarchy, so we are overlaying this part of /libs in /apps and making modification in /apps hierarchy
This is how, we can replace pageTitle with pageName in tree hierarchy in both the consoles(Classic and touch UI).
You can find code for the same also while downloading the package.
Demo Package Install
If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com.
You can find code for the same also while downloading the package.
Demo Package Install
If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com.
Hope it will help you guys !!👍
Thanks and Happy Learning 😊
Nice Post
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteA good demo to understand AEM Sling Resource Overlay.
ReplyDeleteHow did you find out these jsps or js to replace title with name? I mean can you please let me know the steps to reach to these files.
ReplyDelete