Extend Asset Editor extending-asset-editor

The Asset Editor is the page that opens when an asset found through the Asset Share is clicked allowing the user to edit such aspects of the asset as metadata, thumbnail, title and tags.

Configuration of the editor using the predefined editing components is covered in Creating and Configuring an Asset Editor Page.

In addition to using pre-existing editor components, Adobe Experience Manager developers can also create their own components.

Create an Asset Editor template creating-an-asset-editor-template

The following sample pages are included in Geometrixx:

Configure Clientlib configuring-clientlib

Assets components use an extension of the WCM edit clientlib. The clientlibs are usually loaded in init.jsp.

Compared to the default clientlib loading (in core’s init.jsp), an Assets template must have the following:

In most cases, copying the existing sample init.jsp (/apps/geometrixx/components/asseteditor/init.jsp) should meet these needs.

Configure JS actions configuring-js-actions

Some of the Assets components require JS functions defined in component.js. Copy this file to your component directory and link it.

<script type="text/javascript" src="<%= component.getPath() %>/component.js"></script>

The sample loads this JavaScript source in head.jsp(/apps/geometrixx/components/asseteditor/head.jsp).

Additional style sheets additional-style-sheets

Some of the Assets components use the widgets library. To be rendered properly in the content context, an additional style sheet has to be loaded. The tag action component requires one more.

<link href="/etc/designs/geometrixx/ui.widgets.css" rel="stylesheet" type="text/css">

Geometrixx Style Sheet geometrixx-style-sheet

The sample page components require that all selectors start with .asseteditor of static.css (/etc/designs/geometrixx/static.css). Best practice: Copy all .asseteditor selectors to your style sheet and adjust the rules as desired.

FormChooser: Adjustments for eventually loaded Resources formchooser-adjustments-for-eventually-loaded-resources

The Asset Editor uses the Form Chooser, which lets you edit resources - in this case assets - on the same form page by simply adding a form selector and the path of the form to the URL of the asset.

For example:

The sample handles in head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) do the following:

 List<Resource> resources = FormsHelper.getFormEditResources(slingRequest);
    if (resources != null) {
        if (resources.size() == 1) {
            // single resource
            FormsHelper.setFormLoadResource(slingRequest, resources.get(0));
        } else if (resources.size() > 1) {
            // multiple resources
            // not supported by CQ 5.3
        }
    }
    Resource loadResource = (Resource) request.getAttribute("cq.form.loadresource");
    String title;
    if (loadResource != null) {
        // an asset is loaded: disable WCM
        WCMMode.DISABLED.toRequest(request);

        String path = loadResource.getPath();
        Asset asset = loadResource.adaptTo(Asset.class);
        try {
            // it might happen that the adobe xmp lib creates an array
            Object titleObj = asset.getMetadata("dc:title");
            if (titleObj instanceof Object[]) {
                Object[] titleArray = (Object[]) titleObj;
                title = (titleArray.length > 0) ? titleArray[0].toString() : "";
            } else {
                title = titleObj.toString();
            }
        }
        catch (NullPointerException e) {
            title = path.substring(path.lastIndexOf("/") + 1);
        }
    }
    else {
        title = currentPage.getTitle() == null ? currentPage.getName() : currentPage.getTitle();
    }

In the HTML part, use the preceding title set (either asset or page title):

<title><%= title %></title>

Create a simple form field component creating-a-simple-form-field-component

This example describes how to build a component that shows and displays the metadata of a loaded asset.

Modify metadata options modifying-metadata-options

You can modify the namespaces available in the metadata form.

Currently available metadata are defined in /libs/dam/options/metadata:

The options can be overwritten in /apps/dam/options/metadata: