Friday, March 2, 2012

Type 2: Organization Chart.



Step 1: Create new list Employees  include fields:
FirstName : Single line of text
LastName: Single line of text
FullName: Calculated (=FirstName&" "&LastName)
UserName: Person or Group
Position: Lookup (Positions List)
Department: Lookup (Departments List)
Company: Single line of text
MobilePhone: Single line of text
Manager: Person or Group
Step 2: Create new  Webpart Solution name is OrgChartForList_LeaveFormApp
Step 3: Create new Folder name is CustomScript
Step 4: Copy 2 files javascript (jquery-1.4.2.js, jquery.SPServices-0.5.6.js) to Folder Script and create new file script in folder Script name is ExternalJavaScript.js
Step 5: Copy code below to method CreateChildControls()
Literal literal = new Literal();
literal.Text = "<div id='OrgChat1'></div>";
this.Controls.Add(literal);
Page.ClientScript.RegisterClientScriptInclude("TheFirtScript""wpresources/jquery-1.4.2.js");
Page.ClientScript.RegisterClientScriptInclude("TheSecondScript""wpresources/jquery.SPServices-0.5.6.js");
            
Page.ClientScript.RegisterClientScriptInclude("TheThirtScript""https://www.google.com/jsapi");
Page.ClientScript.RegisterClientScriptInclude("MainScript""wpresources/ExternalJavaScript.js");
  
Step 6: Open file ExternalJavaScript.js  and copy Code javascript below to it
////////////////////////////////////////////////////////////////////////////////////////////////////////////
function GetPermission() {
    var manager = '';
    var teamLeader = '';
    var employee = '';

    try {
        $().SPServices({
            operation: "GetListItems",
            //webURL: "http://acer:8888",
            async: false,
            listName: "Employees",

            completefunc: function (xData, Status) {
                //alert(xData.responseXML.xml);
                $(xData.responseXML).find("z\\:row").each(function () {
                    var _position = $(this).attr("ows_Position");
                    _position = _position.split('#');
                    _position = _position[1];

                    var _userName = $(this).attr("ows_UserName");
                    _userName = _userName.split('#');
                    _userName = _userName[1];

                    var _manager = $(this).attr("ows_Manager");
                    _manager = _manager.split('#');
                    _manager = _manager[1];

                    if (_position == "Manager") {
                        manager += _userName + "|" + _position + "|" + _manager + "@";
                    }
                    else {
                        if (_position == "TeamLeader") {
                            teamLeader += _userName + "|" + _position + "|" + _manager + "@";
                        }
                        else {
                            if (_position == "Employee") {
                                employee += _userName + "|" + _position + "|" + _manager + "@";
                            }
                        }
                    }
                });
            }
        });
    }
    catch (e) { alert(e); }
    return manager + "*" + teamLeader + "*" + employee;
}
var display = GetPermission();
//alert(display);
display = display.split('*');
var manager = display[0];
var teamLeader = display[1];
var employee = display[2];

var managerDetail = manager.split('@');
var teamLeaderDetail = teamLeader.split('@');
var employeeDetail = employee.split('@');

////////////////////////////////////////////////////////////////////////////////////////////////////////////
google.load('visualization''1', { packages: ['orgchart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string''Name');
    data.addColumn('string''Manager');
    data.addColumn('string''ToolTip');

    data.addRows([
                        [{ v: 'CEO', f: 'CEO<div style="color:red; font-style:italic">President</div>' }, '''The President']
                      ]);
    for (var i = 0; i < managerDetail.length - 1; i++)//UserName|Position|Manager
    {
        var managerDetail_Detail = managerDetail[i].split('|');
        data.addRows([
                        [{ v: '' + managerDetail_Detail[0] + '', f: '' + managerDetail_Detail[0] + '<div style="color:red; font-style:italic">' + managerDetail_Detail[1] + '</div>' }, 'CEO''CEO']
                      ]);
    }

    for (var i = 0; i < teamLeaderDetail.length - 1; i++)//UserName|Position|Manager
    {
        var teamLeaderDetail_Detail = teamLeaderDetail[i].split('|');
        data.addRows([
                     [{ v: '' + teamLeaderDetail_Detail[0] + '', f: '' + teamLeaderDetail_Detail[0] + '<div style="color:red; font-style:italic">' + teamLeaderDetail_Detail[1] + '</div>' }, '' + teamLeaderDetail_Detail[2] + '''']
              ]);
    }

    for (var i = 0; i < employeeDetail.length - 1; i++)//UserName|Position|Manager
    {
        var employeeDetail_Detail = employeeDetail[i].split('|');
        data.addRows([
                     ['' + employeeDetail_Detail[0] + '''' + employeeDetail_Detail[2] + '''']
              ]);
    }
    var chart = new google.visualization.OrgChart(document.getElementById('OrgChat1')); //chartdivCEWP
    chart.draw(data, { allowHtml: true });
}



Step 7: Copy 3 file in file Script (jquery-1.4.2.js, jquery.SPServices-0.5.6.js, ExternalJavaScript.js) to your  folder  wpresources with path below (C:\inetpub\wwwroot\wss\VirtualDirectories\8888\wpresources)
Step 8: Build and Deploy Project
Step 9: Open List Employees  in  sharepoint site
Step 10: Create data below
Step 11: Click Site Action | Edit Page | Insert WebPart | Custom | add webpart OrgChartForList
and see result below

Guide deploy project:
Download file .rar name is OrgChart  at here http://www.mediafire.com/file/sih58w6es9hg7od/OrganizationChart.rar include: List template (Positions, Departments, ReportOnChartLeaveForm) , Script, Project at here
Step 1: Open Project which you downloaded to your computer
Step 2: Click left mouse to project OrgChartForList_LeaveFormApp
Step 3: Click properties and change Site Url to your  site
Step 4: Build and Deploy Project
Step 5: Create new List base on list template (Positions, Departments, Employees)
Step 6: Verify Fields Position and Department in list Employees (delete and create new)
Step 7: Copy 3 files JS (jquery-1.4.2.js, jquery.SPServices-0.5.6.js, ReportChartForListLeaveForm.js) to folder  wpresources with path below C:\inetpub\wwwroot\wss\VirtualDirectories\8888\wpresources

0 comments:

Post a Comment