CE
PE
EE

since 8.6.0

Employment/Purpose

Orgnode represents data in an Orgitem. Orgnode can contain any components in it, such as label, image, textbox etc.

Common Use Cases

Orgnode is used as the visual content container inside an <orgitem>. It accepts any child components — labels, images, buttons, form inputs — so each node in the org chart can display rich, interactive content.

Displaying a name and title inside an org-chart node:

<organigram width="500px">
    <orgchildren>
        <orgitem>
            <orgnode>
                <image src="/img/avatar.png"/>
                <label value="Jane Smith"/>
                <label value="Engineering Manager" style="color:gray"/>
            </orgnode>
        </orgitem>
    </orgchildren>
</organigram>

Nesting nodes to build a reporting hierarchy:

<organigram width="700px">
    <orgchildren>
        <orgitem>
            <orgnode label="CEO"/>
            <orgchildren>
                <orgitem>
                    <orgnode label="CTO"/>
                </orgitem>
                <orgitem>
                    <orgnode label="CFO"/>
                </orgitem>
            </orgchildren>
        </orgitem>
    </orgchildren>
</organigram>

Example

<organigram width="600px">
    <orgchildren>
        <orgitem>
            <orgnode>
                <button label="Snapshot" onClick="camera.snapshot()"/>
            </orgnode>
            <orgchildren>
                <orgitem>
                    <orgnode width="200px" label="Camera">
                        <camera id="camera" onSnapshotUpload="image.setContent(event.media)"/>
                    </orgnode>
                </orgitem>
                <orgitem>
                    <orgnode width="200px" label="Image">
                        <image id="image"/>
                    </orgnode>
                </orgitem>
            </orgchildren>
        </orgitem>
    </orgchildren>
</organigram>

Supported Events

Inherited Supported Events: LabelImageElement

Supported Children

*ALL