The AEM sites console http://localhost:4502/sites.html/content can list the AEM pages in List, Column and Card view.
Column View
To check the page status for example if the page is published or not, you need to click on individual page. Due to that the overall pages status in not visible in a glance.
Maximum number of AEM user use this view to navigate through the pages.
Card View
Card view at other hand gives you more information as compare to Column view like locked and Publish/not publish
List View
List view provide more information and option to add/remove columns via settings
but none of the view gives more accurate information like
if the page is unpublished that means is it never published or unpublished later?
Whether the page is modified after the publish or before the publish?
And it is impossible to get all this information visually.
The same concern and improvement demand is raised by AEM Community User at https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-ideas/published-status-visualization/idc-p/461069
What can be done to improve visualisation
The inspiration can be taken from classic UI to show color indicators or something new can be introduce.
At https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-ideas/published-status-visualization/idc-p/461069 some ideas are proposed, If Adobe bring this change would be good for Authors
One of the idea which I implemented as part of PoC looks like
The color/icon indicators represent the following
Page is published, after publish no modifications are took place
This page is locked
Page is unpublished, after unpublish no modifications are done
Page is published, after publish modifications are took place
Page is published and locked, after publish no modifications are took place
This page is locked and modified 
Page is published and locked, after publish modifications are done.I am not an UX expert but this is just an attempt to implement the concept of visualisations
PoC Implementation
The implementation is done only for column view in this PoC, this is done in AEM as a cloud service, so may not work in other version of AEM- The sites column view is generated by /libs/wcm/core/content/sites/jcr:content/views/column resource
- The children resources for column collected by /libs/wcm/core/content/sites/jcr:content/views/column/datasource,
- The column item rendering is done by /libs/cq/gui/components/coral/admin/page/columnitem
To add the extra status in column view item response
- /libs/wcm/core/content/sites/jcr:content/views/column/datasource has to be overlay
- New column item renderer need to be created similar to /libs/cq/gui/components/coral/admin/page/columnitem
- Add CSS to style the visualisation.
1. Create Custom columnitem resource
copy /libs/cq/gui/components/coral/admin/page/columnitem in apps e.g. /apps/custom/columnitem
update the columnitem.jsp at /apps/custom/columnitem/columnitem.jsp to add following line of code after line progressTracker.log("completed lastModified handling");
make sure you have opened and closed JSP tags properly.
// Adding new property START
Resource jcrItem = resource.getChild(JcrConstants.JCR_CONTENT);
String replicationAction = "";
boolean lockStatus= false;
boolean lastModifiedStatus = false;
if(null !=jcrItem){
ValueMap vm = jcrItem.getValueMap();
replicationAction = vm.get("cq:lastReplicationAction", String.class) != null ? vm.get("cq:lastReplicationAction", String.class) : "false";
lockStatus = vm.get("jcr:lockOwner") != null ? true : false;
Calendar createdDate = vm.get("jcr:created",Calendar.class);
Calendar lastModifiedDate = vm.get("cq:lastModified",Calendar.class);
Calendar lastlastReplicatedDate = vm.get("cq:lastReplicated",Calendar.class);
if(lastlastReplicatedDate != null && lastModifiedDate !=null){
lastModifiedStatus = lastModifiedDate.getTimeInMillis() > lastlastReplicatedDate.getTimeInMillis() ? true : false;
}
else if(createdDate != null && lastModifiedDate !=null){
lastModifiedStatus = (int) lastModifiedDate.getTimeInMillis()/1000 > (int) createdDate.getTimeInMillis()/1000 ? true : false;
}
}
%>
<div class="coral-columnview-item-extra-status">
<% if(lockStatus){%>
<coral-icon size="S" icon="lockOn"></coral-icon>
<% }
if(replicationAction.equals("Activate")){%>
<coral-icon size="S" icon="globeCheck"></coral-icon>
<% }
if(replicationAction.equals("Deactivate")){%>
<coral-icon size="S" icon="globeRemove"></coral-icon>
<%}
if(lastModifiedStatus){%>
<coral-icon size="S" icon="edit" content="<%= lastModifiedStatus %>"></coral-icon>
<% }%>
</div>
<% // Adding new property END
2. Overlay
Overlay /libs/wcm/core/content/sites/jcr:content/views/column/datasource to /apps/wcm/core/content/sites/jcr:content/views/column/datasourcecopy the all the properties of /libs/wcm/core/content/sites/jcr:content/views/column/datasource to /apps/wcm/core/content/sites/jcr:content/views/column/datasource
update the itemResourceType property to use custom columnitem created in Step1
2. CSS/Styling
Create an clientlibs of category cq.listview.coral.columns.personalization only for css e.g. /apps/custom/author/clientlib-sites-colorcreate color.css with following css rules
.coral-columnview-item-extra-status{
order: 1;
}
.coral-columnview-item-extra-status coral-icon{
height:40px;
}
.coral-columnview-item-extra-status ~ svg._coral-AssetList-itemChildIndicator{
margin-right: 10px;
}
.coral-columnview-item-extra-status [icon="edit"]{
background-color: #cfe4ec;
color: #2466b3;
}
.coral-columnview-item-extra-status [icon="lockOn"]{
background-color: #a39f9f;
color: #746f6f;
}
.coral-columnview-item-extra-status [icon="globeCheck"]{
background-color: #8ed58ea8;
color: #1e481e;
}
.coral-columnview-item-extra-status [icon="globeRemove"]{
background-color: #eac1c1;
color: #b23232;
}
Sample package to try this in local (only for AEMaaCS)
Conclusion
People with access to an AEM author should be able to be quick in recognizing a node as “never published”, “published”, “unpublished”, “modified” and/or “locked”.
If the three view modes would be enriched with colours a user would immediately see what status a node is in. Imagine if such colours: red = unpublished, green = published, blue = modified, grey = locked, no colour = never published.
If the three view modes would be enriched with colours a user would immediately see what status a node is in. Imagine if such colours: red = unpublished, green = published, blue = modified, grey = locked, no colour = never published.
No comments:
Post a Comment