18.2 Configuring the Org Chart portlet

To configure the org chart portlet you’ll need to:

Step

Task

Description

1

Define the relationship that you want to display

You can use one of the predefined relationships that are installed with the Identity Manager user application, or you can create your own.

For more information about defining a relationship, see Section 4.0, Configuring the Directory Abstraction Layer.

2

Verify that the entities and attributes that you want to use in the relationship are available in the directory abstraction layer

For more information about defining a relationship, see Section 18.2.1, Directory abstraction layer setup.

3

Determine where you want to display this relationship

Do you want to create a new page for launching the org chart? Or, do you want to launch it from the Detail portlet or from another org chart?

For more information about creating pages and adding portlets to those pages, see Section 7.0, Page Administration.

4

Set preferences for the portlet

Preferences let you define:

  • Which attributes to display

  • How to display them (their HTML layout)

For more information, see Section 18.2.2, Setting Org Chart Preferences.

5

Test

Test the relationship definitions and layout

6

Set eDirectory rights and establish any indexes needed to enhance performance

Effective rights—To display attributes defined by the portlet, users must have Read rights to the attributes.

Performance enhancement—The performance of the org chart display can be enhanced by adding an eDirectory value index to the relationship’s child attribute because the child attribute is used to do an LDAP search.

18.2.1 Directory abstraction layer setup

The entities and attributes displayed within an Org Chart must be defined in the directory abstraction layer. The following table shows the attributes and properties that you must set for each entity and attribute displayed in an Org Chart.

Definition type

Setting

Value

entity

view

Selected (true)

attribute

read

Selected (true)

search

Selected (true)

Lookup Link requirements The Lookup Link allows users to navigate the org chart by performing searches for other objects of the same type as the Parent Entity key. It requires that the parent entity key have at least one attribute with the require and search access properties set to true (selected in the directory abstraction layer editor). If not, the Lookup Link’s Object Lookup dialog cannot be populated and it displays an empty dialog.

For more information on entity and attribute configuration, see Section 4.0, Configuring the Directory Abstraction Layer.

18.2.2 Setting Org Chart Preferences

You define two types of preferences:

Org Chart relationship preferences

The Org Chart relationship preferences are contained in a single preferences page.

Description: Description: Illustration

.

.

.

Description: Description: Illustration

Preference

What to do

Presentation Layouts

Click View/Edit Custom Preferences to access the layout preferences. They are described in Org chart layout preferences.

Relationship Key

Type the relationship key. This value must correspond to one of the relationship keys specified in directory abstraction layer.

Parent Entity Key

Type the DN of the entity representing the root node of the org chart you want to display, or to display the current user’s org chart, type ${User/id}. (The ${User/id} parameter resolves to the current user's DN.)

This value must be within the nodes specified by the search-root property in the directory abstraction layer or the LDAP search fails.

Here are some examples of valid DNs (using sample data):

  • To display the user2users Relationship Key with the employee named Jack Miller as the root of the org chart, you’d specify:


cn=jmiller,ou=users,ou=sample,o=novell
  • To display the group2users Relationship Key with the Accounting group as the root node, you’d specify:


cn=Accounting,ou=groups,ou=sample,o=novell

Default depth

Specifies the depth of the org chart when first displayed.

  • 0—Show only the root

  • 1—Show the root and its children

  • 2—Show the root, its children, and grandchildren

and so on. If this value is incremented to a value higher than Maximum depth (below), then the Maximum Depth value takes precedence.

Maximum Depth

Defines the maximum depth the user can drill down in an org chart. This is not the same as the ability to navigate through an org chart which is restricted by effective rights.

OrgChart Skin

Business Card

eGuide

Novell.com

Wired

True Blue

Connect wires to items

Specifies whether the org chart cards are connected by wires. False means not connected.

Menu Timeout

Number of milliseconds before the current displayed menu (for the built-in links) disappears.

Tree Presentation

Defines the OrgChart orientation, distribution and appearance per level of depth.

The n first values will define orientation, distribution and appearance for the levels from 0 to n-1. The last value is used over and over for level of depths greater than n-1. Values must be between 0 and 5.

Values are:

0: Place card above a vertical list of items

1: Line above a vertical list of items

2: Place card above a horizontal list of items

3: Line above a horizontal list of items

4: Place card before a vertical list of items

5: Line before a vertical list of items

Leaf Presentation

Defines the OrgChart orientation, distribution and appearance for the highest depth of one OrgChart branch

Minimum item width

This value should equal to round('item min height' * 1.618)

Minimum item Height

This value should equal to round('item min width' / 1.618)

Separator for multi-valued attributes

The character used as a separator for attributes with more than one value.

Org chart layout preferences

The Org Chart Layout preferences let you define the HTML layout for the display of the org chart entries. You can use the HTML editor of your choice for more precise editing. See To use an external editor.

Description: Description: Illustration

HTML Layout for business cards—The default layout.

HTML Layout for simple display—The layout displayed when the tree presentation preference is set to 1.

HTML Editor You access the HTML editor by clicking the edit button. The HTML editor looks like this:

Description: Description: Illustration
Using the HTML Editor

The HTML Editor provides a WYSIWYG interface for defining the layout of the leaves of the org chart. It provides the typical features of an HTML editor for defining text formatting and lists, and specifying anchors and images, and so on. Use the Keywords dropdown to place attributes, commands, and navigation URLs within the layout area. When you choose a keyword from the dropdown, it is inserted with the proper syntax, but you can also add HTML within the layout area.

Keywords When designing your layout, you can use the Keywords dropdown to insert variables to be replaced at runtime with specific attribute values. Or you can type references to them using this syntax:


$[[keyword]]

Where keyword is the value of an entity attribute such as LastName.

You can concatenate attributes using this syntax:


$[[keyword+keyword]]

For example:


$[[FirstName+LastName]]

You can concatenate as many attributes as you want and can also include quoted strings like this:


$[[keyword+”sample text”+keyword]]

This will render the values of the keywords and the quoted text.

NOTE:When a keyword is mistyped in a layout, it will be rendered as-is in the org chart (including the $[[]]).

HTML Editor Features and Keyword usage To use the HTML Editor features and Keywords dropdown list:

Feature

Tip

Insert Link button

To insert a link:

In Mozilla:

  1. Highlight the text you want to hyperlink and click Insert Link.

  2. Type the URL and click Create Link.

  3. Save the preferences.

In IE:

  1. Click Insert Link.

  2. Type the URL in the popup window.

  3. Highlight the text you want to hyperlink, and click Create Link (in the popup window).

  4. Save the preferences.

NOTE:If your image or URL is located in the the upper-left quadrant of the HTML Editor, the popup window will overlap it. Since the popup cannot be moved, you’ll have to create the text you want elsewhere in the editor and cut and paste it to the correct location.

Add Image button

In Mozilla:

  1. Place mouse focus where you want to insert an image, and click Add Image.

  2. Type the URL and text then click Create Image in the popup window.

  3. Save the preferences.

In IE:

  1. Click Add Image.

  2. Type the URL and text in the popup window, then place mouse focus where you want to insert an image, and click Create Image in the popup window.

  3. Save the preferences.

NOTE:If your image or URL is located in the the upper-left quadrant of the HTML Editor, the popup window will overlap it. Since the popup cannot be moved, you’ll have to create the text you want elsewhere in the editor and cut and paste it to the correct location.

Keyword Dropdown: Attributes

These are the set of attributes that are available for this entity.

Keyword Dropdown: Commands

These commands allow the Org Chart portlet to launch other identity portlets or built-in features such as IM or email tools.

  • IM Action button—Creates a button to send IMs

  • Mail Action button—Creates a button to send emails

  • Org Chart Action button—Creates a button to switch to another relationship, with the selected entity instance being the parent

  • Info Action button—Launches the Detail portlet

For examples of the buttons that are generated, see Built-in links.

URLs

OrgChart Navigation URL Link—Lets you specify an URL or entity attribute that will display as a link. When the user clicks the link, the Org Chart portlet redisplays with the clicked entity becoming the root node.

Restriction:

This is only valid when the Parent and Child entities in a relationship are of the same object type. For example, in the Manager-Employee relationship, both are users.

Usage Tips:

To use this keyword, you must:

  1. Click View Source.

  2. Type the @NavUrl keyword using this syntax:


<a href="javascript:$[[@NavUrl]]">someText</a>

where someText is the link to display at runtime or an entity attribute. In the following example, Click here becomes a clickable link.


<a href="javascript:$[[@NavUrl]]">Click here</a>

In this example, the FirstName attribute becomes the clickable link:


<a href="javascript:$[[@NavUrl]]">$[[FirstName]]</a>

Usage Restriction:

With Internet Explorer, you cannot use this following syntax.


<a href="$[[@NavUrl]]">someText</a>

During a save operation Internet Explorer adds:


http://context before $[[@NavUrl]] 

This means that


<a href="$[[@NavUrl]]">someText</a>

becomes


<a href="http://localhost/.../$[[@NavUrl]]">someText</a>

and this will not display correctly at runtime.

Org Chart Navigation Click Link—Use this keyword for an onClick event. (Enables only the org chart portlet area to be refreshed rather than the whole page.)

Usage Tips:

To use this keyword, you must:

  1. Click View Source.

  2. Type the @NavClick keyword using this syntax:


<A href="javascript:return false;" onClick="$[[@NavClick]]">$[[SomeAttribute]]</A>

where SomeAttribute is an entity attribute that becomes a clickable link.

The "javascript:return false;" is required. Omitting it will cause an error.

To save the layouts you define, click Submit.

To use an external editor You can use an HTML external editor by:

  1. Creating the HTML source for the entity attributes, commands, and keywords using HTML Layout Editor available in the preferences.

  2. Copying the HTML source to the editor of your choice.

  3. Making the changes that you want.

  4. Copying the HTML source back to the HTML Layout Editor preference when you are done editing it.

18.2.3 Dynamically loading images

To display images, such as user photos, that are stored in your identity vault, you can add the attribute name to the business card. For example, adding the User Photo attribute to the business card layout displays the user’s photo.

If you store images outside the identity vault, you’ll need to use the IMG: tag within the View Source mode of the HTML Editor as follows:

  1. Go to the Org Chart portlet’s preferences and access the HTML Editor.

  2. Click View Source.

  3. Use the IMG: tag to combine a location, an attribute key, and a file extension using a syntax like this:


$[[IMG:”URL” + attribute-key-name + ”fileextension”]]

The following example shows the syntax you’d use if you stored employee photos as JPG images by Last Name in the /images subdirectory of your application server:


$[[IMG:"http://myhost:8080/images/"+LastName+".jpg"]]

At runtime, the org chart concatenates the URL with the LastName attribute and the file extension .jpg.

Note that the HTML Editor supports a flexible syntax. It supports any combination of text and attributes so that the syntax is:


$[[IMG:”some text” + attribute-key-name + ...]]