-->

ساخت چارت سازمانی از لیست های شیرپوینتی با استفاده از جاوااسکریپت

در این آموزش، ما در مورد چگونگی ایجاد یک وب پارت چارت سازمانی (JavaScript (jsom در شیرپوینت آنلاین 2013/2016 بحث خواهیم کرد.

در شکل زیر لیستی که از سلسله مراتب سازمانی کارمندان ایجاد کرده ایم مشاهده می کنید.

1

در شکل زیر هم نوع هر ستون مشخص شده است.

2

کد زیر برای ایجاد چارت سازمانی مورد استفاده قرار می گیرد. شما برای ایجاد nodeهای چارت خود باید google API را ایجاد کنید.

<style>
    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }

/* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    table {
        border-collapse: separate !important;
    }

    .google-visualization-orgchart-node {
        background: #7fcde6 !important;
        border: 1px solid #d82828 !important;
        padding-bottom: 15px !important;
        padding-top: 15px !important;
        width: 165px !important;
    }
    .google-visualization-orgchart-lineleft {
        border-left: 1px solid #e61717 !important;
    }
    .google-visualization-orgchart-linebottom {
        border-bottom: 1px solid #e61717 !important;
    }
    .google-visualization-orgchart-node {
        color: #3a3a38;
        
    }
    .google-visualization-orgchart-lineright {
        border-right: 1px solid #e61717 !important;
    }
    .plus {
        position: relative;
        top: 0px;
        height: 24px;
        cursor: pointer;

    }

</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>  
<script>
    $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', drawChart);
    });
</script>

<script type="text/javascript">  
google.load('visualization', '1', { packages: ['table', 'orgchart'] });
google.setOnLoadCallback(drawChart);

     var collListItem =null;
     var dataArray = []; 
    function drawChart() {

        var clientContext = new SP.ClientContext("https://pikasha12.sharepoint.com/sites/DLH");
        var oWebsite = clientContext.get_web();
        var oList = oWebsite.get_lists().getByTitle('Employee Master List');
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<View><Query></Query></View>");
        collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed)

    }
    function onQuerySucceeded(sender, args) {

        var listItemInfo = '';

        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {

            var oListItem = listItemEnumerator.get_current();
            dataArray.push([oListItem.get_item('Emp_Id'), oListItem.get_item('Full_Name'), oListItem.get_item('Department'), oListItem.get_item('Super_Visor_Name'), oListItem.get_item('Email'), oListItem.get_item('Position'), oListItem.get_item('Nationality'), oListItem.get_item('Contact'), oListItem.get_item('Super_Visor_ID'),oListItem.get_item('Photo').$1_1])

        }
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        var i = 0

        for (i = 0; i < dataArray.length; i++) {

            var Emp_ID = dataArray[i][0].toString();
            var Full_Name = dataArray[i][1];
            var Department = dataArray[i][2];
            var Sup_Name = dataArray[i][3];
            var email = dataArray[i][4];
            var Position = dataArray[i][5];
            var NATIONALITY = dataArray[i][6];
            var Mobile = dataArray[i][7];
            var Sup_ID = dataArray[i][8] != null ? dataArray[i][8].toString() : "Enjoy SharePoint";
			var photo = dataArray[i][9];;

            data.addRows([[{
                v: Emp_ID,
                f: Full_Name + '<br /><b>' + Department + '<br /><b>' + email + '<br /><b>' + NATIONALITY + '<br /><b>' + Position + '<div>(<span>' + Mobile + '</span>)</div><img height="50px" width="50px" src="' + photo + '" /><div ><img class="plus" src="https://pikasha12.sharepoint.com/sites/DLH/PublishingImages/Emp_Photo/plus.png"></div>'
            }, Sup_ID]]);
        }
        var chart = new google.visualization.OrgChart($("#chartOrg")[0]);
        google.visualization.events.addListener(chart, 'select', function () {
            // get the row of the node clicked
            var selection = chart.getSelection();
            var row = selection[0].row;
            // get a list of all collapsed nodes
            var collapsed = chart.getCollapsedNodes();
            // if the node is collapsed, we want to expand it
            // if it is not collapsed, we want to collapse it
            var collapse = (collapsed.indexOf(row) == -1);
            chart.collapse(row, collapse);
            // clear the selection so the next click will work properly
            chart.setSelection();
        });


        chart.draw(data, { allowHtml: true, allowCollapse: true });
       
    }

    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() +

            '\n' + args.get_stackTrace());

    }
</script> 
<div id="chartOrg">  
</div> 

در کد بالا ، باید نام سایت و نام لیست را بر اساس سایت SharePoint خود تغییر دهید. پس از آماده شدن کد، آنرا کپی کرده و آن را در Script Editor قرار دهید.

در نهایت شما نتیجه ی زیر را مشاهده خواهید کرد.

3

ساخت چارت سازمانی از لیست های شیرپوینتی با استفاده از جاوااسکریپت

برترین مطالب آموزشی

این آموزش به سه بخش  اصلی تقسیم می شود: دریافت آیتم های انتخاب شده با استفاده از
در این مقاله جایگزین کردن فرم نینتکس را با پاورفرم توضیح خواهیم داد. این مقاله به دو بخش
در این آموزش، ما در مورد چگونگی ایجاد یک وب پارت چارت سازمانی (JavaScript (jsom در شیرپوینت آنلاین
برای اینکه ارتباط شیرپوینت، Lync و Nintex را برقرار کنیم باید به صورت زیر عمل کنیم:
دانلود کتاب آموزشی شیرپوینت مقدمه: شما برای سازمان خود نیاز به نرم افزاری دارید که بتواند
یکی از قابلیت های مهم نرم افزار SharePoint ارتباط کامل با مجموعه آفیس می­باشد ...  
آموزش پاورفرم - اسکریپت های کاربردی اسکریپت های مربوط به گرید   مقدار دهی به آیتم های
ایجاد آیتم در یک لیست با استفاده از JavaScript object model (jsom) کد مورد نظر را در یک script
آموزش پاورفرم - اسکریپت های کاربردی  اسکریپت های مربوط به تاریخ برای مقداردهی کنترل
همانطور که مستحضر هستید اکشن عملیات موازی یا Parallel   همانطور که مستحضر هستید اکشن
//courtesy of BoogieJack.com function killCopy(e){ return false } function reEnable(){ return

برخی از سامانه های طراحی شده

meeting
09 اسفند 1398
5:00pm 6:00pm
شیرپوینت سنتر

SharePointCenter

سامانه جلسات تعریف و زمانبندی
cache/resized/c070ec9caba824f704ac176e92f52d5a.jpg
09 اسفند 1398
5:00pm 6:00pm
شیرپوینت سنتر

SharePointCenter

سامانه مدیریت مستندات قابلیت طبقه
3
18 بهمن 1398
5:00pm 6:00pm
شیرپوینت سنتر

SharePointCenter

سامانه مدیریت وظایف امکان تخصیص
3
06 بهمن 1398
5:00pm 6:00pm
شیرپوینت سنتر

SharePointCenter

سامانه مدیریت دانش قابلیت ذخیره
cache/resized/b136b44ef739ccdaf6df0cddbe3dd750.jpg
26 آذر 1397
5:00pm 6:00pm
سامانه تحت‌وب مدیریت پروژه و سازمان در
cache/resized/4dcba876779c829aac4282a4b42207a3.jpg
26 آذر 1397
5:00pm 6:00pm
یکی از مهمترین مسایل در طراحی شیرپوینت قسمت
cache/resized/5825b621af6c25f9bd1fa11d232f174e.jpg
26 آذر 1397
5:00pm 6:00pm
اهداف هوش تجاری بهینه سازی، تحلیل،کنترل و
cache/resized/2155eeaacb47eb990b813d3f9529be73.jpg
29 فروردين 1394
2:00pm 6:00pm
سیستم مدیریت انبارچیست؟ انبار محل و فضایی
cache/resized/f86aefb848fcf6f4b935c7f13ea63686.jpg
29 فروردين 1394
3:00pm 4:00pm
اطلاعات شرکت ثبت اطلاعات شرکتی که میخواهد
cache/resized/d6c35a271c74db1ff66e075b9ce5f5eb.jpg
29 فروردين 1394
2:00pm 5:00pm
خدمات دپارتمان شیرپوینت خدمات دپارتمان
modules/mod_sj_k2_extraslider/assets/images/nophoto.png
29 فروردين 1394
5:00pm 6:00pm
سامانه مکاتبات اداری طراحی
cache/resized/a49765f249cd5b84b49f710953491c16.jpg
29 فروردين 1394
5:00pm 6:00pm
خدمات دپارتمان شیرپوینت خدمات دپارتمان

تماس با ما

شیرپوینت سنتر

  • آدرس: استان تهران ، خیابان بهشتی ، خیابان سهروردی شمالی ، خیابان امامی ، پلاک 8
  • شماره تماس: 021-77465290  و 09127192570
  • ایمیل: info@sharepointcenter.ir

دپارتمان شیرپوینت ایران

بالا