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

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

SharePointFramework
شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت
مهر ۱, ۱۳۹۷
شرکت های fortun 500 از شیرپوینت استفاده می کنند
شرکت های Fortune 500 از شیرپوینت استفاده می کنند
مهر ۳, ۱۳۹۷

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

SharePointFramework

SharePointFramework

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

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

  1. در کنسول، با انتخاب Ctrl + C(در ویندوز) پردازش را متوقف سازید.
  2. دستور زیر را وارد کنید تا پروژه وب پارت را Visual Studio Code باز کنید( یا در ویرایشگر کد مورد علاقه تان)
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. در ابتدا از ایمپورت فیلدهای پنجره خصیصه ها از فریمورک شروع می کنیم.

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

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

    import {
    BaseClientSideWebPart,
    IPropertyPaneConfiguration,
    PropertyPaneTextField,
    PropertyPaneCheckbox,
    PropertyPaneDropdown,
    PropertyPaneToggle
    } from ‘@microsoft/sp-webpart-base’;
  3. خصیصه های وب پارت را به روز رسانی کنید تا شامل خصیصه های جدید گردد.این امر یک مپ به انواع اشیا ایجاد می کند.
  4. اکنون اینترفیس IHelloWorldWebPartProps  را با کد زیر جایگزین کنید:
  5. export interface IHelloWorldWebPartProps {
    description: string;
    test: string;
    test1: boolean;
    test2: string;
    test3: boolean;
    }
  6. فایل را ذخیره کنید.
  7. getPropertyPaneConfiguration  را با کد زیر جایگزین نمایید، که پنجره جدید خصیصه ها را اضافه می کند و آن ها با انواع اشیا مپ می نماید.
  8. 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’
    })
    ]
    }
    ]
    }
    ]
    };
    }
  9. پس از آن که خصیصه های خود را به خصیصه های وب پارت اضافه کردید، اکنون می توانید به خصیصه ها به همان شکلی که به description دسترسی داشتید، دسترسی داشته باشید.
  10. <p class=”${ styles.description }”>${escape(this.properties.test)}</p>

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

  11. 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 شیرپوینت اجرا می شود و این امکان وجود دارد که با اطلاعات شیرپوینت تعامل داشته باشید.

  1. به این آدرس بروید: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx
  2. توجه داشته باشید اگر سرتیفیکیت توسعه SPFx را به صورت نصب شده نداشته باشید، Workbench پیغام می دهد که پیکربندی به گونه ای است که اسکریپت ها از localhost بارگزاری نشوند. در پنجره کنسول پردازش جاری را متوقف کنید تا دستور gulp trust-dev-cert را در همان دایرکتوری پروژه تان اجرا نمایید تا سرتیفیکیت نصب گردد و سپس مجددا gulp serve را اجرا نمایید. برای مطالعه جزییات نصب سرتیفیکیت این مقاله را مطالعه نمایید  Setup your development environment

  3. توجه کنید که workbench هم اکنون دارای Suite Navigation است.
  4. بر روی add کلیک کنید تا toolbox آشکار گردد. این toolbox وب پارت های مستقر در هاست workbench را نمایش می دهد
  5. از این toolbox وب پارت HelloWorld را اضافه کنید. اکنون در حال run کردن وب پارت خود بر روی صفحه ای که در شیرپوینت هاست شده هستید.

توجه کنید که رنگ وب پارت بستگی به رنگ سایت دارد.

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

این مقاله ترجمه ای است از Build your first SharePoint client-side web part

قسمت های قبلی این مقاله:
شیرپوینت فریمورک (قسمت اول) مقدمه
شیرپوینت فریمورک (قسمت دوم) پیکربندی محیط توسعه
شیرپوینت فریمورک (قسمت سوم) ساخت اولین وب پارت

پاسخ دهید

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