معرفی
در این مقاله، اجازه دهید ببینیم که چگونه میتوان با استفاده از دادههای فهرست شیرپوینت، صفحه ویژگیهای بخش وب چارچوب شیرپوینت را به صورت پویا ارائه کرد.
در اینجا در نمونه، من از راه حل ایجاد شده برای نمونه قبلی خود استفاده می کنم . با چارچوب react JS ایجاد شده است.
پیکربندی ویژگی
همه انواع راه حل های SPFx حاوی فایل اصلی تایپ اسکریپت قسمت وب (.ts) هستند. این شامل کلاس با متد render و روش پیکربندی ویژگی (getPropertyPaneConfiguration) است.
متد پیکربندی ویژگی حاوی دستور بازگشت پیش فرض است. پیکربندی را برمیگرداند که دارای صفحاتی است که باید در صفحه ویژگی به همراه گروهها و ویژگیهای مربوطه در گروهها ارائه شوند. کد زیر کد پیش فرض است. آن شامل
- پیکربندی یک صفحه با هدر صفحه
- یک گروه با نام گروه و ویژگی متن
- protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
- return {
- pages: [
- {
- header: {
- description: strings.PropertyPaneDescription
- },
- groups: [
- {
- groupName: strings.BasicGroupName,
- groupFields: [
- PropertyPaneTextField('description', {
- label: strings.DescriptionFieldLabel
- })
- ]
- }
- ]
- }
- ]
- };
- }
در اینجا، در این نمونه، اجازه دهید نگاهی به افزودن پویا آیتم های لیست در قسمت خصوصیات قسمت وب SharePoint Framework داشته باشیم. اجازه دهید چک باکس ها را به قسمت خصوصیات اضافه کنیم.
داده هایی که باید کشیده شوند را می توان با استفاده از روش onPropertyPaneConfigurationStart بازیابی کرد. دادههای فهرست برای رندر در روش پیکربندی ویژگی در دسترس نخواهد بود، حتی اگر روش start قبل از روش پیکربندی فعال شود. این به این دلیل است که داده هایی که باید از لیست بازیابی شوند به صورت ناهمزمان کار می کنند. پنجره خصوصیات باید با استفاده از متد this.context.propertyPane.refresh() در کد بازخوانی شود، که مجدداً متد پیکربندی خواص را راهاندازی میکند. پس از فراخوانی متد refresh، صفحه ویژگی دوباره رندر می شود.
بنابراین، روش شروع پیکربندی پنجره ویژگی حاوی کدی برای بازیابی آیتم های لیست و ساخت پویا ویژگی های جعبه چک و فشار دادن آن به آرایه جهانی است. آرایه جهانی سپس به ویژگی group fields در روش پیکربندی پنجره ویژگی اختصاص داده می شود.
روش شروع پیکربندی در زیر نشان داده شده است.
- protected onPropertyPaneConfigurationStart(): void {
- var self = this;
- var xmlhttp = new XMLHttpRequest();
- xmlhttp.onreadystatechange = function () {
- if (xmlhttp.readyState == XMLHttpRequest.DONE) {
- if (xmlhttp.status == 200) {
- var data = JSON.parse(xmlhttp.responseText);
- if (data != null) {
- self.dynamicProps = [];
- data.d.results.forEach(function(item){
- //self.dynamicProps.push({key: item.ID, text: item.Title});
- self.dynamicProps.push(
- PropertyPaneCheckbox(item.ID,
- {
- text:item.Title
- })
- );
- });
- self.context.propertyPane.refresh();
- }
- } else if (xmlhttp.status == 400) {
- console.log('There was an error 400');
- } else {
- console.log('something else other than 200 was returned');
- }
- }
- };
- var inputUrl = "https://nakkeerann.sharepoint.com/sites/spfx/_api/web/lists/getByTitle('TestList')/items";
- xmlhttp.open("GET", inputUrl, true);
- xmlhttp.setRequestHeader("Accept","application/json; odata=verbose");
- xmlhttp.send();
- }
متد پیکربندی پنجره ویژگی شامل دستور بازگشت با صفحات صفحه و گروه هایی با ویژگی است. روش پیکربندی در زیر نشان داده شده است.
- protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
- return {
- pages: [
- {
- header: {
- description: "SPFx Properties"
- },
- groups: [
- {
- groupName: "Dynamic Properties",
- groupFields:
- this.dynamicProps
- }
- ]
- }
- ]
- };
- }
عکس فوری زیر بخش وب SPFx را با ویژگی های صفحه اضافه شده به صورت پویا نشان می دهد.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/render-spfx-properties-pane-based-on-list-data/Images/DynamicProperties.png)