Customizing a Tree-Based Asset Picker Plugin

You can define your Asset Picker further by providing additional configuration:

  1. Arrange the assets in your tree using any property they all share. See Customizing the Order of Items in a Tree.

  2. Exclude additional assets from the Asset Picker. See Excluding Items from a Tree.

  3. Change the icon provided to a custom or an out-of-the-box item type. See Implementing a Custom Icon.

  4. By default, nodes are named by an item’s display name. Use a different property value as the node identifier. See Customizing the Node Text.

  5. Change the color, size, or style of the node label. See Customizing the Node Style.

  6. All nodes have checkboxes beside them. You can remove these checkboxes for all items in a given view, thereby making items unavailable for selection. See Removing the Checkboxes Beside Nodes.

Customizing the Order of Items in a Tree

By default, the order of items in a given branch depends on how that item’s relationship to other items is defined in the Mutable Repository Definition component. Typically, each item type is organized in the order it was added or the position it was manually moved to. Otherwise, items are ordered by their values for a given property.

A custom Node Sorter component permits you to create a complex sort order that can incorporate multiple levels of sorting: for example, items can be organized first by type, and those with the same type are organized by name.

It is best to implement a Node Sorter component in trees that have a small number of items or a large number of items split across a number of branches. For trees that have 1000 or more items in a given branch, using a custom Node Sorter could affect performance, especially if you use secured repositories.

Follow these steps to implement an alternative sort order:

  1. Create a class that implements the atg.web.tree.sort.NodeSorter interface.

  2. Use the List sortNodes(List pNodes) method to specify a property whose value determines an asset’s position in the tree.

  3. Save the class to the directory that contains your custom code. Restart ATG Content Administration.

  4. Create a globally scoped component of the new class.

  5. To define multiple levels of sorting, repeat steps 1-4.

  6. Add the Node Sorter component name to the nodeSorterPathsproperty of the Bucketing Tree Impl component you created in the Bucketing Tree Impl Component section. If you have multiple Node Sorter components, the nodeSorters property should hold a comma-separated list of components that reflects the order in which they should be applied.

Excluding Items from a Tree

By default, the assets included in a tree are derived from the treeLinks and rootNodeRQL properties on the Mutable Repository Tree Definition component. You might want to exclude additional assets from a view in particular circumstances only. For example, you might want trees to show users only those items that they created. You can exclude assets from a tree by writing a Tree Node Filter class.

Using a Tree Node Filter class might degrade performance in trees where a branch holds 1000 items or more, especially when using secured repositories.

Follow these steps:

  1. Create a class that implements the atg.web.tree.TreeNodeFilter class.

  2. Use the public boolean accept(TreeNode pNode) method to specify the assets you want to include from the tree by supplying a property and value.

  3. Save the class to the directory that contains your custom code. Restart ATG Content Administration.

  4. Create a globally scoped component of the new class.

  5. Add the Tree Node Filter component name to the treeNodeFilterPaths property of the Bucketing Tree Impl component you created in the Bucketing Tree Impl Component section.

There are several Tree Node Filter subclasses included with ATG Content Administration. One example is the atg.web.tree.targeting.TargetingTreeNodeFilter class used to limit the items in the tree to content repository items in a given path. Also, this component changes the node labels.

Implementing a Custom Icon

To replace icons for out-of-the-box item types or provide icons for custom types, follow these steps:

  1. Add new icons to your Web application. It is good practice to keep all custom icons in one place, for example

    <ATG10dir>/MyWebApp/atg/ui/images

  2. Locate the following part of the item descriptor that defines the item type.

    <item-descriptor name="product">
    <attribute name="icon" value="myIcons"/>
    <attribute name="iconWebAppName" value="MyApp"/>
    </item-descriptor>

  3. Change the value (currently MyApp) for the iconWebAppName attribute to the name of your Web application.

  4. Edit the appropriate custom resource bundle to map the icon name to the icon’s path. To do this, you enter the value of the icon attribute (myIcons) as the key and the icon’s actual path and name as the value.

Customizing the Node Text

By default, the label for a tree node is the display name for the item it represents. You can change the label to display any property of the item, such as the item ID, by modifying the item’s item descriptor. The <display-property> attribute identifies the property whose value is used as a label. For more information, see the SQL Repository Definition Tag Reference section of the SQL Repository Reference chapter in the ATG Repository Guide.

Customizing the Node Style

The type face, color, size, and other elements that determine the style used for the label of a tree node are specified in a Cascading Style Sheet (CSS). You can change the appearance of all nodes or design a style for nodes in a specific circumstance. Follow these steps:

  1. Create a style sheet that defines the style for the node label. Save the CSS to your Web application.

  2. Extend the atg.web.service.CustomStyleFinder class. In the new class, override the getStyle(TreeNode pNode, String pKey) method, coding pNode to locate the custom CSS you created.

  3. Create a properties file for the Custom Style Finder component that uses the class you created. Save the properties file to the /atg/web/service directory of your local configuration location (such as <ATG10dir>/home/localconfig). Other components that refer to Custom Style Finder component will automatically use the correct implementation of it.

  4. Update the /atg/web/assetmanager/ConfigurationInfo.additionalStyleSheets property to include the path and name of the custom CSS you created.

Removing the Checkboxes Beside Nodes

The Navigation pane tabs and views contain checkboxes used for item selection. You can hide all such checkboxes for items in a given view in the Asset Picker or Navigation pane. Follow these steps:

  1. Locate a component that represents the view (or tab as is the case for the Project tab) you want to work with:

  2. Set the editable property to false.

  3. Save the properties file to a path in the local configuration directory that’s identical to the component’s path. For the Users view, you save the properties file to:

<ATG10dir>/home/localconfig/atg/web/assetmanager/configuration/profile

Copyright © 1997, 2013 Oracle and/or its affiliates. All rights reserved. Legal Notices