آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
نحوه استفاده از React.js در شیرپوینت با استفاده از Rest Api برای بازیابی اطلاعات
مثال گردش کار با Nintex
ژانویه 25, 2017
نکات و ترفندهای فرآیند ساز نینتکس
آموزش نکات و ترفندهای فرآیند‌سازنینتکس
می 20, 2017

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

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

پیش از آشنایی با نحوه استفاده از React.js در شیرپوینت، ابتدا کمی با این تکنولوژی‌ آشنا می‌شویم:

React.js چیست؟

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

SharePoint Rest Api چه کاربردی دارد؟

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

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

Get to know the SharePoint 2013 REST service

Complete basic operations using SharePoint 2013 REST endpoints

در ادامه، سناریوی زیر را به عنوان نمونه شرح می‌دهیم:

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

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

۱. ایجاد یک لیست از نوع Discussion (مباحث) و درج چند مطلب تستی

لیست مباحث در شیرپوینت

۲. فایل‌های پیش‌نیاز را در کتابخانه‌ای از شیرپوینت بارگذاری نمایید.

فایل فشرده زیر را دانلود و پس از اکسترت به صورت تصویر زیر در یکی از کتابخانه‌های شیرپوینت بارگذاری کنید.

SGReact.zipفایل های پیشنیاز react.js در شیرپوینت

در ادامه در فایل 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]

در قدم بعدی، یک صفحه جدید بسازید و وب پارت Content Editor  را درج کرده و کد زیر را در آن کپی نمایید. توجه داشته باشید که قبل از کپی آدرس‌ها فایل پیش‌نیاز را حتما اصلاح کرده باشید.

[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

در این مطلب به بررسی نحوه استفاده از React.js در شیرپوینت پرداختیم. گروه ساقه با کمک کارشناسان و متخصصان با تجربه، خدمات و محصولات متعددی در زمینه شیرپوینت ارائه می‌کند. برای دریافت اطلاعات بیشتر و یا جهت مشاوره تخصصی می‌توانید همین حالا با ما تماس بگیرید.

3 دیدگاه ها

  1. حسین گفت:

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

  2. آرمین رحیمی گفت:

    بسیار عالی بود اقای مهندس

دیدگاهتان را بنویسید

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