Organigram - since v6.0.8

Documentation
  • CommerceBay GmbH
    • Software Development
      • Ridvan Agar
      • Team JavaEE
        • JSF
          • Thomas Andraschko
        • Backend
          • Marie Louise
      • Team Mobile
        • Android
          • Andy Ruby
        • iOS
          • Stevan Jobs
    • Managed Services
      • Thorsten Schultze
      • Sandra Becker
    • Marketing
      • Social Media
        • Ali Mente
        • Lisa Boehm
      • Press
        • Michael Gmeiner
        • Hans Peter
    • Management
      • Hassan El Manfalouty
Add employee
Options
<h:form id="form">

    <style>
        .ui-organigram .ui-organigram-node.division {
            background: #93e7ff;
            background: -moz-linear-gradient(top, #93e7ff 0%, #007efc 100%);
            background: -webkit-linear-gradient(top, #93e7ff 0%,#007efc 100%);
            background: linear-gradient(to bottom, #93e7ff 0%,#007efc 100%);
        }

        .ui-organigram .ui-organigram-node.employee {
            background: #88c048;
            background: -moz-linear-gradient(top, #88c048 0%, #69a038 100%);
            background: -webkit-linear-gradient(top, #88c048 0%,#69a038 100%);
            background: linear-gradient(to bottom, #88c048 0%,#69a038 100%);
        }
    </style>

    <p:growl id="growl" />

    <p:organigram id="organigram"
                   widgetVar="organigram"
                   value="#{organigramView.rootNode}"
                   var="node"
                   leafNodeConnectorHeight="#{organigramView.leafNodeConnectorHeight}"
                   autoScrollToSelection="#{organigramView.autoScrollToSelection}"
                   zoom="#{organigramView.zoom}"
                   selection="#{organigramView.selection}"
                   style="#{organigramView.style}">

        <p:ajax event="dragdrop" process="@this" update="@form:growl" listener="#{organigramView.nodeDragDropListener}" />
        <p:ajax event="select" process="@this" update="@form:growl" listener="#{organigramView.nodeSelectListener}" />
        <p:ajax event="contextmenu" process="@this" />
        <p:ajax event="collapse" process="@this" update="@form:growl" listener="#{organigramView.nodeCollapseListener}" />
        <p:ajax event="expand" process="@this" update="@form:growl" listener="#{organigramView.nodeExpandListener}" />

        <p:organigramNode>
            <h:outputText value="#{node.data}" />
        </p:organigramNode>

        <p:organigramNode type="root"
                           style="border-radius: 10px;">
            <h:outputText value="#{node.data}" />
        </p:organigramNode>

        <p:organigramNode type="division"
                          styleClass="division"
                          icon="pi pi-briefcase"
                          iconPos="left">
            <h:outputText value="#{node.data}" />
        </p:organigramNode>

        <p:organigramNode type="employee"
                          styleClass="employee"
                          icon="pi pi-user">
            <h:outputText value="#{node.data}" />
        </p:organigramNode>
    </p:organigram>

    <p:contextMenu for="organigram" nodeType="employee">
        <p:menuitem value="fire employee"
                    update="organigram"
                    icon="pi pi-times"
                    action="#{organigramView.removeEmployee()}" />
    </p:contextMenu>

    <p:contextMenu for="organigram" nodeType="division">
        <p:menuitem value="Add employee"
                    ajax="false"
                    icon="pi pi-plus"
                    onclick="PF('addEmployeeDialog').show(); return false;" />
        <p:menuitem value="Remove division"
                    update="organigram @form:growl"
                    icon="pi pi-times"
                    action="#{organigramView.removeDivision()}" />
    </p:contextMenu>

    <p:dialog id="addEmployeeDialog"
              widgetVar="addEmployeeDialog"
              header="Add employee">

        <p:inputText value="#{organigramView.employeeName}" />

        <p:commandButton process="@parent"
                         update=":form:organigram"
                         value="Add"
                         action="#{organigramView.addEmployee()}"
                         oncomplete="PF('addEmployeeDialog').hide();"/>

    </p:dialog>
</h:form>

<h:form>
    <p:panel header="Options">
        <h:panelGrid columns="2">
            <p:outputLabel for="@next" value="zoom" />
            <p:selectBooleanCheckbox value="#{organigramView.zoom}">
                <p:ajax process="@this" update=":form:organigram" />
            </p:selectBooleanCheckbox>

            <p:outputLabel for="@next" value="autoScrollToSelection" />
            <p:selectBooleanCheckbox value="#{organigramView.autoScrollToSelection}">
                <p:ajax process="@this" update=":form:organigram" />
            </p:selectBooleanCheckbox>

            <p:outputLabel for="@next" value="leafNodeConnectorHeight" />
            <p:inputText value="#{organigramView.leafNodeConnectorHeight}">
                <p:ajax process="@this" update=":form:organigram" />
            </p:inputText>

            <p:outputLabel for="@next" value="style" />
            <p:inputText value="#{organigramView.style}" size="100">
                <p:ajax process="@this" update=":form:organigram" />
            </p:inputText>

            <p:commandButton value="scrollToSelection" onclick="PF('organigram').scrollToSelection(); return false;" />
            <p:commandButton value="Update Organigram" update=":form:organigram" />
        </h:panelGrid>
    </p:panel>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.