<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>
@Named @ViewScoped public class OrganigramView implements Serializable { private OrganigramNode rootNode; private OrganigramNode selection; private boolean zoom = false; private String style = "width: 800px"; private int leafNodeConnectorHeight = 0; private boolean autoScrollToSelection = false; private String employeeName; @PostConstruct public void init() { selection = new DefaultOrganigramNode(null, "Ridvan Agar", null); rootNode = new DefaultOrganigramNode("root", "CommerceBay GmbH", null); rootNode.setCollapsible(false); rootNode.setDroppable(true); OrganigramNode softwareDevelopment = addDivision(rootNode, "Software Development", "Ridvan Agar"); OrganigramNode teamJavaEE = addDivision(softwareDevelopment, "Team JavaEE"); addDivision(teamJavaEE, "JSF", "Thomas Andraschko"); addDivision(teamJavaEE, "Backend", "Marie Louise"); OrganigramNode teamMobile = addDivision(softwareDevelopment, "Team Mobile"); addDivision(teamMobile, "Android", "Andy Ruby"); addDivision(teamMobile, "iOS", "Stevan Jobs"); addDivision(rootNode, "Managed Services", "Thorsten Schultze", "Sandra Becker"); OrganigramNode marketing = addDivision(rootNode, "Marketing"); addDivision(marketing, "Social Media", "Ali Mente", "Lisa Boehm"); addDivision(marketing, "Press", "Michael Gmeiner", "Hans Peter"); addDivision(rootNode, "Management", "Hassan El Manfalouty"); } protected OrganigramNode addDivision(OrganigramNode parent, String name, String... employees) { OrganigramNode divisionNode = new DefaultOrganigramNode("division", name, parent); divisionNode.setDroppable(true); divisionNode.setDraggable(true); divisionNode.setSelectable(true); if (employees != null) { for (String employee : employees) { OrganigramNode employeeNode = new DefaultOrganigramNode("employee", employee, divisionNode); employeeNode.setDraggable(true); employeeNode.setSelectable(true); } } return divisionNode; } public void nodeDragDropListener(OrganigramNodeDragDropEvent event) { FacesMessage message = new FacesMessage(); message.setSummary("Node '" + event.getOrganigramNode().getData() + "' moved from " + event.getSourceOrganigramNode().getData() + " to '" + event.getTargetOrganigramNode().getData() + "'"); message.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, message); } public void nodeSelectListener(OrganigramNodeSelectEvent event) { FacesMessage message = new FacesMessage(); message.setSummary("Node '" + event.getOrganigramNode().getData() + "' selected."); message.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, message); } public void nodeCollapseListener(OrganigramNodeCollapseEvent event) { FacesMessage message = new FacesMessage(); message.setSummary("Node '" + event.getOrganigramNode().getData() + "' collapsed."); message.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, message); } public void nodeExpandListener(OrganigramNodeExpandEvent event) { FacesMessage message = new FacesMessage(); message.setSummary("Node '" + event.getOrganigramNode().getData() + "' expanded."); message.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, message); } public void removeDivision() { // re-evaluate selection - might be a differenct object instance if viewstate serialization is enabled OrganigramNode currentSelection = OrganigramHelper.findTreeNode(rootNode, selection); setMessage(currentSelection.getData() + " will entfernt werden.", FacesMessage.SEVERITY_INFO); } public void removeEmployee() { // re-evaluate selection - might be a differenct object instance if viewstate serialization is enabled OrganigramNode currentSelection = OrganigramHelper.findTreeNode(rootNode, selection); currentSelection.getParent().getChildren().remove(currentSelection); } public void addEmployee() { // re-evaluate selection - might be a differenct object instance if viewstate serialization is enabled OrganigramNode currentSelection = OrganigramHelper.findTreeNode(rootNode, selection); OrganigramNode employee = new DefaultOrganigramNode("employee", employeeName, currentSelection); employee.setDraggable(true); employee.setSelectable(true); } private void setMessage(String msg, FacesMessage.Severity severity) { FacesMessage message = new FacesMessage(); message.setSummary(msg); message.setSeverity(severity); FacesContext.getCurrentInstance().addMessage(null, message); } public OrganigramNode getRootNode() { return rootNode; } public void setRootNode(OrganigramNode rootNode) { this.rootNode = rootNode; } public OrganigramNode getSelection() { return selection; } public void setSelection(OrganigramNode selection) { this.selection = selection; } public boolean isZoom() { return zoom; } public void setZoom(boolean zoom) { this.zoom = zoom; } public String getEmployeeName() { return employeeName; } public void setEmployeeName(String employeeName) { this.employeeName = employeeName; } public String getStyle() { return style; } public void setStyle(String style) { this.style = style; } public int getLeafNodeConnectorHeight() { return leafNodeConnectorHeight; } public void setLeafNodeConnectorHeight(int leafNodeConnectorHeight) { this.leafNodeConnectorHeight = leafNodeConnectorHeight; } public boolean isAutoScrollToSelection() { return autoScrollToSelection; } public void setAutoScrollToSelection(boolean autoScrollToSelection) { this.autoScrollToSelection = autoScrollToSelection; } }