Monthly Archives: Novembro 2018

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. 🙂

 

 

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