Skip to content

Latest commit

 

History

History

react-application-myfavourites

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
react
12/1/2017 12:00:00 AM

SPFx My Favourites Application Customizer

Summary

Sample SharePoint Framework application customizer extension that shows favourite links using Office UI Fabric panel. Fabric UI React components used include - panel, dialog, list and spinner.

Inspired from (react-mega-menu) by Velin Georgiev (@VelinGeorgiev)

My Favourites

Used SharePoint Framework Version

1.10.0

Applies to

Solution

Solution Author(s)
react-application-myfavourites Anoop T (@anooptells)
Upgrade to SPFx 1.10.0 Hugo Bernier (@bernierh)

Version history

Version Date Comments
1.0 November 29, 2017 Initial release
2.0 April 14, 2020 Upgrade to SPFx 1.10.0

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Minimal Path to Awesome

  • Clone this repository
  • Update the pageUrl properties in the config/serve.json file
    • The pageUrl should be a modern page
    • This property is only used during development in conjunction with the gulp serve command
  • In the command line navigate to samples/react-application-myfavourites and run:
    • npm install
    • gulp serve
  • In a web browser
    • Follow one of the steps below for List Deployment
    • Choose Load Debug Scripts when prompted
    • Hope that you will see the buttons at the top!

Features

This extension illustrates the following concepts:

  • Using React for building SharePoint Framework client-side solutions.
  • Using Office UI Fabric React styles for building user experience consistent with SharePoint and Office.
  • Adapting Office UI Fabric styles
  • Caching data using sessionstorage
  • Theme syntax for applying official colors to custom CSS classes
  • Optionally, PnP Remote Provisioning PowerShell list deployment (see below)

Debug URL for testing

Here's a debug query string for testing this sample:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"5c715e3b-fb6f-43d7-a8a7-52bb5db34e50":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}

Your URL will look similar to the following (replace with your domain and site address):

https://yourtenant.sharepoint.com/sites/yoursite?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"5c715e3b-fb6f-43d7-a8a7-52bb5db34e50":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}

List Deployment

This solution expects the site to contain a Favorites list. This list will hold all the favorites and hence everyone will have write permissions on this list. Here are 2 options to ensure this list exists:

Option 1: Use the Included PnP Provisioning Template

A PnP Remote Provisioning template has been provided (./assets/FavouritesList.xml) along with a PowerShell script to apply the template to your site (./assets/ApplyTemplate.ps1). This is by far the easiest way to get a list on a site for quick testing but requires some minor setup. Here's how to do it:

Prerequisites

You'll need the SharePoint PnP PowerShell Cmdlets for SharePoint Online. It's a very quick install and if you don't have it already, go get it! You'll end up using it for far more than just this sample.

Running the PowerShell Script

Thank you Chris Kent (thechriskent.com, @thechriskent)

Using a PowerShell console (you can even use the PowerShell terminal included in Visual Studio Code), navigate to the assets folder in this sample. Run the script like this:

.\ApplyTemplate.ps1 https://yourtenant.sharepoint.com/sites/yoursite FavouritesList.xml

You'll be prompted for your credentials and then the list will be created. You may receive a warning about the site template not matching but this can be safely ignored since the custom list definition is supported everywhere.

Things included in the template are

  • The Favorites list
  • Updating the security of the Favorites list so that users will have access to items only they create
  • Adding "Created By (Author)" as an indexed column

Read More Here: Introducing the PnP Provisioning Engine

Option 2: Manually Create the List

You can always manually create the list using the SharePoint UI:

  1. Navigate to the Site Contents page and choose New > List
  2. Name the list Favorites and click Create
  3. Add and configure the columns as listed below:
Column Type Required Details
Title Text Yes
Description Multiple lines of text No
ItemUrl Multiple lines of text No Can be changed to Url (but needs code change)
  1. Under advanced settings of the list, set
  • Read access to "Read items that were created by the user" and
  • Write access to "Create items and edit items that were created by the user"
  1. Add "Created By" to the indexed columns (can be found under list settings)

Improvements

  • The code in this sample stores data in a list. Instead of this, the data can stored as a JSON array in a user profile property. Vardhaman has written a nice blog on editing user profile properties Or, if there is any other way to store data that can be added too.