معرفی
در این مقاله، با استفاده از PnP JavaScript Core Library، انجام عملیات اصلی ListView، مانند افزودن، به روز رسانی یا حذف نماها برای یک لیست در سایت های SharePoint را یاد خواهید گرفت.
توجه داشته باشید
عملیاتی که در زیر آورده شده است، اطلاعات را از سایت مربوطه که کد در آن اجرا می شود، دریافت می کند. منطق را می توان با افزودن مراجع اسکریپت در بخش وب ویرایشگر محتوا یا هر بخش وب سفارشی معمولی از مجموعه های سایت، سایت ها یا سایت های فرعی اجرا کرد. نتایج فقط از سایت مربوطه که کد در آن اجرا می شود بازیابی می شود.
کتابخانه هسته جاوا اسکریپت PnP توسط نسخه های SharePoint 2013، SharePoint 2016 On Premises و Office 365 پشتیبانی می شود. عملیات زیر در محیط های SharePoint 2013 و Office 365 تست شده است:
پيش نياز
منابع کتابخانه هسته جاوا اسکریپت مورد نیاز برای اجرای هر عملیاتی با استفاده از PnP عبارتند از:
- es6-promise.js
- fetch.js
- pnp.js یا pnp.min.js
مراجع اسکریپت باید از قسمت های وب، فقط به ترتیبی که در بالا داده شد، فراخوانی شوند.
توجه: می توانید منابع را از مقاله اولیه من در مورد PnP JavaScript Core Library دانلود کنید.
در مورد لزوم استفاده از قول و بازیابی منابع JS در مقاله ذکر شده در بالا توضیح داده ام. این مراجع را می توانید از سایت Github نیز دانلود کنید.
قبل از اجرای هر عملیاتی می توانیم هدر را تنظیم کنیم. زمانی که می خواهید نوع پاسخ از پیش تعیین شده باشد، این مورد ضروری است. بیایید ببینیم چگونه می توانیم داده های JSON را به عنوان پاسخ دریافت کنیم. این کار باید یک بار انجام شود، قبل از شروع تمام درخواست ها در صفحه. این مرحله برای محیط O365 اجباری نیست.
قطعه کد ارائه شده در زیر، تنظیم هدر را نشان می دهد:
- $pnp.setup({
- headers: {
- "Accept": "application/json; odata=verbose",
- },
- });
مشاهده لیست ایجاد کنید
در این بخش می بینیم که چگونه می توانیم Views را با استفاده از کتابخانه جاوا اسکریپت PnP به لیستی در سایت شیرپوینت اضافه کنیم.
قطعه کد ارائه شده در زیر به ایجاد Views برای یک لیست کمک می کند. View به نام PnPView برای لیستی به نام PnPList ایجاد می شود. در اینجا، نمای ساده موجود ایجاد خواهد شد. تغییر فیلدهای View بعداً در مقاله ای جداگانه توضیح داده خواهد شد.
- // Add View
- $pnp.sp.web.lists.getByTitle("PnPList").views.add("PnPView").then(function(data){
- console.log("The view has been created. View URL: " + data.data.ServerRelativeUrl);
- }).catch(function(data){
- console.log(data);
- });
مشاهده های شخصی را می توان با استفاده از قطعه کد زیر ایجاد کرد. مقدار بولی به همراه عنوان در متد Add ارسال می شود.
- // Add Personal View
- $pnp.sp.web.lists.getByTitle("PnPList").views.add('NakkeeranView', true).then(function(data){
- console.log("The view has been created. View URL: " + data.data.ServerRelativeUrl);
- }).catch(function(data){
- console.log(data);
- });
عکس فوری زیر نماهای ایجاد شده در "PnPList" را نشان می دهد.