Customizing a Tree-Based Asset Picker Plugin

You can define your Asset Picker further, by providing additional configurations:

  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 Hiding Items In 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, assets in a tree are organized numerically by ID. If you want, for each item type, to define one property whose value determines the sort order, use the Mutable Repository Tree Definition sortProperties property to specify those settings.

A custom Node Sorter component permits you to create a complex sort order that can incorporate multiple levels of sorting: for example, items are organized first by type, and those with the same type are organized then by name. You can implement a different sorting mechanism that’s based on any property held by all assets visible in your tree. 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.

The following example shows the class atg.web.tree.sort.LabelSorter, which can organize assets in a tree alphabetically by node label. The corresponding component, /atg/web/tree/LabelSorter, has no configurable properties.

Hiding Items In a Tree

By default, the assets included in a tree are derived from the treeLinks and rootNodeRQL properties on the Repository Tree Definition component. You might want to exclude additional assets from a view in particular circumstances only. For example, you might want to exclude an asset’s current location when it’s being moved. You can exclude assets from a tree by extending a class that hides assets with a given property and value. 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 exclude 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 treeNodeFilterPath 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 changed the node labels.

Implementing a Custom Icon

The icons beside items in a tree identify the item’s type. Replace icons for out-of-the-box item types or provide icons to custom types by following these steps:

  1. Add new icons to your Web application. It’s a good idea to keep all custom icons in one place., such as:

    <ATG2007.3dir>/MyWebApp/atg/ui/images

  2. Locate the following part of the item descriptor that defines the item type. This example is taken from the product item descriptor:

      <item-descriptor name="product">
        <attribute name="icon" value="productIcon"/>
        <attribute name="iconWebAppName" value="DCSUI"/> 
      </item-descriptor>

  3. Change the value (currently DCSUI) 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 (productIcon) 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’s 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. For example, you might want SKUs that are on sale to stand out in the tree, by, for example, appearing in red text. 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 <ATG2007.3dir>/home/localconfig). That way, 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

Beside the items displayed in Navigation pane tabs and views are checkboxes used for item selection. For example, when you want to duplicate an item, you select the checkbox beside it, before clicking Duplicate. 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:

<ATG2007.3dir>/home/localconfig/atg/web/assetmanager/configuration/profile
 
loading table of contents...