آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
شیرپوینت فریمورک (قسمت چهارم) ساختار پروژه وب پارت - گروه ساقه

شیرپوینت فریمورک (قسمت چهارم) ساختار پروژه وب پارت

SharePointFramework
شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت
سپتامبر 23, 2018
شرکت های fortun 500 از شیرپوینت استفاده می کنند
شرکت‌های Fortune 500 که از شیرپوینت (SharePoint) استفاده می‌کنند
سپتامبر 25, 2018

شیرپوینت فریمورک (قسمت چهارم) ساختار پروژه وب پارت

SharePointFramework

SharePointFramework

توجه: پیش از خواندن این مطلب و آشنایی با ساختار پروژه وب پارت، حتما مقاله قبلی یعنی “شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت” را مطالعه کنید.

بکارگیری Visual Studio Code برای دیدن ساختار پروژه وب پارت

  1. در کنسول، با انتخاب Ctrl + C(در ویندوز) پردازش را متوقف سازید.
  2. دستور زیر را وارد کنید تا پروژه وب پارت را با Visual Studio Code باز کنید( یا در ویرایشگر کد مورد علاقه‌تان)

اگر خطایی دریافت کردید شاید نیاز داشته باشید این مقاله را مطالعه کنید  install the code command in PATH.

زبان اصلی برای ساخت وب‌پارت‌های سمت کلاینت شیرپوینت TypeScript است. ابزارهای توسعه سمت کلاینت شیرپوینت با استفاده از کلاس‌ها، ماجول‌ها، و اینترفیس‌های TypeScript ساخته شده‌اند و به توسعه‌دهندگان کمک می‌کند تا وب پارت‌های مستحکمی بسازند. در ادامه این مطلب، چند فایل کلیدی پروژه آورده شده است.

کلاس وب پارت

HelloWorldWebPart.ts در فولدر src\webparts\helloworld قرار دارد و نقطه ورود اصلی به وب پارت را تعریف می‌کند. کلاس وب پارت HelloWorldWebPart  توسعه یافته از BaseClientSideWebPart است.هر وب پارت سمت کلاینتی باید همین کلاس را توسعه دهد تا به عنوان وب پارتی معتبر تعریف شود.

BaseClientSideWebPart به صورت مینیمال کارکرد لازم برای ساخت وب پارت را پیاده‌سازی کرده است. همچنین این کلاس چند امکان برای ارزیابی و دسترسی به displayMode، webpart properties، webpart context، webpart InstanceId، domElement، و سایر موارد، نیز فراهم می‌کند. توجه داشته باشید که کلاس وب پارت برای این که یک خصیصه از نوع IHelloWorldWebPartProps را بپذیرد تعریف شده است. در این فایل نوع خصیصه به عنوان یک Interface تعریف شده است.

export interface IHelloWorldWebPartProps {
description: string;
}

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

متد رندر وب پارت

المان Document Object Model که برای رندر وب پارت استفاده می‌شود در متد render در دسترس است.این متد برای رندر وب پارت درون آن المان DOM به کار می‌رود. در HelloWorld وب پارت به DIV داده شده است. پارامترهای متد شامل display mode(شامل خواندن و ویرایش) و خصیصه‌های پیکربندی وب است:

public render(): void {
this.domElement.innerHTML = `
<div class=”${ styles.helloWorld }”>
<div class=”${ styles.container }”>
<div class=”${ styles.row }”>
<div class=”${ styles.column }”>
<span class=”${ styles.title }”>Welcome to SharePoint!</span>
<p class=”${ styles.subTitle }”>Customize SharePoint experiences using web parts.</p>
<p class=”${ styles.description }”>${escape(this.properties.description)}</p>
<a href=”https://aka.ms/spfx” class=”${ styles.button }”>
<span class=”${ styles.label }”>Learn more</span>
</a>
</div>
</div>
</div>
</div>`;

این مدل به اندازه کافی انعطاف پذیر است و می‌تواند توسط هر فریمورک جاوااسکریپتی ساخته  و در درون المان DOM بارگذاری شود.

پیکربندی پنجره خصیصه‌های وب پارت

پنجره خصیصه‌ها در درون کلاس HelloWorldWebPart تعریف شده است. خصیصه getPropertyPaneConfiguration جایی است که نیاز دارید تا پنجره خصیصه‌ها را تعریف کنید.

وقتی خصیصه‌ها تعریف شدند، به آن‌ها با کمک this.properties.<property-value> در وب پارت دسترسی خواهید داشت. همانطور که در متد رندر نمایش داده شده:

<p class=”${styles.description}”>${escape(this.properties.description)}</p>

توجه کنید که یک اسکیپ HTML را روی مقدار خصیصه اجرا کرده‌ایم تا از صحت مقدار رشته‌ای اطمینان حاصل کنیم. (برای کسب اطلاعات بیشتر درباره نحوه کار کردن پنجره خصیصه‌ها و انواع فیلدهای پنجره به این آدرس مراجعه فرمایید  Make your SharePoint client-side web part configurable)

حالا چند خصیصه به پنجره خصیصه‌ها اضافه می‌کنیم: یک Checkbox، یک drop-down list، و یک toggle. در ابتدا از ایمپورت فیلدهای پنجره خصیصه‌ها از فریمورک شروع می‌کنیم.

  • به ابتدای فایل اسکرول کنید تا مانند تصویر زیر به @microsoft/sp-webpart-base  ایمپورت کنید.
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle

قسمت کامل ایمپورت شده به صورت زیر است:

import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle
} from ‘@microsoft/sp-webpart-base’;
  • خصیصه‌های وب پارت را به‌روزرسانی کنید تا خصیصه‌های جدید را شامل شود. این کار در واقع یک مپ به انواع اشیا ایجاد می‌کند.
  • اکنون اینترفیس IHelloWorldWebPartProps  را با کد زیر جایگزین کنید:
export interface IHelloWorldWebPartProps {
description: string;
test: string;
test1: boolean;
test2: string;
test3: boolean;
}
  • فایل را ذخیره کنید.
  • getPropertyPaneConfiguration  را با کد زیر جایگزین نمایید. حالا پنجره جدید خصیصه‌ها اضافه می‌شود و آن‌ها با انواع اشیا مپ می‌گردند.
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField(‘description’, {
label: ‘Description’
}),
PropertyPaneTextField(‘test’, {
label: ‘Multi-line Text Field’,
multiline: true
}),
PropertyPaneCheckbox(‘test1’, {
text: ‘Checkbox’
}),
PropertyPaneDropdown(‘test2’, {
label: ‘Dropdown’,
options: [
{ key: ‘1’, text: ‘One’ },
{ key: ‘2’, text: ‘Two’ },
{ key: ‘3’, text: ‘Three’ },
{ key: ‘4’, text: ‘Four’ }
]}),
PropertyPaneToggle(‘test3’, {
label: ‘Toggle’,
onText: ‘On’,
offText: ‘Off’
})
]
}
]
}
]
};
}
  • بعد از آن که خصیصه‌های خود را به خصیصه‌های وب پارت اضافه کردید، اکنون می‌توانید به خصیصه‌ها به همان شکلی که به description دسترسی داشتید، دسترسی داشته باشید.
<p class=”${ styles.description }”>${escape(this.properties.test)}</p>

نکته: برای دادن مقادیر پیش‌گزیده به خصیصه‌ها، نیاز دارید که مانیفست وب پارت را به‌روزرسانی کنید.

HelloWorldWebPart.manifest.json را باز نمایید و قسمت properties را مانند زیر تغییر دهید:

“properties”: {
“description”: “HelloWorld”,
“test”: “Multi-line text field”,
“test1”: true,
“test2”: “2”,
“test3”: true
}

اکنون پنجره خصیصه‌های وب پارت حاوی این مقادیر پیش‌گزیده است.

Manifest وب پارت

فایل HelloWorldWebPart.manifest.json فراداده‌هایی مانند ورژن، شماره شناسایی، نام نمایش داده شده، آیکون، و توضیحات را تعریف می‌کند. هر وب پارتی باید شامل مانیفستی باشد.

{
“$schema”: “https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json”,
“id”: “fbcf2c6a-7df9-414c-b3f5-37cab6bb1280”,
“alias”: “HelloWorldWebPart”,
“componentType”: “WebPart”,
// The “*” signifies that the version should be taken from the package.json
“version”: “*”,
“manifestVersion”: 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
//
https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
“requiresCustomScript”: false,
“preconfiguredEntries”: [{
“groupId”: “5c03119e-3074-46fd-976b-c60198311f70”, // Other
“group”: { “default”: “Other” },
“title”: { “default”: “HelloWorld” },
“description”: { “default”: “HelloWorld description” },
“officeFabricIconFontName”: “Page”,
“properties”: {
“description”: “HelloWorld”,
“test”: “Multi-line text field”,
“test1”: true,
“test2”: “2”,
“test3”: true
}
}]
}

اکنون تغییرات داده شده را اعمال نمایید:

gulp serve

پیش نمایش وب پارت در شیرپوینت

Workbench شیرپوینت بر روی آن هاست شده است تا به واسطه آن، توسعه وب پارت‌ها، پیش‌نمایش و تست آن‌ها انجام شود. نکته کلیدی در امتیاز این کار در این است که در Context شیرپوینت اجرا می‌شود و این امکان وجود دارد که با اطلاعات شیرپوینت تعامل داشته باشید. (به این آدرس بروید: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx)

توجه داشته باشید اگر سرتیفیکیت توسعه SPFx را به صورت نصب شده نداشته باشید، Workbench پیغام می‌دهد که پیکربندی به گونه‌ای است که اسکریپت‌ها از localhost بارگذاری نشوند. در پنجره کنسول پردازش جاری را متوقف کنید و دستور gulp trust-dev-cert را در همان دایرکتوری پروژه‌تان اجرا نمایید تا سرتیفیکیت نصب گردد و سپس مجددا gulp serve را اجرا کنید. برای مطالعه جزییات نصب سرتیفیکیت این مقاله را مطالعه بفرمایید:  Setup your development environment

توجه کنید که workbench هم اکنون دارای Suite Navigation است. بر روی add کلیک کنید تا toolbox آشکار گردد. این toolbox وب پارت‌های مستقر در هاست workbench را نمایش می‌دهد.

از این toolbox وب پارت HelloWorld را اضافه کنید. اکنون در حال run کردن وب پارت خود بر روی صفحه‌ای که در شیرپوینت هاست شده، هستید.

توجه کنید که رنگ وب پارت بستگی به رنگ سایت دارد. چون هنوز در حال توسعه و تست وب پارت خود هستید، نیازی به ساخت پکیج و دیپلوی آن بر شیرپوینت ندارید.

در این مقاله که  ترجمه‌ای است از Build your first SharePoint client-side web part به ساختار پروژه وب پارت پرداختیم. قسمت های قبلی این مقاله را می‌توانید از طریق لینک‌های زیر مطالعه کنید:
شیرپوینت فریمورک (قسمت اول) مقدمه
شیرپوینت فریمورک (قسمت دوم) پیکربندی محیط توسعه
شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت

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

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

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