Birthday SPFx, Web Part, Azure Function, MSGraph, @PnP/pnpjs

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:

Screenshot 2018-11-25 at 16.09.58

Screenshot 2018-11-30 at 20.14.08

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 

Screenshot 2018-11-25 at 16.33.13

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

Screenshot 2018-11-30 at 15.45.30

 

Screenshot 2018-11-25 at 16.58.22

 

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 :

Screenshot 2018-11-29 at 22.35.23

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

Screenshot 2018-11-29 at 22.25.36

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

Screenshot 2018-11-25 at 18.37.43

 

Thank you for reading. 🙂

 

 

List-Item-Attachments control

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:

ListItemAttachmentUpload.png

 

ListItemAttachments Tiles

ListItemAttachments Confirm Delete

ListItemAttachments Attachment Deleted

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:

Property Type Required Description
listId string yes Gui of List
itemId string yes List Item Id
webUrl string no URL of site if different of current site, user must have permissions
disabled Boolean no Disable Control
context WebPartContext|ApplicationCustomizerContext yes WebPart or Application customiser context

Source code updated in GitHub.

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

 

SPFx ListItemPicker Control

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:

ListItemPicker-selectlistListItemPicker-selectlist2

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

 

Property Type Required Description
listId string yes Gui of List
columnInternalName string yes InternalName of column to search and get values
onSelectedItem: (item:any) =>void; function yes Callback function
className string no CSS className
webUrl string no URL of site if different of current site, user must have permissions
value Array no Default Value
disabled Boolean no Disable Control
itemLimit number yes Number os items to select / return
context WebPartContext|ApplicationCustomizerContext yes WebPart or Application customiser context
sugestedHeaderText string no Text header to display
noresultsFoundTextstring string no Text message when no items

 

Bulk Upload Files with Metadata to SharePoint Online with PnP-Powershell

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.

Screenshot 2018-10-08 at 09.53.25

My PowerShell script Print Screens,

Screenshot 2018-10-08 at 11.02.35

Screenshot 2018-10-08 at 11.10.29

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

The code is here :

https://github.com/joaojmendes/BulkUploadFilesToSharePoint

 

 

 

 

 

 

Create Client Side App to SP2013 Using TypeScript, React and @PnP/PnPjs

Screenshot 2018-09-22 at 14.26.23

 

Client Side Development to SP2013 is not new, but in this Post I’ll try explain my experience with develop a Client Solution App with same technology that are use with SPFx,  Typescript, React, React-Ui-Fabric-React Components, I use the @PnP/PnPjs to access Lista Data.

SPFx is supported in SP2016 (Feature Pack 2) and SP2019 but not in SP2013.

First Step is create a Type Script React Project, I use the create-react-app with create-react-app-ts script  this will scaffold a project with tools necessary to create a React App with TypeScript

If you don’t have installed create-react-app  you must install with:

npm install create-react-app -g 

Can find more information here:

https://www.npmjs.com/package/create-react-app

after you have to install the react-scripts-ts with:

npm i react-scripts-ts -g

Can find more information here:

https://github.com/wmonk/create-react-app-typescript

Finally create the project:

create-react-app  <projectName> –scripts-version=react-scripts-ts

I use MAC OS X as my principal environment for development and for simplify the creation of a React Project with TypeScript I create a simple bash shell script that only receive a project name as parameter.

Here the my script:

CreateReactTS.sh . that have the following code:

create-react-app $1 –scripts-version=react-scripts-ts

To work with project I use VSCode as my editor , but you can use what you want, please see what is create, for details please see this links:

https://github.com/wmonk/create-react-apptypescript/blob/master/template/README.md​

https://github.com/facebook/create-react-app​

Screenshot 2018-10-03 at 21.18.35
Let start creating our SharePoint 2013 App. 🙂
Install Required Packages:
I use additional packages :

 

Project Organization:

Class to access SharePoint Data (services.ts) here are defined all methods to get data from SharePoint,  I use @PnP/PnPjs .

Note on use@PnP/PnPjs  , we are using SharePoint 2013 REST API’s,  first we have to setup@PnP/PnPjs .:

This is required in SharePoint 2013.

Screenshot 2018-10-03 at 21.43.06

Sample of my service.ts class:

Screenshot 2018-10-03 at 21.55.21

I use a class for some staff I use in my components, that I called util.ts

Screenshot 2018-10-03 at 22.01.38

Here my Application  App.tsx

Screenshot 2018-10-03 at 22.08.10

Screenshot 2018-10-03 at 22.11.52

 

Let’s compile my Application and prepare to deploy to SharePoint.

First thing is define a environment var called PUBLIC_URL to the location of SharePoint library where the build directory is replicated.

export PUBLIC_URL = “/Shared%20Documents/App/build”

On build process all path of our files, css, jscript, etc.. are reference to this location in the index.html.

Next, build the App.

npm run build

go to the build directory of your project and you will see the compiled files:

Screenshot 2018-10-04 at 09.32.57

Open the project folder with File Explorer in Windows or Finder in MAC and copy all the content of build directory to your SharePoint Document Library.

Screenshot 2018-10-04 at 09.42.56

In Document Library:

Screenshot 2018-10-04 at 11.24.48

After I create a WebPart based on Content Editor WebPart, point to my Index.html

Screenshot 2018-10-04 at 11.33.15

Upload the dwp file to WebPart Gallery and is ready to use. 🙂

Here my Sample:

Screenshot 2018-10-04 at 11.38.20

Screenshot 2018-10-04 at 11.39.36