JARCH SHOWCASE
JARCH SHOWCASE
Organigram - since v6.0.8
  • 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
<a: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>

    <a:growl id="growl" />

    <a: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}">

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

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

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

        <a:organigramNode type="division"
                          styleClass="division"
                          icon="ui-icon-suitcase"
                          iconPos="left">
            <h:outputText value="#\{node.data}" />
        </a:organigramNode>

        <a:organigramNode type="employee"
                          styleClass="employee"
                          icon="ui-icon-person">
            <h:outputText value="#\{node.data}" />
        </a:organigramNode>
    </a:organigram>

    <a:contextMenu for="organigram" nodeType="employee">
        <a:menuitem value="fire employee"
                    update="organigram"
                    icon="ui-icon-close"
                    actionListener="#\{organigramView.removeEmployee()}" />
    </a:contextMenu>

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

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

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

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

    </a:dialog>
</a:form>

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

            <h:outputLabel value="autoScrollToSelection" />
            <a:selectBooleanCheckbox value="#\{organigramView.autoScrollToSelection}">
                <a:ajax process="@this" update=":form:organigram" />
            </a:selectBooleanCheckbox>

            <h:outputLabel value="leafNodeConnectorHeight" />
            <a:inputText value="#\{organigramView.leafNodeConnectorHeight}">
                <a:ajax process="@this" update=":form:organigram" />
            </a:inputText>

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

            <a:commandButton value="scrollToSelection" onclick="PF('organigram').scrollToSelection(); return false;" />
            <a:commandButton value="Update Organigram" update=":form:organigram" />
        </h:panelGrid>
    </a:panel>
</a:form>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.