-->

نحوه استفاده از bootstrap در SPFx webpart

نویسنده :  

در این آموزش می‌خواهیم نحوه استفاده از bootstrap در spfx webpart را یاد بگیریم. در اینجا، از جدول bootstrap در داخل یک client-side web part در SharePoint  استفاده خواهیم کرد.

مرحله 1: Node.js command prompt را باز کنید و یک پروژه جدید مانند تصویر زیر ایجاد کنید.

1

 

مرحله 2: در اینجا من یک SPFx client-side web part به نام BootstrapWithSPFX ایجاد کرده ام و از React به عنوان یک framework استفاده کردم. بنابراین پس از اجرای دستور بالا، web part جدید ما با موفقیت در پوشه Solution ایجاد شد.

حالا شما کد را تایپ کنید. در command prompt برای باز کردن این پروژه در Visual Studio code. اکنون می توانید اسکرین شات زیر را ببینید که در آن web part جدید SPFx با موفقیت ایجاد شده است و راه حل مانند زیر است.

2

 

مرحله 3: در مرحله بعد من یک لیست در شیرپوینت آنلاین مانند تصویر زیر ایجاد کرده ام.

3

 

مرحله 4: سپس پوشه component را باز کنید و BootstrapWithSpfx.tsx را انتخاب کنید و کد زیر را جایگزین کنید.

import * as React from 'react';
import styles from './BootstrapWithSpfx.module.scss';
import { IBootstrapWithSpfxProps } from './IBootstrapWithSpfxProps';
import { escape } from '@microsoft/sp-lodash-subset';
import BootstrapTable from 'react-bootstrap-table-next';
//Import from @pnp/sp
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists/web";
import "@pnp/sp/items/list";
import { SPComponentLoader } from '@microsoft/sp-loader';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';

export interface IShowEmployeeStates{
ItemList :any[]
}
const paginationOptions = {
sizePerPage: 4,
hideSizePerPage: true,
hidePageListOnlyOnePage: true
};

const ItemTablecolumns = [
{
dataField: "Title",
text: "Title",
headerStyle : {backgroundColor: '#d42aca'},
sort : true ,
formatter: makeodd

},
{
dataField: "Column_x002d_1",
text: "Column-1" ,
headerStyle : {backgroundColor: '#d42aca'} ,
formatter: makeEven
},
{
dataField: "Column_x002d_2",
text: "Column-2" ,
headerStyle : {backgroundColor: '#d42aca'} ,
formatter: makeodd
},
{
dataField: "column_x002d_3",
text: "Column-3",
headerStyle : {backgroundColor: '#d42aca'} ,
formatter: makeEven
},
{
dataField: "column_x002d_4",
text: "Column-4",
headerStyle : {backgroundColor: '#d42aca'} ,
formatter: makeodd
},
{
dataField: "column_x002d_5",
text: "Column-5",
headerStyle : {backgroundColor: '#d42aca'},
formatter: makeEven
},
{
dataField: "Date",
text: "Date",
headerStyle : {backgroundColor: '#d42aca'} ,
formatter: makeodd
}];

function makeodd(cell, row) {
return (
<span>
<strong style={ { color: 'green' } }> { cell }</strong>
</span>
);
}
function makeEven(cell, row) {
return (
<span>
<strong style={ { color: 'black' } }> { cell }</strong>
</span>
);
}
export default class BootstrapWithSpfx extends React.Component<IBootstrapWithSpfxProps, IShowEmployeeStates>{
constructor(props: IBootstrapWithSpfxProps){
super(props);
this.state ={
ItemList : []
}
}

public getItemDetails = () =>{
sp.web.lists.getByTitle("ViewListInSharePoint").items.getAll().
then((results : any)=>{

this.setState({
ItemList:results
});
});
}

public componentDidMount(){
this.getItemDetails();
}

public render(): React.ReactElement<IBootstrapWithSpfxProps> {
let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
SPComponentLoader.loadCss(cssURL);
return (
<div className={ styles.bootstrapWithSpfx }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Bootstrap With SharePoint List in SPFX</p>
</div>
</div>
<BootstrapTable keyField='id' data={this.state.ItemList} columns={ ItemTablecolumns } pagination={paginationFactory(paginationOptions)} headerClasses="header-class"/>
</div>
</div>
);
}
}

 

مرحله 5: اکنون می خواهم به وضوح توضیح دهم که چگونه این کد کار می کند. هنگامی که کد بالا را جایگزین کردید، در خط زیر با خطایی مواجه می شوید که من آن را با رنگ زرد برجسته کرده ام.

4

بنابراین کاری که می‌توانیم انجام دهیم این است که دوباره به node.js command prompt برمی‌گردیم و package های زیر را اجرا می‌کنیم.

5

6

7

install react-bootstrap-table2-paginator --save

npm install react-bootstrap-table-next -save

npm install @pnp/sp

 

مرحله 6: در روش زیر، لیست Item را از طریق PNP فراخوانی کرده ام. بنابراین شما فقط نام لیست خود را که ایجاد کرده اید تغییر نام دهید.

8

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

9

مرحله 8: در کد زیر صفحه بندی جدول خود را تنظیم می کنید.

10

 

مرحله 9: سپس به command prompt خود بروید و این کد را با استفاده از دستور زیر اجرا کنید.

  • gulp clean
  • gulp build
  • gulp serve
  • gulp bundle –ship
  • gulp package-solution -ship

بنابراین می توانید دستور بالا را طبق دستور اجرا کنید. بنابراین هنگامی که روی gulp serve کلیک کنید، صفحه جدیدی باز می شود که در آن باید web part جدید اضافه شده خود را اضافه کنید.

پس از افزودن web part جدید SPFx، صفحه خالی به نظر می رسد. نتیجه پس از افزودن این web part به سایت SharePoint Online شما خواهد آمد.

 

مرحله 10: کاری که ما انجام خواهیم داد، یک بسته آماده کرده و بسته را در SharePoint App Catalog site خود آپلود می کنیم.

بنابراین باید با استفاده از دستور بالا که در مرحله 8 است بسته را آماده کنیم. پس از ایجاد بسته، باید در سایت کاتالوگ App آپلود کنیم که همانند تصویر زیر است.

11

 

مرحله 11: پس از افزودن Web part خود به صفحه، خروجی مانند تصویر زیر خواهد بود.

12

 

در این آموزش نحوه استفاده از bootstrap در spfx webpart را یاد گرفتیم. در اینجا، از جدول bootstrap در داخل یک client-side web part در SharePoint  استفاده کردیم.

 

 

برترین مطالب آموزشی

این آموزش به سه بخش  اصلی تقسیم می شود: دریافت آیتم های انتخاب شده با استفاده از
در این مقاله جایگزین کردن فرم نینتکس را با پاورفرم توضیح خواهیم داد. این مقاله به
در این آموزش، ما در مورد چگونگی ایجاد یک وب پارت چارت سازمانی (JavaScript (jsom در
برای اینکه ارتباط شیرپوینت، Lync و Nintex را برقرار کنیم باید به صورت زیر عمل کنیم:
دانلود کتاب آموزشی شیرپوینت مقدمه: شما برای سازمان خود نیاز به نرم افزاری دارید که
یکی از قابلیت های مهم نرم افزار SharePoint ارتباط کامل با مجموعه آفیس می­باشد ...
آموزش پاورفرم - اسکریپت های کاربردی اسکریپت‌های مربوط به Data Grid  Name یک
ایجاد آیتم در یک لیست با استفاده از JavaScript object model (jsom) کد مورد نظر را در یک
آموزش پاورفرم - اسکریپت های کاربردی  اسکریپت های مربوط به تاریخ برای
//courtesy of BoogieJack.com function killCopy(e){ return false } function
همانطور که مستحضر هستید اکشن عملیات موازی یا Parallel   همانطور که مستحضر

برخی از سامانه های طراحی شده

meeting
09 اسفند 1398
5:00pm 6:00pm
cache/resized/a1f319dcd310423b7b94557726a42895.jpg
09 اسفند 1398
5:00pm 6:00pm
3
18 بهمن 1398
5:00pm 6:00pm
3
06 بهمن 1398
5:00pm 6:00pm
cache/resized/765d5e6f887f6f9713212b8b665b99ed.jpg
26 آذر 1397
5:00pm 6:00pm

تماس با ما

شیرپوینت سنتر

  • آدرس: استان تهران ، خیابان بهشتی ، خیابان سهروردی شمالی ، خیابان امامی ، پلاک 8
  • شماره تماس: 021-77465290  و 09127192570
  • ایمیل: info@sharepointcenter.ir

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

بالا