Display Name instead of Page Title in Site admin (Classic and Touch UI) in AEM 6.2

If you look at the Siteadmin board of AEM, page titles are displayed in the tree hierarchy in Classic UI. However, if you see the same in the 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 is displayed.
In this blog, we will learn how to display the page name in place of the page title.

Solution for Classic UI:
First, we should know 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 the TreeNodeUI.js file, Go to Line No-85 and find the below code.

a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">',
CQ.shared.XSS.getXSSValue(n.text.replace(/&lt;/g, "<")),"</span></a></div>"

We need to change the above code with the below code

a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">',
CQ.shared.XSS.getXSSValue(n.attributes.name.replace(/&lt;/g, "<")),"</span></a></div>"

Classic UI Site Admin

Fig- Classic Ui Site Admin in Card view with an 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 an 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"
handles the preview of column view.

Fig- Touch Ui Site Admin in Column view with an existing and updated feature
Column Preview


Fig- Touch Ui Site Admin in Column view with an existing and updated feature

In the ListView:
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 an existing and updated feature
To make changes in jsp files of all views:
Replace this line:
title = cqPage.getTitle() == null ? cqPage.getName() : cqPage.getTitle();

to title = cqPage.getName();

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 the tree hierarchy in both the consoles(Classic and touch UI).

You can find a code for the same also while downloading the package.
Demo Package Install