Introduction: SharePoint SPFx framework is filled with very rich UI and flexibility to apply dynamic content and responsive User Interface the only thing is we need to enable it, there is lots of option which we can manually configure one of the examples of Apply button.
It is a good practice and an example of rich UI by adding an Apply button in the SPFx property pane. this button has a predefined mechanism that can post the changes made at the property pane asynchronously, so that, you do not need to refresh the page to see your changes. It is as simple as you are. you only need to add some lines of code in your component.The below image shows the real-time example of an Apply button with the property pane screen.
To achieve it, only need to follow some steps, in this blog I am going to tell you, everything from the beginning.
I have created the solution with the name dynamic-property.
after a couple of minutes, the solution was created, and it looks like below
after the solution is created, need to run the build command
to make the SPFx WebPart in the full width, we need to do very small changes to the configuration settings.
Step-2:
Step-3: all is done, only need to run the gulp build command, after that the solution is ready to deploy or run on the local bench.
Only need to select it, and will appear based on the resolution, there is no limit of higher resolution with the full-width WebPart.
Step-1:
First, of all need to create and the SPFx solution by running the below commands,
using PowerShell or Visual Studio Code
yo @microsoft/sharepoint
I have created the solution with the name dynamic-property.
WebPart with DynamicControl, you can create whatever you like...
after a couple of minutes, the solution was created, and it looks like below
after the solution is created, need to run the build command
Step-2
gulp build
Step-3
Now, need to open the DynamicControlWebPart.ts file and need to add a few lines of code. to achieve this first need to open your solution in the below manner in Visual Studio Code.
You need to open the DynamicControlWebPart.ts file rest of all remain the same, once you open the file you need to copy and paste the below code, for example, I did it with my solution, I have a file with the name of DynamicControlWebPart.ts in this I pasted the below text.
protected get disableReactivePropertyChanges(): boolean {
return true;
}
protected onAfterPropertyPaneChangesApplied(): void {
ReactDom.unmountComponentAtNode(this.domElement);
this.render();
}
This is complete code, how it will look like
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField, IPropertyPaneGroup,
PropertyPaneCheckbox, PropertyPaneDropdown,
IPropertyPaneDropdownOption, PropertyPaneChoiceGroup, PropertyPaneButton
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'DyanmicControlWebPartStrings';
import DyanmicControl from './components/DyanmicControl';
import { IDyanmicControlProps } from './components/IDyanmicControlProps';
export interface IDyanmicControlWebPartProps {
description: string;
Field1: string;
}
export default class DyanmicControlWebPart extends
BaseClientSideWebPart<IDyanmicControlWebPartProps> {
public render(): void {
const element: React.ReactElement<IDyanmicControlProps> = React.createElement(
DyanmicControl,
{
description: this.properties.description,
Field1:this.properties.Field1,
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected get disableReactivePropertyChanges(): boolean {
return true;
}
protected onAfterPropertyPaneChangesApplied(): void {
ReactDom.unmountComponentAtNode(this.domElement);
this.render();
}
private Call = (e) => {
alert("Button 1, Clicked");
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
const lists : IPropertyPaneDropdownOption[] = [{ key: 1, text: "BMW"},{key: 2, text:"Fiat"},{key: 3, text:"Hundai"},{key: 4, text:"Ford"}];
const conditionalGroupFields1: IPropertyPaneGroup["groupFields"] = [
PropertyPaneCheckbox("Field1", {
text: "Show Box 1",
}),
]
if(this.properties.Field1) {
conditionalGroupFields1.push(
PropertyPaneTextField('imageLink1', {
label: "Set an image URL"
}),
PropertyPaneTextField('heading1', {
label: "Set a heading"
}),
PropertyPaneTextField('description1', {
label: "Set a description"
}),
PropertyPaneTextField('redirectURL1', {
label: "Set a redirection URL"
}),
PropertyPaneDropdown('listName', {
label: "My Drop Down List",
options: lists,
}),
PropertyPaneChoiceGroup('listName2', {
label: "My Choice List",
options: lists,
}),
PropertyPaneButton('btn',{
text:"Button 1",
onClick: this.Call
})
);
}
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupFields: conditionalGroupFields1,
},
]
}
]
};
}
}
Once you paste it, need to build your solution, there are chances of showing some problem warnings in visual studio code after doing that changes, you should ignore them it may be due to some version related warnings.
you only need to do publish and deploy your package or run it on the localhost or you can deploy it on the Dev environment.
How to avail the SPFx web part in full width
to make the SPFx WebPart in the full width, we need to do very small changes to the configuration settings.
Step -1:
Open the MainWebPart.menifest.json, in my solution name, is DynamicControlWebPart.menifest.json is there.
Step-2:
add a new property inside the manifest file just below the supportedHosts line
"supportsFullBleed":true,
and the full code looks like this
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "2e98d005-8494-4a34-aa53-bd4aad4a8a7b",
"alias": "DyanmicControlWebPart",
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart"],
"supportsFullBleed":true,
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "DyanmicControl" },
"description": { "default": "DyanmicControl description" },
"officeFabricIconFontName": "page",
"properties": {
"description": "DyanmicControl"
}
}]
}
Step-3: all is done, only need to run the gulp build command, after that the solution is ready to deploy or run on the local bench.
Step-4: After the deployment, all the components that have Full-Width property enabled will appear in this section.
Conclusion: after the understanding and implementation of POC we found that Microsoft uses lots of hidden properties with SharePoint Modern application, which makes the framework optimized and lighter, call based on requirement is the perfect example of great architectural
Hope it will help, kindly write your comments if this blog makes things easy, so that, I will improve my upcoming blogs and make them more meaning full !!!!
Thank you :)
You are giving such interesting information about Full Stack. It is great and beneficial info for us, I really enjoyed reading it. Thankful to you for sharing an article like this.
ReplyDelete