How to render an organizational chart (OrgChart) in AppGini

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

How to render an organizational chart (OrgChart) in AppGini

Post by jsetzer » 2018-12-24 07:36

Good morning AppGineers!

A couple of days ago I had to model a hierarchical tree of organizational units (OU) and wanted to give the users a visual presentation. I have found this JQuery library which is quite easy to use and to integrate into appgini:

https://github.com/dabeng/OrgChart

This is the result right within my "nodes" table view:
chrome_2018-12-24_07-36-53.png
chrome_2018-12-24_07-36-53.png (32.84 KiB) Viewed 5037 times

There are many demos and code samples of how to use the library:

The simplest way is to build a list of items with nested lists in HTML as shown in the sample code below:

1. Add the script

Code: Select all

<script type="text/javascript" src="js/jquery.orgchart.js"></script>

2. Add a container

Code: Select all

<div id="chart-container"></div>
3. Add your hierarchy using html-lists (ul/li)

You can use AppGini's sql() function in PHP to retrieve the required data from your database. It can be a node structure (parent/child) or any other related records. Use PHP to generate an unordered list <ul> with list items <li>. For branches you will have to place another <ul> within an existing <li></li>.

This is sample data from one of their demo pages:

Code: Select all

<ul id="ul-data">
    <li>Lao Lao
      <ul>
        <li>Bo Miao</li>
        <li>Su Miao
          <ul>
            <li>Tie Hua</li>
            <li>Hei Hei
              <ul>
                <li>Pang Pang</li>
                <li>Xiang Xiang</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  
4. Render

Let the library render the chart based on your data.

Code: Select all

<script type="text/javascript">
    $(function() {

      $('#chart-container').orgchart({
        'data' : $('#ul-data')
      });

    });
  </script>
You can also add links to every node so the chart becomes interactive. You can see this in action here:
(The screen-recording is too large for uploading here. Sorry for inconveniance!)

https://www.bizzworxx.de/2018-12-24_08-11-35/


Best regards,
Jan

PS: The library supports drag & drop of nodes. On a drop-event you can POST the id of the dragged-node and the id of the drop-target-node to the server using AJAX and update your database.

PPS: I wish you a peaceful time and a happy new year.
Best wishes to all of you from Kiel/Northern Germany!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: How to render an organizational chart (OrgChart) in AppGini

Post by jsetzer » 2018-12-26 05:43

4. Render

Let the library render the chart based on your data.

<script type="text/javascript">
$(function() {

$('#chart-container').orgchart({
'data' : $('#ul-data')
});

});
</script>
Sorry, I have overseen one detail when I was copying and wasting this sample code here:

In step 4 you have to use "$j" instead of "$". So here is the same script for AppGini developers:

Code: Select all

<script type="text/javascript">
  $j(function() {

    $j('#chart-container').orgchart({ 
      'data': $j('#ul-data')
    });
  });
</script>
Best regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

Re: How to render an organizational chart (OrgChart) in AppGini

Post by a.gneady » 2019-01-03 14:28

That's awesome! Thanks a lot for sharing, Jan ^_^
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

Post Reply