OrgChart

The OrgChart component along with OrgChartItem and OrgChartGroup are used to display the organizational structure. OrgChart komponent môže byť použitý na zobrazenie hierarchických vzťahov medzi rôznymi entitami v organizácii.

Basic use

The sample presents the organization tree in its basic form to make it clear how nodes and groups are composed.

Creating an org. structure using JSON data

Using JSON format, you can define nodes, their properties, and the links between them. This approach allows dynamic generation of the organizational structure based on data from the database or other sources.

Groups

Using the OrgChartGroup element, it is possible to group multiple nodes into a single entity. You can use them to show teams or departments within an organizational structure.

Virtual nodes

When the data model contains an entity that has children but should not render as its own card, use wje-orgchart-item virtual. The nested wje-orgchart can use the flat attribute so it does not add another incoming connector spacing and its children stay visually on the same level. This pattern is useful for departments without a manager, where only the user group or child departments should be visible.

<wje-orgchart-item virtual>
  <wje-orgchart slot="child" flat>
    <wje-orgchart-group title="Presales">
      <wje-orgchart-item>Oliver Ardo</wje-orgchart-item>
    </wje-orgchart-group>
  </wje-orgchart>
</wje-orgchart-item>

Line

The demonstration focuses on the links between nodes, so it is better to see how the tree communicates superiority and relationships.

Controls

The demo adds controls for working with the tree, for example, with a larger number of nodes or a wider structure.

When to use

Use wje-orgchart when the user needs to navigate the application or transition between states/screens.

When not to use

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility

Provide clear active/selected states, predictable tab order, and naming of controls.

Recommended practices

• Keep the URL and UI state in sync to make the navigation reproducible.
• Use consistent item terminology across menus, breadcrumb and tabs.
• For deep structures, add auxiliary context (breadcrumb, title, icons).

Attributes and properties

flat

Popis	Určuje, či je voľba flat zapnutá a ovplyvňuje správanie komponentu.
Atribút	flat
Typ	boolean
Predvolené	false

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Názov	Popis
``	Štýluje shadow časť časť.
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Pre tento komponent nie sú dostupné žiadne sloty.