AEM Assets Home page (on AEM 6.1) provides a rich and personalized Welcome Screen experience. Did you know you can further customize the experience to suit your specific needs? For example, you can include additional navigational links (in addition to folders, collections, and catalogs) to quickly navigate to your favorite places. You can also add custom widgets and customize the default configuration workflow for the Assets Home page.

The following exercises enable you to add navigational links and widgets to the Assets Home page and alter its configuration workflow.

Prerequisites:

Enable the Assets Home page experience using the steps in AEM Assets Home Page Experience.
Important: To ensure that you do not lose your changes, press Save after you create, update, or edit a node or property.

Exercise 1: Add navigational links to the home page

1. Navigate to http://localhost:4502/crx/de.
2. Navigate to /libs/dam/gui/content/welcome/jcr:content/body/content/header/items/default/items.
3. Right-click the node, and select Overlay under /apps with the checkbox selected.
4. Navigate to /apps/dam/gui/content/welcome/jcr:content/body/content/header/items/default/items.
5. Create a node of type nt:unstructured, and name it geometrixx.
6. Add the following properties to the node geometrixx:

7. Create a node under the geometrixx node of type nt:unstructured, and name it layoutConfig.
8. Add the following property to the node layoutConfig:

9. Verify that geometrixx button appears on toolbar.

Exercise 2: Add Assets Home page custom widget

1. Overlay /libs/dam/gui/components/admin/welcome/widgets/discover under /apps.
2. Overlay /libs/dam/gui/components/admin/welcome/widgets/renderer under /apps.
3. Create a folder of type nt:folder with the name rating under /apps/dam/gui/components/admin/welcome/widgets/discover.
4. Create a file jsp under /apps/dam/gui/components/admin/welcome/widgets/discover/rating.
5. Copy contents from /libs/dam/gui/components/admin/welcome/widgets/discover/new/new.jsp to

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

6. Open /apps/dam/gui/components/admin/welcome/widgets/discover/rating/rating.jsp and perform the following changes:

• Remove lines 47-52 of the code.
• Add the following 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”);

7. Create a file jsp under /apps/dam/gui/components/admin/welcome/widgets/renderer/.
8. Copy the contents 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.
9. Make the following changes to the file /apps/dam/gui/components/admin/welcome/widgets/renderer/renderer.jsp and save:

• Add the following code after line 110:

Resource ratingProvider = resource.getChild(“ratingProvider”);

• Add the following code after line 137:

        <!– Rating widget –>

    <section class=”card-group-top-section”>

        <h2 class=”card-group-section-heading”><%=i18n.get(“Favourite”,”asset welcome card heading”)%>

        </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>

    <section class=”card-group-bottom-section”>

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

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

        </div>

    </section>

    <div class=”label footer”>

        <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>

10. Navigate to the path /etc/dam/welcome/widgets/defaults/new/.
11. Create a node of type nt:unstructured with the name ratingProvider.
12. Add the following property to the node and save:

13. Load the Assets Home page. The Favorite widget appears under the Discover section.

Exercise 3: Add Assets home page custom configuration

1. Overlay the node /libs/dam/gui/components/admin/assetsrouter under /apps.
2. Create 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/.

Comment the lines 49-62:

/* if (user!=null){

        String userPath = user.getPath();

        Resource preferenceNode = null;

        preferenceNode = resourceResolver.getResource(userPath + “/” + UserPropertiesService.PREFERENCES_PATH);

        if (preferenceNode != null) {

            ValueMap conf = preferenceNode.adaptTo(ValueMap.class);

            String recordingEnabled = conf.get(propertyName,”false”);

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

                response.sendRedirect(contextPath + assetsHome + mountPoint);

                return ;

            }

        }

    }

    response.sendRedirect(contextPath + assetsVanity + mountPoint); */

7. Add the following line immediately after the commented lines and save the file: sendRedirect(contextPath + assetsHome + mountPoint);
8. Do the following to log in as a different user:

• Click the User icon at the top right corner.

• Select the user from the Impersonate as For example, select Alison Parker or Kelly Creative, and click OK.

9. From the rail, click Assets. This Assets Home page is displayed.

The post AEM Assets UI – Customize Home Page appeared first on Experience Delivers.