Introduction

This is the Org Chart Applet by DTAI, Incorporated, a Java-based applet for building, editing, and displaying a company Organizational Chart. The chart is stored on the web server, by a server-side Java application. You can view and navigate a complex Org Chart, and if enabled, you can also modify it.


Technical Support

This version of the Org Chart Applet was provided for Netscape Communication Corp.'s Project Appalanche. DTAI, Incorporated provides this version of the Org Chart Applet "as-is". DTAI is planning a fully-functional, and supported version of the Org Chart Applet in the near future. If you are interested in evaluating this future release, please send email to orgchart@dtai.com


Contact Information

DTAI, Incorporated is a progressive technology company that develops advanced software products and provides custom computer solutions to a number of market areas.

DTAI, based in San Diego, California, has hand picked a team of top engineers, each with an extensive background developing distributed software for complex applications, using open standards and the latest programming practices.

The DTAI team members are experts in object oriented programming with Java, C++, and C, developing Internet, graphical, and database applications for Unix and Windows, while meeting real-time and high performance requirements.

DTAI performs Internet server administration, web page development, and advanced graphic design and production.

Specific DTAI project experience includes:

DTAI is a registered Netscape DevEdge Gold partner, and a member of the Microsoft Developer Network.


How to Use this Application

The Org Chart Applet allows a user to view a company organizational chart, and if properly configured, build or edit the chart. The Org Chart display is very configurable. For instance, you can specify a particular Org Chart hierarchy to create or display by setting the applet parameter "OrgChartName" to a specific database name. To find out about other options, check out the applet parameters that are available.

The main display of the Org Chart Applet is a company hierarchy. Each employee is represented with an employee "node", that currently shows the employee name and his or her job title. (Future versions of the Org Chart Applet will make this a more configurable display, and will also allow images, such as employee photos, to be included if desired.)

The main display normally shows only two or three levels. A complex organizational hierarchy can be viewed by navigating up and down the levels of the chain of command, through a simple point-and-click interface.

A window with more detailed information about an employee is also available. From this window, you can initiate an E-mail session, or view the employee's personal web page.

Getting Started

The Org Chart Applet should automatically start running once you go to a web page containing the applet. If you open a web document that is supposed to have the Org Chart Applet, and it does not run, see the Troubleshooting section of this help manual. If there are no error messages, and there are buttons such as "Help", "Zoom In", and "Zoom Out", then you may be looking at an empty Org Chart. Go to the section on Adding Nodes first. Otherwise, you may want to read the following sections.

Selecting a Node

You can select and highlight a node by clicking on it with the mouse button. Once selected, you can use the buttons at the top of the applet to view the detail information about the node. If in edit mode, you can also edit the information, add a subordinate node, or remove the node.

Viewing Additional Information

You can view additional information about a node by double-clicking it, or by selecting it and pressing the "Details..." button.

A dialog window will pop up, in which you will see not only the employee name and job title, but also the employees corporate employee ID, phone number, E-mail address, personal web page URL, section title, and section web page.

The labels to the left for E-mail, personal web page, and section web page are actually buttons. You can click on the "E-mail" label to start an e-mail session to the employee, or click on either web page button to open a new window to that URL. If a section URL and a section title are filled in, the title will be displayed at the top of the chart when this employee is at the top of the chart (see Navigating the Chart). In this case, you can then click on the title to bring up the corresponding web page.

If editing the chart, the "Apply" button will apply any changes without closing the dialog. With the dialog up, you can select another node on the chart to view and or make changes to that one.

Navigating the Chart

A large corporation will have hundreds or thousands of employees. This Org Chart Applet is designed to support organizations of that size, but you would not normally want to display all employees at one time.

You can specify via applet parameter the maximum number of levels to display at one time (the default is 2). You can also change the number of levels by selecting the "More" or "Less" button.

When you are viewing a section of the Org Chart, and you position the mouse over a leaf node that has more levels below it, you will see an indicator arrow down. This is an indication to you that there is more to see below. If you position the mouse over the top node, and the top node has a supervisor that is not currently displayed, you will see an arrow up.

To navigate to other nodes in the chart, you click on the arrow up or down. Click on the up arrow, for the top-most node to bring its supervisor to the top. Or click on an the down arrow for a leaf node to make that node the top-most node, allowing you to see the nodes below it.

Adding Nodes

If there are no nodes at all, press the "Add..." button to create the first node. Otherwise, if you are going to add a new employee to the chart, and it is not the first node, you must select its supervisor, then press the "Add..." button. The node dialog window will appear, allowing you to enter information about the employee and save it.

Moving or Reparenting a Node

You can use the "Control" key to drag a node to a new position. Hold the control key, and with the mouse, drag a node to a new location in the chart. Let go of the mouse button when the node is at its new location. You can constrain the motion to a horizontal or vertical direction by also holding down the shift key.

If you drag a node so that the mouse is over another node, not below the node being dragged [*this wouldn't make sense anyway], the node will become a subordinate to that node, and all of its subordinates will move with it.

HINT: If you move a node to a new position, and you later want to put it back at a default position, you can drag the node, and drop it on its own parent. Also, If you want to simply reorder the nodes, drag the nodes and drop them on their parent in the order you want them. Nodes are ordered from left to right as they are added to the parent.

Removing a Node

When a node is selected and you press the "Remove..." command button, you will be prompted to confirm the deletion of a node. If you delete a node and/or its subordinates, all of the employee information will be erased from the database. (If you do this by accident, press the Undo All button to go back to the previously saved state.)

Zooming In and Out

You can expand or shrink the Org Chart display by pressing the "Zoom In" or "Zoom Out" button. The "Zoom Out" button makes the chart smaller, allowing you to view a large chart in the applet window without needing scrollbars, provided the text is not too small. (You can also change the size of the chart via applet parameters by modifying the node and title font sizes.

Saving or Undoing Your Changes

If you have made some changes to an editable Org Chart, these changes won't be saved to the database until a "save event" occurs. Currently, a "save event" includes pressing the "Save" button, resizing the Netscape Navigator window, reloading the page, going to a different page, or quiting Navigator (either intentionally or accidentally). Even if you have a system crash, your changes should be saved automatically by the web server.

If you have made one or more changes to the Org Chart, and you then want to throw away the changes and go back to the version of the Org Chart as of the last "save event", you can press the "Undo All" button. This will close the chart, without saving the changes, and reopen it for editing from its original state.


Applet Parameters

Host (String)
Database host machine. Default: host of this applet
Port (Integer)
Database server TCP/IP port number. Default: 9006
OrgChartName (String)
The name for the Org Chart, used to query the database for a particular hierarchy. You are encouraged to limit yourself to letters and numbers.) Default: "default"
Edit (Boolean)
If "Yes", allow the database to be modified. Default: No
StartScriptURL (String)
Absolute URL path to OrgChart server CGI startup script. Default: /OrgChart_DTAI/user/start_server.cgi, or if not there then /OrgChart_DTAI/user/start_server.bat
InitialSection (String)
If set, and the section exists, this section will be displayed initially. Default: Display the top-most node or section.
ChartBackgroundColor* (String)
Name of color for the chart background. Default: White
ChartBackgroundImage (URL)
Absolute or relative (to document base) URL for an image to tile in the background. Default: None
BackgroundColor* (String)
Name of color for the background of most of the rest of the applet. Default: LightGray
ForegroundColor* (String)
Name of color for the foreground of most of the rest of the applet. Default: Black
VertSpacing (Integer)
Default vertical spacing in pixels between nodes, and below title. Default: 20
HorizSpacing (Integer)
Default horizontal spacing in pixels between nodes. Default: 10
MaxLevels (Integer)
Maximum number of levels to show from top node to leaf nodes. Default: 2
NodeFontFace** (String)
Name of font to display text in the nodes. Default: Helvetica
NodeFontSize (Integer)
Point size of font to display text in the nodes. Default: 18
NodeFontStyle (String)
Style (Bold, Italic, or BoldItalic) of font to display text in the nodes. Default: PLAIN
TitleFontFace** (String)
Name of font for the chart title. Default: TimesRoman
TitleFontSize (Integer)
Point size of font for the chart title. Default: 36
TitleFontStyle (String)
Style (Bold, Italic, or BoldItalic) of font for the chart title. Default: BOLD
NodeTextColor* (String)
Name of color of text in the nodes. Default: Black
TitleTextColor* (String)
Name of color for chart title. Default: Black
LinkColor* (String)
Name of color for links between nodes. Default: Black
NodeBorderColor* (String)
Name of color for the node border. Default: Black
NodeBackgroundColor* (String)
Name of color for the node backgrounds. Default: White
NodeArmColor* (String)
Name of color for the node backgrounds when mouse button is held down. Default: Gray
NodeHiliteColor* (String)
Name of color for the node backgrounds when highlighted. Default: Yellow
NodeTextHiliteColor* (String)
Name of color for the node text when highlighted. Default: Black
NodeShadowColor* (String)
Name of color for the node shadow. Default: Gray
NodeShadowOffset (Integer)
Pixels down and to the right of node to place shadow. Default: 5
NodeBorderWidth (Integer)
Pixel width of the node border. Default: 1
LinkThickness (Integer)
Pixel width of the links between nodes. Default: 1
RoundNodeCorners (Boolean)
If "Yes", round the corners on the node rectangles. Default: Yes
ThreeDBorders (Boolean)
If "Yes", draw the node borders with a 3-D effect (implies NO ROUND CORNERS). Default: No
SuppressNodeBackground (Boolean)
If "Yes", draw the node with no border or background. Default: No
TransparentNodeBackground (Boolean)
If "Yes", draw the node with a border but no background (implies NO SHADOW). Default: No

*Colors

**Preferred Fonts


Troubleshooting and Known Problems

The Org Chart Applet is a Java applet that connects to a server-side Java application. If you are accessing a web page in Netscape Navigator 3.0 or later*, and you don't see the Java applet, check to make sure that Java is enabled in your browser. (Depending on the version of Netscape Navigator, you should be able to find this option under the "Options" menu, "Preferences" menu item, "Languages" tab. You should enable both Java and JavaScript. If you have to reset these items, you will need to reload the page, or quit and restart Netscape Navigator completely.

[*NOTE: The Org Chart Applet is optimized for Netscape Navigator 3.0. While it may run with Navigator 2.0, there could be problems.]

If these options are properly configured, there may be a problem with the server side. Contact your webmaster or site administrator.

If the applet starts, but shows an informational message that it is attempting to start and/or connect to the database, wait until it connects, or until it fails to connect. If it fails to connect, contact your webmaster or site administrator. There may be a problem getting the database to start, or the HTML file may have a misconfigured parameter, such as the wrong host name or port number.

If the applet starts and you see the main display, including the command buttons at the bottom, but the display is empty, this could mean that either the database is empty, or the applet had an error while attempting to connect to the database. Try adding an employee node, then quit Netscape Navigator completely and restart. If you return to the page and the node is not there, contact your webmaster or site administrator. If the node is still there, then the database was empty. If this is not what you expected, contact your webmaster or site administrator. The applet parameter "OrgChartName" may not be set correctly.

If the applet starts, and you see an Org Chart in the main display, but you can't view any additional levels (by double-clicking on a node that has children), or you select a node, and press the "Edit/View" button and you never see a window pop up with more information about the node, this may be a well-known problem with older versions of Netscape Navigator. Quit Netscape Navigator completely and try again. You should be using the released version of Navigator 3.0.


How This Application Works

Except for the On-line help (provided by Netscape for the project, and modified to suit the needs of the Org Chart Applet), this application was written entirely in Java. All of the source code is available with the distribution. There are a number of convenience classes under the COM/dtai subdirectories for doing client/server network communication, useful user interaction with dialogs, text prompts, tab groups, "Gadget" management (a clean way to manage graphical "objects" in a display), and more.

The OrgChart applet was developed in a very short time-frame. The software is provided as-is, and the algorithms may not always be the most optimal of solutions. However, the packages and the Org Chart-specific classes do provide good examples of a complete Java browser-embedded application.

There are actually two programs. The Org Chart Applet is a standard browser applet running under Netscape Navigator. It uses the Java Sockets to connect to the second program: a server-side Java application.

The Java application uses standard Java network classes to establish a client/server dialogue with one or more applets. It uses Hashtables to manage indexes, and Java File I/O to store and retrieve the data.

The client applet tries to establish a connection to the database application that is supposed to be running on the machine that served up the applet. If it cannot connect, it uses the URL.openStream() method to start a CGI program, without affecting the web page display.

The job of the CGI program is to start the database application as a "background process", and then return. (One Appalanche requirement was that the server had to run under both Unix, and Windows NT. Windows NT 3.51 does not deal with background processes very well. There is a small Intel x86-based ".exe" program included with the OrgChart installation the will take a command and put it in the background. The CGI program provided with the distribution knows how to deal with this.)

Once the client applet has connected to the database, it sends commands, beginning with "OpenDatabase". The database can be opened in read-only mode, in which case there should never be a problem, or in read/write mode. Only one applet is allowed to edit each OrgChart database (differentiated by the applet parameter "OrgChartName") at one time, so the second attempt to open the same database for writing will fail. The applet handles this, and even allows the user to somewhat-safely override the write-lock (this capability is intended to be used if the write-lock is "corrupted" somehow because of an abnormal client termination.)

Once the database is opened, more commands can be sent, such as "get all nodes in section 'XYZ Division'" or something. Every command gets a status code response.

Other intersting points: