European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
SharePoint 2013 Hosting – HostForLIFE.eu :: Daterange Picker in SPFX Web Part
Apr 9th
Sometimes you have a requirement to allow a user to select a date range, but the react office fabric UI does not provide any control for selecting the date range. Therefore, you need to use a third party datepicker control supported in react. Here is a third party control for daterange picker:
https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker
You need to install the below npm package in order to use this daterange picker:
|
1 |
npm i @wojtekmaj/react-daterange-picker |
Once you have installed package, you need to import your code as below:
|
1 |
import DateRangePicker from '@wojtekmaj/react-daterange-picker'; |
Now you will be able to use date range picker in the render method, as shown below:
There are also many other properties for this control, you can find that properties in the above-given URL.
Issue with IE browser
When you add DateRange Picker control to your SPFx web part, it will work fine in all browsers. However, it will create an issue for the Internet Explorer browser.
It will block your full web part from being displayed, so we will not load it in the IE browser.
To resolve this issue, you need to install npm package for polyfill using below command,
|
1 |
npm install polyfill |
Once you have installed this package you need to add the below line of code after we have imported the daterange picker.
|
1 |
require('polyfill'); |
Now in the config.json file, add the below line of code in the externals section.
Now your web part will work in the IE browser. I hope this blog will help you!
SharePoint 2013 Hosting – HostForLIFE.eu :: Timer in Spfx (React)
Apr 2nd
In this article, we learn how to implement a timer in SPFx. The ‘useTimer’ is a react plugin, written using react hooks, that allows us to do timer functions in our component.
Steps
Open a command prompt and create a directory for the SPFx solution.
md spfx-ReactTimer
Navigate to the above-created directory.
cd spfx-ReactTimer
Run the Yeoman SharePoint Generator to create the solution.
yo @microsoft/sharepoint
Solution Name
Hit Enter to have a default name (spfx-ReactTimer in this case), or type in any other name for your solution.
Selected choice – Hit Enter
Target for the component
Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice – SharePoint Online only (latest).
Place of files
We may choose to use the same folder or create a subfolder for our solution.
Selected choice – same folder.
Deployment option
Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.
Selected choice – N (install on each site explicitly).
Permissions to access web APIs
Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.
Selected choice – N (solution contains unique permissions)
Type of client-side component to create
We can choose to create a client-side web part or an extension. Choose the web part option.
Selected choice – WebPart
Web part name
Hit Enter to select the default name or type in any other name.
Selected choice – ReactTimer
Web part description
Hit Enter to select the default description or type in any other value.
Framework to use
Select any JavaScript framework to develop the component. The available choices are – No JavaScript Framework, React, and Knockout.
Selected choice – React
The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command,
npm shrinkwrap
In the command prompt, type the below command to open the solution in the code editor of your choice.
- npm i use-timer//for timer function
- npm i bootstrap//for bootsrap css its optional
Necessary imports
- import { useTimer } from “use-timer”;
- import “bootstrap/dist/css/bootstrap.min.css”;//optional
Full Code
In ReactTimer.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import * as React from 'react'; import { IReactTimerProps } from './IReactTimerProps'; import "bootstrap/dist/css/bootstrap.min.css"; import {BasicTimer,DecrementalTimer,TimerWithEndTime} from './mytimer'; export default class ReactTimer extends React.Component<IReactTimerProps, {}> { public render(): React.ReactElement<IReactTimerProps> { return ( <div className="container"> <BasicTimer /> <DecrementalTimer /> <TimerWithEndTime /> </div> ); } } |
In mytimer.tsx,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import * as React from 'react'; import { useTimer } from "use-timer"; import "bootstrap/dist/css/bootstrap.min.css"; import RunningButton from "./RunningButton"; import "./mystyle.css"; export const BasicTimer = () => { const { time, start, pause, reset, isRunning } = useTimer(); return ( <div className="card"> <h5 className="card-header">Basic timer</h5> <div className="card-body"> {isRunning ? ( <RunningButton /> ) : ( <button className="btn btn-primary" onClick={start}> Start </button> )} <button className="btn btn-primary" onClick={pause}> Pause </button> <button className="btn btn-primary" onClick={reset}> Reset </button> </div> <div className="card-footer"> Elapsed time: <strong>{time}</strong> </div> </div> ); }; export const DecrementalTimer = () => { const { time, start, pause, reset, isRunning } = useTimer({ initialTime: 100, timerType: "DECREMENTAL" }); return ( <div className="card"> <h5 className="card-header">Decremental timer</h5> <div className="card-body"> {isRunning ? ( <RunningButton /> ) : ( <button className="btn btn-primary" onClick={start}> Start </button> )} <button className="btn btn-primary" onClick={pause}> Pause </button> <button className="btn btn-primary" onClick={reset}> Reset </button> </div> <div className="card-footer"> Remaining time: <strong>{time}</strong> </div> </div> ); }; export const TimerWithEndTime = () => { const endTime = 5; const { time, start, pause, reset, isRunning } = useTimer({ endTime }); return ( <div className="card"> <h5 className="card-header">Timer with end time</h5> <div className="card-body"> {isRunning ? ( <RunningButton /> ) : ( <button className="btn btn-primary" onClick={start}> Start </button> )} <button className="btn btn-primary" onClick={pause}> Pause </button> <button className="btn btn-primary" onClick={reset}> Reset </button> </div> <div className="card-footer"> {time === endTime ? ( <span>Finished!</span> ) : ( <span> Ellapsed time: <strong>{time}</strong> </span> )} </div> </div> ); }; |
In mystyle.css:
|
1 2 3 4 5 6 7 8 9 10 11 |
h1, p { font-family: Lato; } button{ margin-right: 5px; } .card{ margin-bottom: 30px; } |
In RunningButton.tsx:
|
1 2 3 4 5 |
import * as React from 'react'; const RunningButton = () => <button className="btn btn-primary" disabled style={{ cursor: 'default'}}>Running...</button>; export default RunningButton; |
Properties
| Property | Description |
| endTime | the value for which timer stops |
| initialTime | the starting value for the timer |
| interval | the interval in milliseconds |
| step | the value to add to each increment/decrement |
| timerType | the choice between a value that increases (“INCREMENTAL”) or decreases (“DECREMENTAL”) |
Expected Output
Conclusion
In this post, we learned how to implement timers in SPFx. I hope this helps someone, happy coding! 🙂
SharePoint 2013 Hosting – HostForLIFE.eu :: Upload Large File As Chunks In SharePoint Online Using Angular
Mar 20th
This article will help you upload the large files in the SharePoint online library into smaller chunks. This article is based on the article, Programmatically Uploading Large Files In SharePoint Online, with some enhancement.
It will walk through step-by-step how to upload the file in SharePoint Online.
Step 1
Create a library in Sharepoint online, eg. Name it Test_ABC.
Step 2
Install Node.js from here
Step 3
Create an Angular project(LargeFileUpload) using AngularCLI
Step 4
Create a proxy setting for Angular with Sharepoint online using my blog Proxy With Angular 6+ And SharePoint Environment.
Step 5
Create a FileUpload Component using the below Command
|
1 |
ng g c FileUpload |
Step 6
Create a FileUpload and GlobalServices services using the following commandL
Once the template for file upload is created, then update the file-upload.component.html
- File Upload: <input placeholder=“Upload File” type=“file” (change)=“largeFileUpload($event)”>
Then file-upload.component.ts as:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Component, OnInit } from '@angular/core'; import { FileUploadService } from '../services/file-upload.service'; @Component({ selector: 'app-file-upload', templateUrl: './file-upload.component.html', styleUrls: ['./file-upload.component.css'] }) export class FileUploadComponent implements OnInit { constructor( private fileUploadService: FileUploadService ) { } ngOnInit() { } largeFileUpload(event: any) { let fileList: FileList = event.target.files; if (fileList.length != 0) { this.fileUploadService.fileUpload(fileList[0], "Test_ABC", fileList[0].name).then(addFileToFolder => { console.log("Large File Uploaded Successfully"); }).catch(error => { console.log("Error while uploading" + error); }); } } } |
file-upload.services.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
import { Injectable } from '@angular/core'; import { GlobalServiceService } from './global-service.service'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; declare const $: any; @Injectable({ providedIn: 'root' }) export class FileUploadService { constructor( private globalService: GlobalServiceService, private httpClient: HttpClient ) { } public siteUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl; public siteRelativeUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl != "/" ? this.globalService.sharePointPageObject.webAbsoluteUrl : ""; public fileUpload(file: any, documentLibrary: string, fileName: string) { return new Promise((resolve, reject) => { this.createDummyFile(fileName, documentLibrary).then(result => { let fr = new FileReader(); let offset = 0; // the total file size in bytes... let total = file.size; // 1MB Chunks as represented in bytes (if the file is less than a MB, seperate it into two chunks of 80% and 20% the size)... let length = 1000000 > total ? Math.round(total * 0.8) : 1000000 let chunks = []; //reads in the file using the fileReader HTML5 API (as an ArrayBuffer) - readAsBinaryString is not available in IE! fr.readAsArrayBuffer(file); fr.onload = (evt: any) => { while (offset < total) { //if we are dealing with the final chunk, we need to know... if (offset + length > total) { length = total - offset; } //work out the chunks that need to be processed and the associated REST method (start, continue or finish) chunks.push({ offset, length, method: this.getUploadMethod(offset, length, total) }); offset += length; } //each chunk is worth a percentage of the total size of the file... const chunkPercentage = (total / chunks.length) / total * 100; console.log("Chunk Percentage: "+chunkPercentage); if (chunks.length > 0) { //the unique guid identifier to be used throughout the upload session const id = this.generateGUID(); //Start the upload - send the data to S this.uploadFile(evt.target.result, id, documentLibrary, fileName, chunks, 0, 0, chunkPercentage, resolve, reject); } }; }) }); } createDummyFile(fileName, libraryName) { return new Promise((resolve, reject) => { // Construct the endpoint - The GetList method is available for SharePoint Online only. var serverRelativeUrlToFolder = "decodedurl='" + this.siteRelativeUrl + "/" + libraryName + "'"; var endpoint = this.siteUrl + "/_api/Web/GetFolderByServerRelativePath(" + serverRelativeUrlToFolder + ")/files" + "/add(overwrite=true, url='" + fileName + "')" const headers = { "accept": "application/json;odata=verbose" }; this.executePost(endpoint, this.convertDataBinaryString(2), headers).then(file => resolve(true)).catch(err => reject(err)); }); } // Base64 - this method converts the blob arrayBuffer into a binary string to send in the REST request convertDataBinaryString(data) { let fileData = ''; let byteArray = new Uint8Array(data); for (var i = 0; i < byteArray.byteLength; i++) { fileData += String.fromCharCode(byteArray[i]); } return fileData; } //this method sets up the REST request and then sends the chunk of file along with the unique indentifier (uploadId) uploadFileChunk(id, libraryPath, fileName, chunk, data, byteOffset) { return new Promise((resolve, reject) => { let offset = chunk.offset === 0 ? '' : ',fileOffset=' + chunk.offset; //parameterising the components of this endpoint avoids the max url length problem in SP (Querystring parameters are not included in this length) let endpoint = this.siteUrl + "/_api/web/getfilebyserverrelativeurl('" + this.siteRelativeUrl + "/" + libraryPath + "/" + fileName + "')/" + chunk.method + "(uploadId=guid'" + id + "'" + offset + ")"; const headers = { "Accept": "application/json; odata=verbose", "Content-Type": "application/octet-stream" }; this.executePost(endpoint, data, headers).then(offset => resolve(offset)).catch(err => reject(err)); }); } //the primary method that resursively calls to get the chunks and upload them to the library (to make the complete file) uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject) { //we slice the file blob into the chunk we need to send in this request (byteOffset tells us the start position) const data = this.convertFileToBlobChunks(result, chunks[index]); //upload the chunk to the server using REST, using the unique upload guid as the identifier this.uploadFileChunk(id, libraryPath, fileName, chunks[index], data, byteOffset).then(value => { const isFinished = index === chunks.length - 1; index += 1; const percentageComplete = isFinished ? 100 : Math.round((index * chunkPercentage)); console.log("Percentage Completed:" +percentageComplete) //More chunks to process before the file is finished, continue if (index < chunks.length) { this.uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject); } else { resolve(value); } }).catch(err => { console.log('Error in uploadFileChunk! ' + err); reject(err); }); } //Helper method - depending on what chunk of data we are dealing with, we need to use the correct REST method... getUploadMethod(offset, length, total) { if (offset + length + 1 > total) { return 'finishupload'; } else if (offset === 0) { return 'startupload'; } else if (offset < total) { return 'continueupload'; } return null; } //this method slices the blob array buffer to the appropriate chunk and then calls off to get the BinaryString of that chunk convertFileToBlobChunks(result, chunkInfo) { return result.slice(chunkInfo.offset, chunkInfo.offset + chunkInfo.length); } generateGUID() { function s4() { return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } async executePost(url, data, requestHeaders) { const res = await this.httpClient.post(url, data, requestHeaders).toPromise().catch((err: HttpErrorResponse) => { const error = err.error; return error; }); return this.parseRetSingle(res); } parseRetSingle(res) { if (res) { if (res.hasOwnProperty('d')) { return res.d; } else if (res.hasOwnProperty('error')) { const obj: any = res.error; obj.hasError = true; return obj; } else { return { hasError: true, comments: res }; } } else { return { hasError: true, comments: 'Check the response in network trace' }; } } } |
Finally, run the code using the command:
|
1 |
npm run start |
Now, your requests will be served at http://localhost:4200/.
SharePoint 2013 Hosting – HostForLIFE.eu :: Read Large Lists in SharePoint Framework
Mar 6th
Reading large lists always has been a challenge for SharePoint developers. This is one of those instances where the on-premises environment is appreciated by SharePoint developers, as SharePoint administrators can come to their rescue by adjusting the query threshold limit in Central Administration. The other commonly used approaches from the developer are to limit the items in view, index the columns, etc. This workaround reduces the pain to a certain extent but not fully. Unfortunately, we do not have much administration liberty in SharePoint Online to play around with threshold limits. In this article, we will revise the threshold concept and various approaches to read the large lists programmatically in SharePoint Framework.
Threshold
Let’s quickly revise the term Threshold. To build information architecture for SharePoint, it is important to understand the SharePoint online limitations and boundaries. Which says, the list items limit is 30 Million. That’s very very huge.
Every time you access a list or document library, a search query happens behind the scenes that return all the results. For example, if you have 50,000 items in a list, when you try to show them in a single view or programmatically retrieve those in a single query, you won’t be able to get more than 5,000 items. We can say the list/library is facing the 5,000 item limit threshold. The threshold limit with SharePoint Online is still 5,000.
Do not confuse the threshold of 5,000 items with the list capacity which is 30 Million.
Get around with Threshold
PnP JS is the popular library amongst SPFx developers for SharePoint operations. It provides some cool methods to get around the threshold issues.
Example# 1: Basic usage
Example# 2: Set page size
Example# 3: Use select and top. top will set page size and override the any value passed to getAll
|
1 2 3 4 |
pnp.sp.web.lists.getByTitle("BigList").items.select("Title").top(4000).getAll().then((allItems: any[]) => { // how many did we get console.log(allItems.length); }); |
Example# 4: Use filter as a supported odata operation
But, this will likely fail on large lists.
Custom Implementation
Here is another approach to get read the large list with paging implementation.
Consider we have a SharePoint list named “LargeList” with below schema:
| Field Name | Type |
| Title | Single line of text |
| Description | Multiple lines of text |
| Category | Single line of text |
| Quantity | Number |
The model to represent above list will be as below:
|
1 2 3 4 5 6 |
export interface ILargeListItem { Title: string; Description: string; Category: string; Quantity: number; } |
Let us define our approach to handle large list:
- We will define the page size as 5000 for example (maximum threshold limit). Please note, SharePoint internally fetches the items in the batch of 100 items.
- The number of requests we will have to read entire large list will be: Number of list items / page size.
- We will make asynchronous requests to read the list items in batch.
- Wait for all asynchronous requests to finish
Implement a genetic method getPageListItems which returns items with paging, starting with index passed as an argument.
|
1 |
skiptoken=Paged=TRUE%26p_ID=` + (index * Constants.Page_Size + 1) |
The getPageListItems method implementation will look as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
private getPageListItems(listTitle: string, index: number): Promise<ILargeListItem[]> { return new Promise<ILargeListItem[]>((resolve, reject): void => { let requestUrl = this.context.pageContext.web.absoluteUrl + `/_api/web/Lists/GetByTitle('` + listTitle + `')/items` + `?$skiptoken=Paged=TRUE%26p_ID=` + (index * Constants.Page_Size + 1) + `&$top=` + Constants.Page_Size + `&$select=ID,Title,Description,Category,Quantity`; this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { response.json().then((responseJSON: any) => { resolve(responseJSON.value); }); }); }); } |
Implement a method to get the latest item id. This will be our maximum limit to read the items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public getLatestItemId(listTitle: string): Promise<number> { return new Promise<number>((resolve: (itemId: number) => void, reject: (error: any) => void): void => { sp.web.lists.getByTitle(listTitle) .items.orderBy('Id', false).top(1).select('Id').get() .then((items: { Id: number }[]): void => { if (items.length === 0) { resolve(-1); } else { resolve(items[0].Id); } }, (error: any): void => { reject(error); }); }); } |
The next step is to implement method the main method to make asynchronous requests to read the list items in batch.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
public async getLargeListItems(listTitle: string): Promise<ILargeListItem[]> { var largeListItems: ILargeListItem[] = []; return new Promise<ILargeListItem[]>(async (resolve, reject) => { // Array to hold async calls const asyncFunctions = []; this.getLatestItemId(listTitle).then(async (itemCount: number) => { for (let i = 0; i < Math.ceil(itemCount / Constants.Page_Size); i++) { // Make multiple async calls let resolvePagedListItems = () => { return new Promise(async (resolve) => { let pagedItems:ILargeListItem[] = await this.getPageListItems(listTitle, i); resolve(pagedItems); }) }; asyncFunctions.push(resolvePagedListItems()); } // Wait for all async calls to finish const results: any = await Promise.all(asyncFunctions); for (let i = 0; i < results.length; i++) { largeListItems = largeListItems.concat(results[i]); } resolve(largeListItems); }); }); } |
Summary
Reading large lists always has been a challenge for SharePoint developers. There are various approaches to read the large lists programmatically in SharePoint Framework. We explored the options to read large lists with PnP JS as well a custom implementation with paging approach.
SharePoint 2013 Hosting – HostForLIFE.eu :: How To Get Current Context From SharePoint Modern Site Page?
Feb 27th
Today we will see how to get the current context information from Modern Pages. In Classical Pages and anything other than modern site pages, we can get the current web and user context information using the _spPageContextInfo variable.
But when we try to access the same variable in modern site pages, we will get an undefined error. If we change the page to view source mode, we will see this _spPageContextInfo JavaScript variable is commented. Due to that we won’t access the current context information.
There is a workaround available and that too has come from SharePoint. We must use the full Modern Page URL to send the request along with “as=json” as a query string.
Format of the Request URL,
- http://domaoin.sharepoint.com/sites/name/sitepages/modernpage.aspx
- http://domaoin.sharepoint.com/sites/name – If the modern page is the home page of the site
To test this, navigate to the modern site page. Then open the browser console and paste the below code snippet,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//Reference URL https://gist.github.com/ktskumar/ab378261b9f7d349254043dc935c08d9#file-getmodernpagecontext-js //getRequest method reference - https://gist.github.com/ktskumar/a9e9df497673e9fd26ead8532b9ff425 function getRequest(url) { var request = new XMLHttpRequest(); return new Promise(function(resolve, reject) { request.onreadystatechange = function() { if (request.readyState !== 4) return; if (request.status >= 200 && request.status < 300) { resolve(request); } else { reject({ status: request.status, statusText: request.statusText }); } }; request.open('GET', url, true); request.setRequestHeader("Content-Type", "application/json;charset=utf-8"); request.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal"); request.setRequestHeader("ODATA-VERSION", "4.0"); request.send(); }); } //Get the Request location from the browser URL var path = location.href.replace(location.search, "") + "?as=json"; //Returns the current user, item, page and context information getRequest(path).then(function(response) { console.log(JSON.parse(response.response)); }); |
And it returns the context information of current user, current page properties, current item properties and current web properties.
SharePoint 2013 Hosting – HostForLIFE.eu :: React Toast Notifications In SPFX
Feb 20th
The react-toast-notifications is a plugin written in React.js to generate toast notifications in React doms. Since this plugin is written in a React hooks concept, we are not able to use this in class component. Rather, we can use this in functional component.
Open a command prompt. Create a directory for the SPFx solution.|
1 |
md spfx-ToastNotication |
Navigate to the above-created directory.
|
1 |
cd spfx-ToastNotication |
Run the Yeoman SharePoint Generator to create the solution.
|
1 |
yo @microsoft/sharepoint |
Solution Name
Hit Enter to have the default name (spfx-ToastNotication in this case) or type in any other name for your solution.
Selected choice – Hit Enter
Target for the component
Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice – SharePoint Online only (latest).
Place of files
We may choose to use the same folder or create a subfolder for our solution.
Selected choice – same folder.
Deployment option
Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.
Selected choice – N (install on each site explicitly).
Permissions to access web APIs
Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.
Selected choice – N (solution contains unique permissions)
Type of client-side component to create
We can choose to create a client-side web part or an extension. Choose the web part option.
Selected choice – WebPart
Web part name
Hit Enter to select the default name or type in any other name.
Selected choice – SpfxToast
Web part description
Hit Enter to select the default description or type in any other value.
Framework to use
Select any JavaScript framework to develop the component. Available choices are – No JavaScript Framework, React, and Knockout.
Selected choice – React
The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command,
|
1 |
npm shrinkwrap |
In the command prompt, type the below command to open the solution in the code editor of your choice.
NPM Packages Used,
On the command prompt, run the below commands
|
1 |
npm i react-toast-notifications |
Necessary imports for Toast Notification plugin,
|
1 |
import { ToastProvider, useToasts } from 'react-toast-notifications' ; |
Wrap your ToastComponent in the ToastProvider, which provides context for the Toast descendants.
e.g)
To intialize the toast notification,
|
1 2 3 4 5 |
const { addToast } = useToasts(); addToast(mycontent, { appearance: 'success', autoDismiss: false, } |
Available apearance paramters are success, error, warning and info in default autodismiss is false.
You can set autodismiss by providing milliseconds.
|
1 2 3 4 |
<ToastProvider autoDismiss autoDismissTimeout={6000} placement="bottom-center"> |
Available placements are ‘bottom-left’ | ‘bottom-center’ | ‘bottom-right’ | ‘top-left’ | ‘top-center’ | ‘top-right’
The useToasts hook contains following signatures,
|
1 |
const { addToast, removeToast, removeAllToasts, updateToast, toastStack } = useToasts(); |
in SpfxToast.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import * as React from 'react'; import { ISpfxToastProps } from './ISpfxToastProps'; import { MyReactToast }from './Reacttoast'; export default class SpfxToast extends React.Component<ISpfxToastProps, {}> { public render(): React.ReactElement<ISpfxToastProps> { return ( <div> <MyReactToast mycontent={"Hello it's Peter"}/> </div> ); } } |
in Reacttoast.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import * as React from 'react'; import { ToastProvider,useToasts } from 'react-toast-notifications'; const ToastDemo = ({mycontent}) =>{ const { addToast } = useToasts(); return ( <> <button onClick={() => addToast(mycontent, { appearance: 'success', autoDismiss: false, PlacementType :'bottom-left', })}> success Toast </button> <button onClick={() => addToast(mycontent, { appearance: 'error', autoDismiss: false, })}> error Toast </button> <button onClick={() => addToast(mycontent, { appearance: 'warning', autoDismiss: false, })}> warning Toast </button> <button onClick={() => addToast(mycontent, { appearance: 'info', autoDismiss: false, })}> Info Toast </button></> ); }; export const MyReactToast = ({mycontent}) => ( <ToastProvider> <ToastDemo mycontent={mycontent} /> </ToastProvider> ); |
