AEM Assets Home page (on AEM 6.1) pro­vides a rich and per­son­al­ized Wel­come Screen expe­ri­ence. Did you know you can fur­ther cus­tomize the expe­ri­ence to suit your spe­cif­ic needs? For exam­ple, you can include addi­tion­al nav­i­ga­tion­al links (in addi­tion to fold­ers, col­lec­tions, and cat­a­logs) to quick­ly nav­i­gate to your favorite places. You can also add cus­tom wid­gets and cus­tomize the default con­fig­u­ra­tion work­flow for the Assets Home page.

The fol­low­ing exer­cis­es enable you to add nav­i­ga­tion­al links and wid­gets to the Assets Home page and alter its con­fig­u­ra­tion work­flow.

Prerequisites:

Enable the Assets Home page expe­ri­ence using the steps in AEM Assets Home Page Expe­ri­ence.
Impor­tant: To ensure that you do not lose your changes, press Save after you cre­ate, update, or edit a node or prop­er­ty.

Exercise 1: Add navigational links to the home page

  1. Nav­i­gate to http://localhost:4502/crx/de.
  2. Nav­i­gate to /libs/dam/gui/content/welcome/jcr:content/body/content/header/items/default/items.
  3. Right-click the node, and select Over­lay under /apps with the check­box select­ed.
  4. Nav­i­gate to /apps/dam/gui/content/welcome/jcr:content/body/content/header/items/default/items.
  5. Cre­ate a node of type nt:unstructured, and name it geometrixx.
  6. Add the fol­low­ing prop­er­ties to the node geometrixx:
Name Type Val­ue
con­tentRen­der­er String granite/ui/components/endor/actionbar/hyperlink
href String /assets.html/content/dam/geometrixx
icon String icon-face­book­Cov­er­Im­age
rel String cq-damad­min-admin-actions-fold­er­snav­i­ga­tion-acti­va­tor
sling:resourceType String granite/ui/components/endor/actionbar/hyperlink
text String Geometrixx
title String Geometrixx
  1. Cre­ate a node under the geometrixx node of type nt:unstructured, and name it lay­out­Con­fig.
  2. Add the fol­low­ing prop­er­ty to the node lay­out­Con­fig:
Name Type Val­ue
align String right
  1. Ver­i­fy that geometrixx but­ton appears on tool­bar.

Exercise 2: Add Assets Home page custom widget

  1. Over­lay /libs/dam/gui/components/admin/welcome/widgets/discover under /apps.
  2. Over­lay /libs/dam/gui/components/admin/welcome/widgets/renderer under /apps.
  3. Cre­ate a fold­er of type nt:folder with the name rat­ing under /apps/dam/gui/components/admin/welcome/widgets/discover.
  4. Cre­ate a file jsp under /apps/dam/gui/components/admin/welcome/widgets/discover/rating.
  5. Copy con­tents from /libs/dam/gui/components/admin/welcome/widgets/discover/new/new.jsp to

/apps/dam/gui/components/admin/welcome/widgets/discover/rating/rating.jsp.

  1. Open /apps/dam/gui/components/admin/welcome/widgets/discover/rating/rating.jsp and per­form the fol­low­ing changes:
  • Remove lines 47–52 of the code.
  • Add the fol­low­ing code from line 47 and save the file

        res.put(“path”, “/content/dam”);

        res.put(“property”, “jcr:content/averageRating”);

        res.put(“property.value”, “5”);

        res.put(“p.guessTotal”, “true”);

        res.put(“p.limit”, “100”);

        res.put(“type”, “dam:Asset”);

  1. Cre­ate a file jsp under /apps/dam/gui/components/admin/welcome/widgets/renderer/.
  2. Copy the con­tents of the file /libs/dam/gui/components/admin/welcome/widgets/renderer/renderer.jsp to the file /apps/dam/gui/components/admin/welcome/widgets/renderer/renderer.jsp.
  3. Make the fol­low­ing changes to the file /apps/dam/gui/components/admin/welcome/widgets/renderer/renderer.jsp and save:
  • Add the fol­low­ing code after line 110:

Resource rat­ing­Provider = resource.getChild(“ratingProvider”);

  • Add the fol­low­ing code after line 137:

        <!– Rat­ing wid­get –>

    <sec­tion class=“card-group-top-section”>

        <h2 class=“card-group-section-heading”><%=i18n.get(“Favourite”,“asset wel­come card head­ing”)%>

        </h2>

        <div class=“section-icon-circle”>

            <span class=“coral-Icon coral-Icon–asset coral-Icon–sizeM” style=“padding: 25%;padding-top: 1rem;”></span>

        </div>

        <img class=“card-group-section-image show-grid” src=”#” alt=”” style=“width: 97%;”>

    </section>

    <sec­tion class=“card-group-bottom-section”>

        <div class=“label detail tiles-view”>

            <sling:include path=”<%= ratingProvider.getPath() %>” resource­Type=”<%= ratingProvider.getResourceType()%>”/>

        </div>

    </section>

    <div class=“label foot­er”>

        <h4 class=“wrap”><a class=“show-more-link” data-href=”<%=request.getContextPath() %>/mnt/overlay/dam/gui/content/welcome/activities.html?type=new”><%=i18n.get(“Show More”)%></a></h4>

    </div>

  1. Nav­i­gate to the path /etc/dam/welcome/widgets/defaults/new/.
  2. Cre­ate a node of type nt:unstructured with the name rat­ing­Provider.
  3. Add the fol­low­ing prop­er­ty to the node and save:
Name Type Val­ue
sling:resourceType String dam/gui/components/admin/welcome/widgets/discover/rating
  1. Load the Assets Home page. The Favorite wid­get appears under the Dis­cov­er sec­tion.

Exercise 3: Add Assets home page custom configuration

  1. Over­lay the node /libs/dam/gui/components/admin/assetsrouter under /apps.
  2. Cre­ate a file jsp under /apps/dam/gui/components/admin/assetsrouter.
  3. Copy the file jsp to /apps/dam/gui/components/admin/assetsrouter.
  4. Save the file.
  5. Open jsp from the path /apps/dam/gui/components/admin/assetsrouter/.

Com­ment the lines 49–62:

/* if (user!=null){

        String user­Path = user.getPath();

        Resource pref­er­en­ceN­ode = null;

        pref­er­en­ceN­ode = resourceResolver.getResource(userPath + “/” + UserPropertiesService.PREFERENCES_PATH);

        if (pref­er­en­ceN­ode != null) {

            Val­ueMap conf = preferenceNode.adaptTo(ValueMap.class);

            String recordin­gEn­abled = conf.get(propertyName,“false”);

            if (“true”.equals(recordingEnabled)) {

                response.sendRedirect(contextPath + asset­sHome + mount­Point);

                return ;

            }

        }

    }

    response.sendRedirect(contextPath + assetsVan­i­ty + mount­Point); */

  1. Add the fol­low­ing line imme­di­ate­ly after the com­ment­ed lines and save the file: sendRedirect(contextPath + asset­sHome + mount­Point);
  2. Do the fol­low­ing to log in as a dif­fer­ent user:
  • Click the User icon at the top right cor­ner.

homepage_1

  • Select the user from the Imper­son­ate as For exam­ple, select Ali­son Park­er or Kel­ly Cre­ative, and click OK.

 

  1. From the rail, click Assets. This Assets Home page is dis­played.

 

 

0 comments