<div class="card">
<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" styleClass="mt-5">
<h:panelGrid columns="2" cellpadding="7">
<p:outputLabel for="@next" value="zoom" styleClass="text-secondary"/>
<p:selectBooleanCheckbox value="#{organigramView.zoom}">
<p:ajax process="@this" update=":form:organigram"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="@next" value="autoScrollToSelection" styleClass="text-secondary"/>
<p:selectBooleanCheckbox value="#{organigramView.autoScrollToSelection}">
<p:ajax process="@this" update=":form:organigram"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="@next" value="leafNodeConnectorHeight" styleClass="text-secondary"/>
<p:inputText value="#{organigramView.leafNodeConnectorHeight}">
<p:ajax process="@this" update=":form:organigram"/>
</p:inputText>
<p:outputLabel for="@next" value="style" styleClass="text-secondary"/>
<p:inputText value="#{organigramView.style}" size="100">
<p:ajax process="@this" update=":form:organigram"/>
</p:inputText>
</h:panelGrid>
<p:commandButton value="Scroll To Selection"
onclick="PF('organigram').scrollToSelection(); return false;"
styleClass="mt-3 mr-2"/>
<p:commandButton value="Update Organigram" update=":form:organigram" styleClass="mt-3"/>
</p:panel>
</h:form>
</div>
package org.primefaces.showcase.view.data;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import java.io.Serializable;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.component.organigram.OrganigramHelper;
import org.primefaces.event.organigram.OrganigramNodeCollapseEvent;
import org.primefaces.event.organigram.OrganigramNodeDragDropEvent;
import org.primefaces.event.organigram.OrganigramNodeExpandEvent;
import org.primefaces.event.organigram.OrganigramNodeSelectEvent;
import org.primefaces.model.DefaultOrganigramNode;
import org.primefaces.model.OrganigramNode;
@Named
@ViewScoped
@RegisterForReflection(serialization = true)
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;
}
}