Category Archives: SPFx

SharePoint Framework

Teams Management using Microsoft Graph API within SPFx

Microsoft Graph API has several REST API to manage different products. Team API is one among them. Graph API uses REST method with JSON format to complete the request.

Create Team v1.0 : V1.0 of the Graph API uses the Microsoft 365 Groups for the creation of Teams. Teams is nothing but an extension of M365 groups. So if you are using v1.0 you need to create Groups first then using the Group ID then create the Teams. The Group you are creating should have minimum of one Owner to it. Also one other issue I often encounter using this API is that the Creation of Team fails with 404 if the Group is created in last 15 min.

Create Team Beta: Using this API you can directly create the Teams. This API is used within my SPFx code.

SPFx Webpart

To create webpart from the scratch use the below command

yo @microsoft/sharepoint `
–solution-name “spfx-teamsManagement” `
–component-name “teams-management” `
–component-description “Manage Teams from SPFx. Create Teams, Create Channel, view all Teams properties.” `
–component-type “webpart” `
–framework “none” `
–environment “spo” `
–package-manager “npm” `
–skip-feature-deployment

 

Once the project is created make sure you add the relevant permission needed to execute the Graph API. Open the package-solution.json and insert the below code inside

“webApiPermissionRequests”: [  
      {  
        “resource”: “Microsoft Graph”,  
        “scope”: “User.Read.All”  
      },
      {  
        “resource”: “Microsoft Graph”,  
        “scope”: “User.ReadWrite.All”  
      },
      {  
        “resource”: “Microsoft Graph”,  
        “scope”: “User.ReadBasic.All”  
      },
      {  
        “resource”: “Microsoft Graph”,  
        “scope”: “Group.Read.All”  
      },
      {  
        “resource”: “Microsoft Graph”,  
        “scope”: “Directory.Read.All”  
      }  
    ]

Dependencies

My Project uses the below dependencies and types

“dependencies”: {
    “@fortawesome/fontawesome-free”: “^5.13.0”,
    “@microsoft/sp-core-library”: “1.10.0”,
    “@microsoft/sp-property-pane”: “1.10.0”,
    “@microsoft/sp-webpart-base”: “1.10.0”,
    “@microsoft/sp-lodash-subset”: “1.10.0”,
    “@microsoft/sp-office-ui-fabric-core”: “1.10.0”,
    “@types/webpack-env”: “1.13.1”,
    “@types/es6-promise”: “0.0.33”,
    “animate.css”: “^3.7.2”,
    “bootstrap”: “^4.4.1”,
    “jquery”: “^3.4.1”
  },
  “devDependencies”: {
    “@microsoft/microsoft-graph-types”: “^1.13.0”,
    “@microsoft/rush-stack-compiler-3.3”: “0.3.5”,
    “@microsoft/sp-build-web”: “1.10.0”,
    “@microsoft/sp-module-interfaces”: “1.10.0”,
    “@microsoft/sp-tslint-rules”: “1.10.0”,
    “@microsoft/sp-webpart-workbench”: “1.10.0”,
    “@types/bootstrap”: “^4.3.2”,
    “@types/chai”: “3.4.34”,
    “@types/jquery”: “^3.3.34”,
    “@types/mocha”: “2.2.38”,
    “ajv”: “~5.2.2”,
    “gulp”: “~3.9.1”,
    “url-loader”: “^4.1.0”
  }

Screens

 

Get Details about the Teams


Create New Teams

 


 

Create New Channel

 

Source Code:

The full source code is here

https://github.com/msisgreat/spfx/tree/master/spfx-teamsManagement

YouTube

SPFx – Microsoft Graph with Teams API

Microsoft Graph api helps to connect various platform within Microsoft 365. One of the platform is Microsoft Teams. Microsoft Teams API helps developer to get Channel and Chat information from Particular Teams. It helps to integrate with various existing application. SPFx latest framework has native support to Microsoft Graph API. Authentication to execute api is much easier. Please watch below video for step by step guide on how to integrate Teams API within SPFx

The full source code is here on github https://github.com/msisgreat/spfx/tree/master/msgraph-teams

Please subscribe to my channel to see more videos on SPFx development

SPFx – jQuery , Bootstrap4 & Font Awesome

Enable the jQuery, Bootstrap4 & font awesome for the SPFx

Step 1: Create SPFx

yo @microsoft/sharepoint –solution-name “jquery-spfx” –component-name “jqueryspfx-wp” –component-description “This webpart will use the jQuery, bootstrap and font awesome.” –component-type “webpart” –framework “none” –environment “spo” –package-manager “npm” –skip-feature-deployment

Step 2: Install additional packages

npm install jquery –save

npm install @types/jquery –save-dev

npm install bootstrap@4 –save

npm install @types/bootstrap@4 –save-dev

npm install –save @fortawesome/fontawesome-free

npm shrinkwrap

npm install url-loader –save-dev

Step 3: Config.json

“externals”: {

    “jquery”: {

      “path”“node_modules/jquery/dist/jquery.min.js”,

      “globalName”“jQuery”

    },

    “bootstrap”: {

      “path”“node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”,

      “globalName”“bootstrap”,

      “globalDependencies”: [

        “jquery”

      ]

    }

  }

Step 4: Gulpfile.js

const build = require(‘@microsoft/sp-build-web’);

build.configureWebpack.mergeConfig({

    additionalConfiguration: (generatedConfiguration) => {

        generatedConfiguration.module.rules.push({

            test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,

            loader: ‘url-loader’,

            query:{

                limit:10000,mimetype:‘application/font-woff2’

            }

        });

        return generatedConfiguration;

    }

});

https://blog.kloud.com.au/2017/07/06/spfx-bootstrap-react/

Step 5: webpart ts file

import * as $ from “jquery”;

import * as bootstrap from “bootstrap”;

require(‘../../../node_modules/bootstrap/dist/css/bootstrap.min.css’);

require(‘../../../node_modules/@fortawesome/fontawesome-free/css/all.min.css’);

 

SPFx Webpart using jQuery Plugin & Bootstrap

In this blog I will explain how to create a SPFx webpart using the Bootstrap & Jquery plugin tooltipster https://iamceege.github.io/tooltipster/. The tooltipster is one of the popular jquery plugin used to show formatted tooltip when a mouse hover or click event occur. The plugin is easy to use and can use html formatting for the title attribute of the html element. My sample application uses the latest fontawesome 5 to show the smilies. The finished application will look like below. The webpart will have 3 smilies which are fontawesome 5 icons, clicking on the icon will popup the tooltipster window. The tooltipster will have html format to get the comment and submit button. The submit button will save the comment, current user email to the list in SharePoint. PNPjs is used to add item to the list.

Full source code is in the Github https://github.com/msisgreat/spfx/tree/master/msisgreat

Libraries Used

  1. Bootstrap v4.3.1
  2. jQuery v3.4.1
  3. Font Awesome 5.10.1
  4. Tooltipster v4.2.6
  5. Pnpjs v1.3.5

Below is the screenshot of my dependencies from the package.json file

Step: 1

After creating the basic webpart using the reactjs option. Follow the steps from my previous blog to add the reference to bootstrap and fontawesome 5. You can read from here

Step : 2

Use below commands to install other dependencies

npm install jquery --save
npm install tooltipster --save
npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp @pnp/graph --save

In this sample I didn’t use any Microsoft Graph code, I just used the above command to install all the pnp module just in case. You can install what will work for you.

Once the libraries are installed add the below json entry to the config.json file under the “externals”:

"jquery": {
"path": "node_modules/jquery/dist/jquery.min.js",
"globalName": "jquery"
},

"bootstrap": {
"path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
"globalName": "bootstrap"
},

"tooltipster": {
"path": "node_modules/tooltipster/dist/js/tooltipster.bundle.min.js",
"globalName": "tooltipster"
}

The full config.json will look like this

Step: 3

Now open the SharePoint and create the List name “Feedbacks” in the site. The List will have 3 columns. Alternatively you can download the list template from here

Column Name Type
Title Single line of text
Comment Multiline Text
FeedbackType Choice field with

Excellent

Average

Poor

Step: 4

In the sample used here the webpart name is msisgreat. So you can see the file msisgreat.tsx under components folder. Open the full code using the Visual Studio Code and navigate to the components folder to see all the files.

Now create a file called Feedback.tsx under components, this is the React component which will display 3 smilies with the jsx elements. You can copy the code from the file here

Basically the code contains the reference to jquery and tooltipster and the code to load the component.

Step: 5

Go back to main webpart file in this case msisgreat.tsx, open the file and reference to the feedback component

Import Feedback from "./Feedback"

In the JSX add the <Feedback></Feedback>

Step: 6

I have used some of the custom styles in the sample. You can see those in the .scss file. Those are used as styles.<name> inside the Feedback.tsx

Once the code is done use the gulp serve to test it

Follow this article to package and deploy to the Developer site to test the original code to save to list

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page

SPFx – Adding Bootstrap & Font awesome 5

Node.js: v10.16.0
SPFx: 1.9.1

Bootstrap & Font Awesome are my mandatory libraries to build any site on SharePoint Online. I used it often to customise the look of SharePoint using the content editor webpart with js & css. When I tried to migrate my code to SPFx one of the challenge I faced was how to install those in the solution. Well we have several choices to add those in the framework
Before adding libraries please go through this Link from Microsoft Docs to understand how those external dependencies are loaded and handled within SPFx
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
Global Reference Approach:
In the below code I used the global option to load those libraries so that multiple webparts can make use of the libraries.

Step :1

After finished creating the WebPart solution using Yo generator install the bootstrap and font awesome using the below

npm install jquery --save
npm install @types/jquery --save-dev
npm install bootstrap@4 --save
npm install @types/bootstrap@4 --save-dev
npm install --save @fontawesome/fontawesome-free

Step:2

Add external references to the config.json file
Locate the config.json file under the config folder and add the below entry to the file

"externals": {
"jquery": {
"path": "node_modules/jquery/dist/jquery.min.js",
"globalName": "jQuery"
},
"bootstrap": {
"path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
"globalName": "bootstrap"
}
}

Step 3:

Font awesome is not recognised by default by the webpack, so the gulp has to recognise the font format before it loads it to the solution. Run the below command to install the url loader

npm install url-loader --save-dev

After installing add the below to the gulp.js file which is at the root folder

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(
{
test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'url-loader'
}
}
);
return generatedConfiguration;
}
});
build.initialize(gulp);

Step 4:

Now add the entry into the .tsx file to reference the bootstrap CSS & JS and the font awesome CSS

import * as jQuery from "jquery";
import * as bootstrap from "bootstrap";
require('../../../../node_modules/bootstrap/dist/css/bootstrap.min.css');
require('../../../../node_modules/@fontawesome/fontawesome-free/css/all.min.css');