آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
نحوه استفاده از React.js در شیرپوینت با استفاده از Rest Api برای بازیابی اطلاعات
مثال گردش کار با Nintex
بهمن ۶, ۱۳۹۵
نکات و ترفندهای فرآیند ساز نینتکس
آموزش نکات و ترفندهای فرآیند ساز نینتکس
اردیبهشت ۳۰, ۱۳۹۶

نحوه استفاده از React.js در شیرپوینت

در شیرپوینت ۲۰۱۳ به بالا، با استفاده از قابلیت های Client Object Model و Rest Api، استفاده از فریم ورک هایی نظیر angular و React میسر شده است.
در این مقاله یک نمونه استفاده از React.js و Rest Api  شیرپوینت را بررسی خواهیم کرد.

ابتدا کمی با این تکنولوژی ها آشنا شویم:

React.js

React یک کتابخانه متن‌باز جاوا اسکریپتی، برای ساخت رابط کاربری به صورت پویا، بر پایه تغییر وضعیت اولیه المان‌ها (تگ‌ها) نسبت به داده‌های وارد شده از سمت سرور یا داده‌های ایجاد شده در سمت کاربر، برای ساخت برنامه‌های تک‌صفحه‌ای در بستر وب است. این کتابخانه توسط فیس بوک ساخته شده و توسط فیس‌بوک، اینستاگرام و جمعی از شرکت‌ها و اشخاص منفرد، توسعه داده شده و نگهداری میشود. (برگرفته شده از سایت  دات نت تیپس) برای آشنایی و یادگیری React به این لینک بروید.

SharePoint Rest Api

با استفاده از Rest Api  شیرپوینت، توسعه دهندگان می توانند به صورت ریموت به شیرپوینت متصل شوند و عملیات های crud  (خواندن، درج، بروزرسانی، حذف) را انجام دهند. همچنین این سرویس از استاندارهای odata هم پشتیبانی می کند.

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

Get to know the SharePoint 2013 REST service

Complete basic operations using SharePoint 2013 REST endpoints

برای نمونه به سناریوی زیر توجه فرمایید :

در پورتال شیرپوینت با استفاده از لیست Discussion، تالار گفتگوی سازمانی ایجاد شده است. نیاز است که ۵ مبحث اخیر برای اطلاع رسانی مباجث در صفحه اول پورتال نمایش داده شود.

نحوه پیاده سازی

    1. ایجاد یک لیست از نوع Discussion (مباحث) و درج چند مطلب تستیلیست مباحث در شیرپوینت
    2.  فایل های پیش نیاز را در کتابخانه ای از شیرپوینت بارگذاری نمایید.
      • فایل فشرده را زیر دانلود و پس از اکسترت به صورت تصویر زیر در یکی از کتابخانه های شیرپوینت بارگذاری نمایید.
      • SGReact.zipفایل های پیشنیاز react.js در شیرپوینت
    3. در فایل disc.js  نام لیست ها را همانند تصویر زیر اصلاح نمایید.
      • برای اصلاح فایل disc.js می توانید از شیرپوینت دیزاینر استفاده نمایید. (اگر شیرپوینت دیزاینر در دسترس نیست فایل را خارج از شیرپوینت اصلاح و بعد آپلود نمایید)

        [html]
        class ListJS extends React.Component{
        constructor(){
        super();
        this.state = {
        listItems: []
        }
        }
        componentDidMount() {
        // Custom function to retrieve the list info
        this.GetListInfo();
        }
        GetListInfo(){
        var reactHandler = this;

        var siteurl = _spPageContextInfo.webAbsoluteUrl;
        $.ajax({
        url: siteurl + "/_api/web/lists/getbytitle(‘*ListName*’)/items?$orderby=ID%20desc&$select=ID,BaseName,Title,Created,Body,AuthorId&$top=5",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
        if (data.d.results.length > 0 ) {
        debugger
        reactHandler.setState({
        listItems: data.d.results
        });
        }
        },
        error: function (data) {
        alert("Error: "+ data);
        }
        });
        };
        render(){
        var preUrl = _spPageContextInfo.webAbsoluteUrl + ‘/Lists/**ListInternalName**/Flat.aspx?RootFolder=/Lists/**ListInternalName**/’;
        var elms = this.state.listItems.map(function(data) {
        return(

        <div className=’sg-disc-item’ tooltip={jQuery(data.Body).text()}>
        <a className=’sg-header sg-ellipsis’ href={preUrl+data.BaseName}>{data.Title}</a>

        <div className=’sg-body sg-ellipsis’> {jQuery(data.Body).text()} </div>

        <span>ایجاد شده در {data.Created} </span>

        </br>
        </div>

        );
        });

        return (

        <div className=’sg-discussion’>
        <a href={preUrl} >

        <div className=’title-n’> گفتگوهای سازمانی </div>

        </a>

        <div>{elms}</div>

        </div>

        );
        }
        }
        ReactDOM.render(<ListJS />, document.getElementById(‘root’));

        [/html]

    4. یک صفجه جدید بسازید و وب پارت Content Editor  را درج نمایید و کد زیر را در آن کپی نمایید.
    5. توجه داشته باشید(قبل از کپی آدرسهای فایل پیش نیاز را اصلاح نمایید)

[html]
<div id="root">
</div>
[html]<script src=’/Style%20Library/SGREACT/jquery-3.2.0.min.js’></script>
<script src=’/Style%20Library/SGREACT/react.js’></script>
<script src=’/Style%20Library/SGREACT/react-dom.js’></script>
<script src="/Style%20Library/SGREACT/babel.min.js"></script>
<link href=’/Style%20Library/SGREACT/disc.css’ rel="stylesheet" type="text/css">
<div id="root">
</div>
<script src="/Style%20Library/SGREACT/DISC.js" type="text/babel" ></script>
[/html]

خروجی

Disc-sharepoint

 

محمدرضا دستوری
محمدرضا دستوری
من محمدرضا دستوری علاقه مند به دنیای آی تی هستم. به صورت تخصصی بر روی مایکروسافت شیرپوینت کار میکنم.

2 دیدگاه ها

  1. حسین گفت:

    ممنون.خوب بود ولی تاریخش میلادیه

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *