How many times you need to save some data in SPFx WebPart properties but don’t want this property appear in Properties Panel ?

How we you can do it ? I will explain how to read and save WebPart Properties from code using the REST API /_api/sitepages/pages

I start to define all WebPart Properties as usual, in manifest WebPart file

In this sample I have 3 properties , Title, lists and pivotData, the pivotData is a property that I want read and save in code, and don’t be available in Properties Panel of WebPart.

Property Panel Configuration

How to Read a Property

Where are WebPart properties saved? The WebPart properties are saved in the page column named “CanvasContent1”, this column is an array that has an entry for each WebPart on the page.

Each array entry is a JSON string that has all the information about WebPart, the WebPart properties are in the object called “webpartdata” in the “properties” object.

“CanvasContent1” has all the information about all WebParts that exist on the page, each entry has an “id” field this “Id” identifies the WebPart instance installed on the page, because we can have multiple WebPart instances on the page and when you gets information from “CanvasContent1“, we have to read the correct information for the WebPart.

To get information from the page you have to do an http get to /_api/sitepages/pages({i}), example of “CanvasContent1” returned.

Here the sample of read properties for List PivotTable WebPart (List PivotTable WebPart Post)

How to Save Property

To save a property, you need to update the “CanvasContent1” column with new values ​​for the properties object.

To save new values you have to do a http post to /_api/sitepages/pages/page({i})/checkout , I can’t save page if it is not checkout before and then /_api/sitepages/pages/page({i})/savepage with new values for “CanvasContent1” Column.

Here the sample for update “CanvasContent1” with new values for List PivotTable WebPart. (List PivotTable WebPart Post)

Happy SharePointing!

Sharing is Caring!

This WebPart allows you to do various types of data analysis, including charts. The WebPart uses a component based on pivottable.js

The configuration data of the Pivot Table is saved with the WebPart properties, the entire process of updating this data is done in real time when a change occurs in the Pivot Table.

The Source code is available here

Happy SharePointing…

Sharing is Caring!

Birthdays SPFx Web Part,

The solution consists of SPFx Reusable Birthday Control (Tiles), an SPFx Web Part that loads data from a SharePoint List, which is updated every day by an Azure function using the MS Graph API

The SPFx reusable Birthday control has

Birthday Card component that is use to create a Birthday Tiles control.

Samples:

The Birthday tiles control receive the array of users that is passed by the web part for rendering the information about users birthdays.

Birthday Tiles reusable control , render method 

the web part gets data from the SharePoint list and renders information about birthdays. 

The process to get birthdays consist in  an Azure Function that use @PnP/pnpjs library and MSGraph API to synchronise a SharePoint List located on tenant root site. The function create a list if it not exists.

The Azure function runs every day to get AAD users and the birthday date, on first run get all users but the next runs only get the changed users.

I use the https://graph.microsoft.com/v1.0/users/delta, query to get users from AAD.

How it works ?

Delta query has two objects that are nextLink URL and deltaLink URL, the nextLink if filled has the skipToken to read the next page of users, the deltaLink if present has the deltaToken to be used in the next call to check if there are users that have changed since the last time the function ran.

When Function Start :

Read Users and add, Update or delete user from SharePoint List.

On SharePoint Tenant Root Site I have my list with the user birthdays that I use on my Web Part.

Thank you for reading. 🙂

This control allows you to manage list Item Attachments, you can add or delete associated attachments, the attachments are listed in tile view.

Here is an example of the control:

How to use this control in your solutions

•  Install Package

npm i list-item-attachments --save

• Import the control into your component:

 
import { ListItemAttachments } from 'list-item-attachments/lib/listItemAttachments';

• Use the ListItemAttachments control in your code as follows:

          <ListItemAttachments
            listId='dfa283f4-5faf-4d54-b6b8-5bcaf2725af5'
            itemId={1}
            context={this.props.context}
            disabled={false}
          />

Implementation

The ListItemAttachments control can be configured with the following properties:

Source code updated in GitHub.

https://github.com/joaojmendes/list-item-attachments

ListItemPicker control

This control allows you to select one or more item from list, based in a column value, the control suggest values based on characters typed

Here is an example of the control:

Can find the source code here :   https://github.com/joaojmendes/listItemPicker

How to use this control in your solutions

•  run   npm i list-item-picker –save
• Import the control into your component:

 
import { ListItemPicker } from 'list-item-picker/lib/listItemPicker';

• Use the ListItemPicker control in your code as follows:

          <ListItemPicker
            listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
            columnInternalName='Title'
            itemLimit={2}
            onSelectedItem={this.onSelectedItem}
            context={this.props.context}
          />

Control Properties

I need upload to SharePoint Online Site about 7000 files to a document library as setup of ECM Project, and I develop a tool that permit upload files automatically based on information defined in CSV file.

The power user classify the file, defining Content Type and content type metadata, file path, destination document library, in my case we use the content organizer,  and content organizer rules to route files for their destination. The document library is a DropOff library, but we can specify any library as destination.

the csv file has fill rules that have to be met, particularly with regard to specifying the metadata associated with the file.

The rules are:

The first 3 columns are fixed , the first column define the local (pc) file Path to upload,  second, the content type name and the third is SharePoint Document Library (Destination).

the fourth and next columns are variable and define the metadata associated to content type. The columns must have the internal names of columns in SharePoint Document Library and their values must be compatible with columns.

For Metadata Columns the values must be in format “termgroup|termset|term”,

For lookup Columns the values must be the value of reference column defined on Lookup Column.

For Date Columns the values must be in format “pt-PT”  I will check if the current (PC or Server ) culture is equal.

We must have one file for each content type that we want upload.

Sample CSV file.

My PowerShell script Print Screens,

You must change the script for your needs, use as a reference .

The code is here :

https://github.com/joaojmendes/BulkUploadFilesToSharePoint