Skip to Content

Customizing a Network Graph to Create an Org Chart

Network graph is a new control introduced in version 1.50 that allows you to display data as a network of nodes connected by lines. The nodes can be circular or rectangular and can be joined into groups. You can define custom attributes for nodes and groups of nodes as well as apply layout algorithms that define the graph’s appearance. Standard application of this controls looks like this:



Moreover, network graph is highly customizable and can be used in a variety of ways. I would like to show one of such customization variants for which this control was not primarily designed but can be used – Org Chart.

Imagine we have data with employees, their managers and colleagues, and we want to display this data as an organization hierarchy.

Let’s take a look at the key features of the network graph. With a network graph, you can:

  • Display tree-like org structure with all employees
  • For every employee, load employee’s manager
  • Easily search for all employees
  • Display members of the teams individually or as a single group
  • Apply color-coding to different teams or departments (not implemented in this example)

By the end of this tutorial, our org chart will look like this.



This example uses simulated dynamic loading (through JSON model) but you can just as well use it with OData service. In this example, each node can be collapsed and the root employee node has an upward arrow button that expands the tree one level up.

Let’s start with layout.


Layout algorithm



Network graph supports several layout algorithms. In this example, we use the default “layered“ algorithm with some small adjustments.

  • mergeEdges: This flag merges all lines leading from node into single line. The graph looks more compact with this setting
  • nodePlacement: There are 3 ways to position nodes within a layered algorithm. “Simple” node placement attempts to place nodes as close to each other as possible to achieve a “tree-like” overall appearance.
  • nodespacing: We will set this option to 40 to make spaces between the nodes smaller. Because it looks better, the org chart appears lighter and more elegant


Node customization

By default, the graph supports two node shapes

  • Box (rectangular)
  • Circle (circular)


In our example, we will use the box shape, with a few adjustments. By default,  a box-shaped node has an icon, a title, and attributes arranged as shown in the image below.


On the other hand, we want to have a single employee picture with a name below it. We also need to use attributes to display the number of this employee’s direct reports. We need to leave the title empty and use the description to hold the employee’s name.


   <NodeImage src="{src}"


Important settings for the node:

<Node description="{title}"


  • description: By default, a rectangular node displays an image and a title next to it (to the right). To modify this, we use an empty title and set the employee name as the description, which will be rendered below the image.
  • width: You must adjust the node’s width manually  to the image size. In our case, the image is  80px wide, while the node’s width is 90px.
  • attributes: Attributes display information about the team size. This option bind to its aggregation.
  • showActionLinksButton, showDetailButton: Hides the default action buttons (they are rendered after the user clicks the node), we will use custom buttons for all actions.
  • shape: Displays the node as a rectangle.


We need to bind the node to  more data from model that is not available in the properties. For such cases, we can use the customData binding.


   <core:CustomData key="supervisor" value="{supervisor}"/>
   <core:CustomData key="team" value="{team}"/>
   <core:CustomData key="location" value="{location}"/>


Using this data, we can show additional information about the employee, such as the team or location in the form of a popup.


Attributes are used to display team size.

   <ElementAttribute label="{label}" />


Line customization

With the lines, there is not much to customize in this example. We just hide the arrows by using the ‘arrowOrientation’ property.


   <Line from="{from}" to="{to}" arrowOrientation="None" press="linePress" />


To disable the default line popover we attach a ‘press’ event and set ‘bPreventDefault’.


GraphController.prototype.linePress = function (oEvent) {
   oEvent.bPreventDefault = true;


Dynamic data loading 

As mentioned before, we are trying to simulate an OData service. Even though our data is  stored in one JSON model, we manipulate it using filters the same way as you would do with OData service. To do so, we store an array of already loaded managers.

For every manager node, we create a special action button that triggers additional data loading. To achieve this, we attach an event handler to the “beforeLayouting” event where we manipulate all nodes. This event is triggered before the data is sent to the layout algorithm and rendered.


this._graph.attachEvent("beforeLayouting", function (oEvent) {


if (oNode.getKey() === this._sTopSupervisor) {
   sSupervisor = this._getCustomDataValue(oNode, "supervisor");
   if (sSupervisor) {
      oUpOneLevelButton = new ActionButton({
         title: "Up one level",
         icon: "sap-icon://arrow-top",
         press: function () {
            var aSuperVisors = oNode.getCustomData().filter(function (oData) {
                  return oData.getKey() === "supervisor";
               sSupervisor = aSuperVisors.length > 0 && aSuperVisors[0].getValue();

            this._sTopSupervisor = sSupervisor;


We add an “Up one level” button to the root manager node. Every manager has a “key” of his manager stored in the custom data, so we call “_loadMore” with this key.



GraphController.prototype._setFilter = function () {
   var aNodesCond = [],
      aLinesCond = [];
   var fnAddBossCondition = function (sBoss) {
      aNodesCond.push(new sap.ui.model.Filter({
         path: 'id',
         operator: sap.ui.model.FilterOperator.EQ,
         value1: sBoss

      aNodesCond.push(new sap.ui.model.Filter({
         path: 'supervisor',
         operator: sap.ui.model.FilterOperator.EQ,
         value1: sBoss

   var fnAddLineCondition = function (sLine) {
      aLinesCond.push(new sap.ui.model.Filter({
         path: "from",
         operator: sap.ui.model.FilterOperator.EQ,
         value1: sLine

   this._mExplored.forEach(function (oItem) {

   this._graph.getBinding("nodes").filter(new sap.ui.model.Filter({
      filters: aNodesCond,
      and: false

   this._graph.getBinding("lines").filter(new sap.ui.model.Filter({
      filters: aLinesCond,
      and: false


To simulate OData, we use filter objects. For each binding (nodes, lines), we create a filter representing the condition, such asid=’Boss1’, or manager =’Boss1’, or id=’Boss2’, or manager=’Boss2’, or a similar condition. The same applies to the lines. This narrows down the dataset and allows us to return only the managers and their teams that were already loaded.


Collapsing / expanding nodes


There are two ways to handle the expand/collapse behavior. Either the data is already loaded, so we simply hide the child nodes (this is the default network graph behavior), or the child nodes have to be loaded manually (as managers are not loaded with their team by default). In both cases, we need different buttons as shown in the code snippet below.


var sTeamSize = this._getCustomDataValue(oNode, "team");

if (!sTeamSize) {
   // employees without team - hide expand buttons
} else {
   if (this._mExplored.indexOf(oNode.getKey()) === -1) {
      // managers with team but not yet expanded
      // we create custom expand button with dynamic loading

      // this renders icon marking collapse status
      oExpandButton = new ActionButton({
         title: "Expand",
         icon: "sap-icon://sys-add",
         press: function () {
   } else {
      // manager with already loaded data - default expand button


As you can see, there are three cases we need to handle:

  • An employee without a team (the employee is not a manager) – we hide the expand/collapse button as there is nothing to expand.
  • A manager whose team has not been loaded yet – we create a new action button. In its press event, we call the already mentioneded “_loadMore” but with key of this node. This will load this manager’s team members.
  • A manager with already loaded team members – we show the default collapse/expand button and let the network graph run the show.


Custom popover

To display a custom popover, we must hide the default detail button, create a new one, and react to its press event. Again, we will use the ‘beforeLayouting’ event.



oDetailButton = new ActionButton({
   title: "Detail",
   icon: "sap-icon://person-placeholder",
   press: function (oEvent) {
      this._openDetail(oNode, oEvent.getParameter("buttonElement"));


We create an XML fragment which contains ‘QuickView’ to display employee details. We only need to create a new JSON model and bind it to the fragment. We use custom data bound to every node from the model (as described in the before in the beginning of the article). For more information about ‘QuickView’ , see the API Reference.


GraphController.prototype._openDetail = function (oNode, oButton) {
   var sTeamSize = this._getCustomDataValue(oNode, "team");

   if (!this._oQuickView) {
      this._oQuickView = sap.ui.xmlfragment("sap.suite.ui.commons.sample.NetworkGraphOrgChart.TooltipFragment", this);

   this._oQuickView.setModel(new JSONModel({
      icon: oNode.getImage() && oNode.getImage().getProperty("src"),
      title: oNode.getDescription(),
      description: this._getCustomDataValue(oNode, "position"),
      location: this._getCustomDataValue(oNode, "location"),
      showTeam: !!sTeamSize,
      teamSize: sTeamSize,
      email: this._getCustomDataValue(oNode, "email"),
      phone: this._getCustomDataValue(oNode, "phone")
   }));, this, function () {


Custom search


By default, search works  only with the data that the network graph has already loaded. Of course, when the data has to be loaded incrementally, this might be not sufficient, as the graph cannot display all data for the whole company (only maybe for a smaller company).

Fortunately, the Network Graph provides two events that allow us to fully customize how search works:




GraphController.prototype.suggest = function (oEvent) {
   var aSuggestionItems = [],
      aItems = this._oModel.getData().nodes,
      aFilteredItems = [],
      sTerm = oEvent.getParameter("term");

   sTerm = sTerm ? sTerm : "";

   aFilteredItems = aItems.filter(function (oItem) {
      var sTitle = oItem.title ? oItem.title : "";
      return sTitle.toLowerCase().indexOf(sTerm.toLowerCase()) !== -1;

   aFilteredItems.sort(function (oItem1, oItem2) {
      var sTitle = oItem1.title ? oItem1.title : "";
      return sTitle.localeCompare(oItem2.title);
   }).forEach(function (oItem) {
      aSuggestionItems.push(new sap.m.SuggestionItem({
         text: oItem.title

   oEvent.bPreventDefault = true;


The suggest function is called whenever a user wants to display data matching the filter condition. In this case, we  simply go through all data in the JSON model. . In such a case, one would have to create a custom function accepting search parameters.


The important part is, once you obtain the data you should call the ‘setSearchSuggestionItems’ method with an array of items to be displayed in the search field. Don’t forget to enable ‘preventDefault’, as calling OData service is asynchronous and we want to prevent default behavior until the data has been fully loaded. = function (oEvent) {
   var sKey = oEvent.getParameter("key");

   if (sKey) {
      this._mExplored = [sKey];
      this._sTopSupervisor = sKey;

      oEvent.bPreventDefault = true;


Search is triggered after the user selects an item from the suggested items. It resets all current items and display only the item that the user selected.


Additional customization and usage

There are several events provided by the Network Graph control that you can use for further customization. Moreover, most of the events support  ‘preventDefault’ , so you can prevent the default behavior, as shown in this table.


Object Event Result
Node press Action buttons won’t be shown.
Node collapseExpand Nodes won’t expand (collapse).
Node hover Hover class won’t be added.
Line press Dialog is not shown
Line hover Hover class won’t be added.
Group showDetail Detail dialog won’t be shown.


In this example, I’ve shown you how to customize network graph to edge cases it was not primary designed for. I hope you found this tutorial useful. If you have any questions or suggestions, please share them in the comments below. To explore other samples of network graph usage, see this link.

You must be Logged on to comment or reply to a post.
  • Hi great post. I am new to this I wanted to know what is to be binded in the Graph>nodes and Node>attributes and attributes>ElementAttribute-label if the graph.json looks like below

    	"graph": {
    		"graphName": "myGraph",
    		"nodes": [{
    			"id": "Oceanus",
    			"type": "titan",
    			"residence": "Othrys"
    			"id": "Tethys",
    			"type": "titan",
    			"residence": "Othrys"
    		"links": [{
    			"key": 1,
    			"source": "Oceanus",
    			"target": "Tethys",
    			"type": "marriedTo"
    			"key": 2,
    			"source": "Tethys",
    			"target": "Oceanus",
    			"type": "marriedTo"

    I get the error missing template or factory function for aggregation attributes of Element

    • hello if you want to bind attributes i would suggest model structure like this one:

        "nodes": [
            "key": 3,
            "title": "Broth",
            "icon": "sap-icon://competitor",
            "shape": "Box",
            "status": "Success",
            "attributes": [
                "label": "Energy",
                "value": "780 kcal"
                "label": "Protein",
                "value": "49 g"
                "label": "Carb",
                "value": "52 g"
                "label": "Fat",
                "value": "11 g"
       ], ....


      • and XML binding:

            attributes="{path:'attributes', templateShareable:true}">
        	<ElementAttribute label="{label}" 


  • Hi Libor,


    Very nice post! Can you please give us more detail where do you place the following code ?


       <NodeImage src="{src}"

    I was not able to find NodeImage control in the graph library.

    Kind regards,

    Loucas Stylianou

  • Hi Libor,

    I encountered one more problem. I am not specifying any layouting algorithm. But still I get the following error

    Error in layouting algorithm. - SecurityError: Failed to construct 'Worker': Script at '' cannot be accessed from origin 'https://webidetesting6****-d*****'.

    Is this something similar to cross origin thing or is this because I haven't specified any layout algortihm?


    • Hello,

      for security reasons worker refuse to be created from other domain so you need to have sap-ui-core.js src on same domain as the app itself.

      We are working on a fix to disable worker for situations where this is for any reason not possible, but it's not deployed yet.




    • hello, its probably the same issue, ive answered earlier:

      for security reasons worker refuse to be created from other domain so you need to have sap-ui-core.js src on same domain as the app itself.

      We are working on a fix to disable worker for situations where this is for any reason not possible, but it’s not deployed yet.

  • Hi Libor,

    thanks a lot for this nice blog. I did the same in the past by using a D3.js libary and it was a hell of work comparing to this.

    Do you know if drag-and-drop of nodes will be supported as well?




    • Hello,

      drag&drop, has the problems that we don't have separated algorithm for positioning lines. In future there are plans to introduce some our own layouting  algorithms for basic scenarios, in such case i guess drag&drop nodes could be relatively easy.

      Anyway I guess it will be several months minimum till we get there and I can't promise this will 100 % happen.



  • Thank you for this great post. Could you give me a short idea of what the corresponding oData Service has to look like? What entities will I need to reflect the hierarchy. I did not really understand that part when looking at the sample in the sapui5 Demo Kit.

    Thank you

  • Hi Libor,

    I want to customize the Node event here:

    I want to show the action buttons on hover of the node. And was able to achieve this by attaching the hover event and a listener. But I also want to hide it when I do a mouse out. How to achieve mouse out on a node?

    Please help!!


    Ramamani M

  • Dear Libor

    did you ever have a situation where you had to draw assistant positions in your OrgChart? How could this be achieved?

    An assistant position for us should be shown on a side line, below the position they assist, but above those who report to that same position.

    Thanks for some input.

    • Hello,

      not sure I understand correctly.

      By theory, you can try move your assistants nodes up a bit in the post processing routine (affterLayouting event) and call setX,setY.


      Of course lines have to be changed accordingly.


      • Dear Libor

        thanks for the reply. I was trying to make my request work with moving up the respective nodes but this is not the final solution that I need. I would rather need the assistant positions on a separate row and with only straight lines to the side / without a kink.
        You can see two assistant positions in the picture below.

        Do you have an idea on how to realize this?

        Thanks and best regards

  • Dear Libor,

    I am trying to create an OrgChart, but I have too many nodes on the same level.

    Is it possible to put them in multiple rows? For example, dividing 20 nodes into 4 rows of 5?

    Or maybe can I limit the width of the graph content to force the rendering in multiple rows?

    Thanks for your help.



  • Hello there,

    great blog to begin with.

    I have to use the Network-Graph to show some processes within our company.

    For this, I wanna use the standard Network-Graph. My data should come from an OData-Service.

    Am I right with my assumption that I need only two entities for this? One for the lines and one for the Nodes with a relationship?



  • Dear Libor,

    I changed a few things in my OrgChart and now it seems working fine but I notice one issue that I do not like.

    Even in the example, nodes are not sorted properly by name, in fact, Doris is the last one in her row.  (

    I am sure that my entries (nodes and lines) in the DB are adequately sorted and even the algorithm gets them in order but after the rendering, they are not sorted alphabetically.

    Is there a way to fix this problem?

    Thanks very much.




    • Hello,

      I am afraid we are not able to change such stuff as the layouting algorithm is out of our hands. i don't see any way how to achieve this 🙁

      • Hi,

        I was trying to understand how nodes are sorted, but I don't see any logic.

        In fact, I did some tests (sorting my nodes before the layout, generate lines dynamically and much more) but I can't understand the algorithm.

        Do you know anything about that? I thought if we can't change the layouting algorithm, maybe we can "simulate" the sorting in a different way.

        Thanks for your answer Libor.

  • Hello there,

    I’ve got yet another question.

    I try to build a Tree in which there is an explicit order like:

    But there seems to be no order, in which the nodes are arranged within one level. So my try looks more like this:

    So is there a way to bring order to my tree? Without the use of the “x” and “y” coordinates?

    Thank you in advance


  • Hi Libor Pisa,


    I am working on network graph to display  Org Structure and I am getting error for some of the data.

    If any Node having multiple supervisor that time getting error : Data not consistent.

    Below is the scenario :

    Suppose NODE : 5000123 report to 5000130 & 5000140 at the same time so 500023 having multiple supervisor and both supervisor are in different organization.


    Please could you suggest how to resolve the issue.


    Thanks & Regards,


  • Hi Libor,

    Thanks for the post, we were planning on using the NetworkGraph control to replace a 3rd party org chart solution, but one issue i'm having is doesn't seem like NetworkGraph supports exporting to an image (JPG/PNG) or PDF. Are you aware of any way? Or if this is on the planned roadmap for the NetworkGraph control (i'm on UI5 1.65)

    Looks good otherwise but this one is a show stopper for us. I've tried some other approaches (getting SVG and converting to canvas via canvg library and downloading this and also copying the HTML nodes in to a canvas using html2canvas library) but neither of these seem to work.