در مقاله امکان ارتباط با 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

جهت اطلاع از انتشار مقالات آینده، پیشنهاد می کنیم در سایت عضو شده یا از طریق فرم “اشتراک در وبلاگ گلرنگ سیستم” در پایین همین صفحه مشترک وبلاگ شوید.

نگارش : فرشاد رعنایی و مهیار معززی

 

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها