1

Reference of plugin https://www.jqueryscript.net/demo/Fully-Customizable-Organisational-Chart-Plugin-With-jQuery-OrgChart/

I am using List schema as TeamMember(PeoplePicker),FunctionalManager(PeoplePicker),Department(SingleLinetext) and trying below code to create org chart in SharePoint

But it only create first node not the rest but however if create FunctionalManager as Lookup column it work but the requirement have with People picker can any one help where making mistake

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css'/> 
<div id="chart-container"></div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js'></script>
<script type="text/javascript">
function Employee (ID,Name,Manager,Designation) {
    this.ID = ID;
    this.Name= Name;
    this.Manager = Manager;
    this.Designation = Designation;
}
function GetOrgJSON(employeeList,manager){
    var note = '';
    var employeeProcessed=[];
    for(var i=0;i<employeeList.length;i++){
        var objEmp = employeeList[i];      
        if(objEmp.Manager == manager && employeeProcessed.indexOf(objEmp.Name) < 0 ){
            note += '{"name":"'+objEmp.Name+'",';
            note += '"title":"'+objEmp.Designation+'"';
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note +=',"children": [' + empUl + ']';
            }
            note +='},';
        }       
    } 
    return note;
}
(function($){
  $(function() {
    $.ajax({
        url: "https://XXXXXX.sharepoint.com/sites/XXXXXX/_api/web/lists(guid'627bae98-f8f4-437d-91c5-14ef8e10eef3')/items?$select=ID,TeamMember/ID,TeamMember/Title,FunctionalManager/ID,FunctionalManager/Title,Department&$expand=TeamMember/Id,FunctionalManager/Id",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var employeeList = [];
                $.each(data.d.results,function(i,employee){
                    var title = employee.TeamMember.Title;
                    var ID = employee.ID;
                    var manager = employee.FunctionalManager.ID!= undefined ? employee.FunctionalManager.ID:"0";
                    var designation=employee.Department;
                    var objEmp = new Employee(ID,title ,manager,designation);
                    employeeList.push(objEmp);
                });
                var datascource = GetOrgJSON(employeeList,"0").replace(/},]/g,"}]");
                datascource=datascource.slice(0, datascource.length-1);
                
                $('#chart-container').orgchart({
                  'data' : JSON.parse(datascource),
                  'nodeContent': 'title'
                }); 
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });  
  });
})(jQuery);
</script>
6
  • What's the error while using person or group column? Nov 17, 2021 at 12:15
  • It does not give error but unable to compare it create child node when debugging
    – kumar
    Nov 17, 2021 at 12:28
  • Both lookup & person or group columns have similar properties like .ID & .Title. So, it should have worked for you. Nov 17, 2021 at 12:59
  • yes tried but it only show top node
    – kumar
    Nov 17, 2021 at 13:05
  • Try changing line var manager = employee.FunctionalManager.ID!= undefined ? employee.FunctionalManager.ID:"0"; to var manager = employee.FunctionalManager.ID ? employee.FunctionalManager.ID : "0"; in case of person or group and see if it works. Nov 17, 2021 at 13:11

1 Answer 1

1

i am able to resolve my code its small change in code below is the updated code

below is the change

var ID = employee.TeamMember.ID;

updated code

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css'/> 
<div id="chart-container"></div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js'></script>
<script type="text/javascript">
function Employee (ID,Name,Manager,Designation) {
    this.ID = ID;
    this.Name= Name;
    this.Manager = Manager;
    this.Designation = Designation;
}
function GetOrgJSON(employeeList,manager){
    var note = '';
    var employeeProcessed=[];
    for(var i=0;i<employeeList.length;i++){
        var objEmp = employeeList[i];      
        if(objEmp.Manager == manager && employeeProcessed.indexOf(objEmp.Name) < 0 ){
            note += '{"name":"'+objEmp.Name+'",';
            note += '"title":"'+objEmp.Designation+'"';
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note +=',"children": [' + empUl + ']';
            }
            note +='},';
        }       
    } 
    return note;
}
(function($){
  $(function() {
    $.ajax({
        url: "https://XXXXXX.sharepoint.com/sites/XXXXXX/_api/web/lists(guid'627bae98-f8f4-437d-91c5-14ef8e10eef3')/items?$select=ID,TeamMember/ID,TeamMember/Title,FunctionalManager/ID,FunctionalManager/Title,Department&$expand=TeamMember/Id,FunctionalManager/Id",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var employeeList = [];
                $.each(data.d.results,function(i,employee){
                    var title = employee.TeamMember.Title;
                    var ID = employee.TeamMember.ID;
                    var manager = employee.FunctionalManager.ID!= undefined ? employee.FunctionalManager.ID:"0";
                    var designation=employee.Department;
                    var objEmp = new Employee(ID,title ,manager,designation);
                    employeeList.push(objEmp);
                });
                var datascource = GetOrgJSON(employeeList,"0").replace(/},]/g,"}]");
                datascource=datascource.slice(0, datascource.length-1);
                
                $('#chart-container').orgchart({
                  'data' : JSON.parse(datascource),
                  'nodeContent': 'title'
                }); 
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });  
  });
})(jQuery);
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.