در مقاله امکان ارتباط با Rest Api شیرپوینت در محیط React Development به راه اندازی اولیه React جهت دسترسی به Api های شیرپوینت پرداختیم. در این مقاله میخواهیم کتابخانه PnP و کاربرد آن در React برای ارتباط با لیست های شیرپوینت را برای شما شرح دهیم. در قدم اول باید بگوییم PnP یک کتابخانه جاوااسکریپتی به منظور برقراری ارتباط آسان با داده های شیرپوینتی می باشد که توسط مایکروسافت و گروهی از توسعه دهندگان، توسعه یافته است. در قدم بعدی باید بدانیم چرا از PnP استفاده می کنیم؟ به دلیل آنکه انجام عملیات CRUD در این روش بسیار ساده تر و بدون پیچیدگی در مقایسه با سایر روش ها نظیر Axios یا Fetch می باشد. در واقع با ویژگی های قدرتمند این کتابخانه به آسانی می توانیم به داده های شیرپوینتی درخواست ارسال کنیم.
در ادامه با نصب این کتابخانه و نحوه ارسال درخواست به لیست های شیرپوینت و دریافت پاسخ از آن ها آشنا میشویم:
ابتدا با دستور زیر کتابخانه PnP را نصب می کنیم:
npm install @PnP/sp –save
که با توجه به نیاز، پکیج های دیگر مانند @PnP/graph و … را می توانید نصب کنید.
سپس با وارد کردن دستور زیر در کامپوننت ری اکتی به پکیجsp به منظور ارتباط با لیست های شیرپوینت دسترسی خواهیم داشت:
import { sp } from "@PnP/sp/presets/all";
درخواست GET یا عملیات Read
اکنون با نوشتن دستور زیر داخل یک فانکشن و یا هوک useEffect ری اکت، درخواست GET را به لیست شیرپوینتی ارسال کرده و برای دریافت پاسخ با قرار دادن آن در داخل یک متغیر یا ثابت و یا با استفاده از Then در ادامه درخواست به اطلاعات بازگشتی از لیست شیرپوینت، دسترسی داشته باشید:
const result = sp.web.lists.getByTitle("My List").items.get();
یا
sp.web.lists.getByTitle("My List").items.get().then(res=>console.log(res));
درخواست POST یا عملیات Create
همانند روش بالا با استفاده از دستور زیر داده ی مورد نظر را به لیست خود اضافه کنید. توجه داشته باشید که عنوان مقدار هایی که ارسال میکنید با عنوان لیست شیرپوینتی شما تطابق داشته باشد:
sp.web.lists.getByTitle("My List").items.add({ Title: "Title", Description: "Description" });
درخواست PUT یا عملیات Update
برای تغییر و به روز رسانی آیتم لیست شیرپوینتی، دستور زیر را اجرا کنید.توجه داشته باشید برای آپدیت نیاز دارید تا حتما Id آیتم مورد نظرتان را وارد کنید:
sp.web.lists.getByTitle("MyList").items.getById(1).update({ Title: "My New Title", Description: "Here is a new description" });
درخواستDELETE یا عملیات Delete
برای حذف آیتم مورد نظرتان با نوشتن دستور زیر و وارد کردن Id همان مورد اقدام به حذف کنید:
sp.web.lists.getByTitle("MyList").items.getById(1).delete();
در تمامی عملیات بالا می توانید از ویژگی های قدرتمند کتابخانه PnP نظیر Filter یا Select آیتم ها، انتخاب و دریافت تمامی آیتم ها، اضافه کردن چند آیتم به صورت هم زمان به لیست، حذف با قابلیت بازگردانی و دسترسی به فیلد های لوکاپ استفاده کنید. به همین دلیل برای آشنایی بیشتر با جزییات درخواست ها میتوانید به لینک زیر مراجعه کنید:
https://PnP.github.io/PnPjs/sp/items
جهت اطلاع از انتشار مقالات آینده، پیشنهاد می کنیم در سایت عضو شده یا از طریق فرم “اشتراک در وبلاگ گلرنگ سیستم” در پایین همین صفحه مشترک وبلاگ شوید.
نگارش : فرشاد رعنایی و مهیار معززی