Contents
SharePoint modern pages with page metadata provide more capabilities for end users to tag the content more appropriately. In certain development scenarios, we have to read these page properties in SPFx web part. SharePoint PnP (Pattern and Practices) provides simple APIs for reading page properties.
How are default properties defined in SPFX Web Parts?
If you configured your custom properties, your users will be able to customize the values as they wish. The default values defined in your manifest.json are static — that is, the default value your users will receive will always be the same unless you change your manifest.json.
How to use PNP in SPFX web part?
We will start by setting up the PnP to be used in our SPFx web part. 1. Open web part file at src\\webparts\\pagePropertiesReader\\PagePropertiesReaderWebPart.ts 2. Import PnP. 3. Implement OnInit method to setup PnP. React component cannot directly access the SharePoint context. It has to be passed from the web part to the React component.
How are default properties defined in SharePoint Client-side web parts?
SharePoint client-side web parts (SPFx) allow you to define custom properties that your users can use to customize your web parts. You can set default values in your web part’s manifest.json file so that the web part is already pre-configured when a user adds your web part to a page.
How to read custom page property values in SPFX?
PnP provides simple APIs to read the custom page property values and process in SPFx web part. The SPFx solution developed during this article can be downloaded from TechNet gallery.
Where do I find SPFX application in SharePoint?
SPFx applications is installed on the SharePoint site and it will run in the SharePoint user context. So, it is very easy to integrate it with the SharePoint environment. SharePoint has exposed its APIs which is helpful in working closer with its environment.
Follow the below steps to create a new page property on a modern page. 1. Navigate to Pages library. 2. Click “Add column” to add new columns to pages library. 3. Add columns as below. Now that we have defined custom properties, we will add values for those properties at the individual page level.
How to update SharePoint framework for an SPFX webpart?
Steps required to update your SPFx version in your webpart Step 0: Take a backup of your project Step 1: Update your packages Step 2: Update other dependencies Step 3: Get all packages to your solution and resolve conflicts Step 4: Verify that your devDependencies are up-to-date Step 5: Boot your stuff and get coding Et voíla!
Page metadata provides more capabilities for end users to tag the content more appropriately in SharePoint. Modern SharePoint out of the box provides a web part named “Page properties”. PnP provides simple APIs to read the custom page property values and process in SPFx web part.
How to create a SPFX extension in SharePoint?
Create a List View Command Item for creating site pages, editing properties of site pages and promoting site pages to news 2. Create an Azure function that will create the Page using SharePoint Online CSOM 3. Call the Azure Function from the SPFx command. A brief screenshot of the resulting SPFx extension dialog is below.