Orgchart

From JRapid

Jump to: navigation, search

The Org Chart view displays a listing of interconnected items as an organizational chart that supports selection.

(From wikipedia:) An organizational chart (often called organization chart, org chart, organigram(me), or organogram(me)) is a diagram that shows the structure of an organization and the relationships and relative ranks of its parts and positions/jobs. The term is also used for similar diagrams, for example ones showing the different elements of a field of knowledge or a group of languages.

Orgchart employees

Contents

Usage:

To display a Listing as an Orgchart you must specify in the Listing definition which property of your entity is the "child" property in the chart an which property is the "parent" property. Additionally, you can specify an "image" attribute to include an image inside the and a "description" attribute which value will appear below at the bottom. Finally, you can specify an "options" array to change the charts configuration. Go to the Org Chart API to learn how this chart can be configured.

   <listing child=CHILD_REFERENCE 
            parent=PARENT_REFERENCE 
            image=IMAGE_REFERENCE
            description=DESCRIPTION 
            name="orgchartListing" 
            view="orgchart" 
            options=ARRAY_OF_OPTIONS/>
  • child (required): a reference to the property which holds the name of the items.
  • parent (required): a reference to the property which holds the name of the parent of each item.
  • image (optional): a reference to the property which holds the url of the image of the items.
  • description (optional): a reference to the property which holds the description of the image of the items.
  • options (optional): an array of options for the chart. Notice that options[allowHtml] is always true and cannot be changed.

Important !

You must include Google's jsapi (JavaScript API) file in your project to get the view running.

<config>
  ...
  <usescript location="http://www.google.com/jsapi"/>
  ...
</config>

Available actions:

This view supports the following actions:

  • Location "main": "javascript | relatedentity".

If no actions are specified inside the listing's entity the default action for selection is "openForm".

Example:

In this example we want to list JRapid employees as an organizational chart. Note that the "parent" attribute of the listing is set to "dependant/name", this is an FPath expression which selects the name of the dependant in the web service response xml.

<entity label="Employes" name="Employee">
        <listing child="name" image="image" name="orgchart" parent="dependant/name" view="orgchart"/>
        <row>
            <column>
                <property display="secondary" label="Image" name="image" type="image"/>
                <property display="secondary" label="Description" name="description" type="string"/>
            </column>
            <column>
                ...
                <property display="secondary" entity="Employee" label="Dependant" name="dependant"/>
                ...
            </column>
        </row>
</entity>
Orgchart employees

The orgchart view supports selection, the default action for the selection event is openform.

Orgchart form opened

Associated Web Service:

The following XML displays the web service response for the Seller entity. The chart applies an XSL transformation to this XML and generates JavaScript code to create and populate the data. To populate the data it has to read the XML elements values of each employee. In the above example the "parent" attribute of the listing was set to "dependant/name" (an XPath expression) because the chart relates sellers by their name.

<page rows="9" page="1" total="1">

  <employee id="1" style="">
    <name>Nicolas Garnil</name> 
    <image>Seller/f/o/t/426fd0fa6bd3610a!foto_carnet.jpg</image> 
    <description>Developer</description> 
    <age>23</age> 
    <email>nicolas@prodasoftware.com</email> 
    <dependant id="2" style="">
      <name>German Gail</name> 
    </dependant>
  </employee>

  <employee id="2" style="">
    <name>German Gail</name> 
    <image>Seller/g/e/r/4bdacbfe3d782280!german-gail.jpg</image> 
    <description>CTO</description> 
    <age>28</age> 
    <email>ggail@prodasoftware.com</email> 
    <dependant id="10" style="">
      <name>JRapid</name> 
    </dependant>
  </employee>

  ...

</page>

See also:

Personal tools