SharePoint Framework – Media Recorder

Summary

Sample SharePoint Framework client-side web part illustrating Video Recording using MediaRecorder Web API.

This is an experimental web part. Because this technology’s specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes

Browser with MediaRecorder API support

Sample SharePoint Framework client-side web part illustrating Video Recording using MediaRecorder Web API

Browser without MediaRecorder API support

Sample SharePoint Framework client-side web part illustrating Video Recording using MediaRecorder Web API

Applies to

Solution

Solution Author(s)
angular-media-recorder Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 September 04, 2017 Initial release

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 repo
  • go to the working directory of the webpart folder in the command line run:
    • npm and typings install
      • npm install @types/microsoft-ajax –save-dev
      • npm install @types/sharepoint –save-dev
      • npm install @types/angular –save-dev
    • gulp serve
  • Open the workbench page in a sharepoint site (https://{yoursiteurl}/_layouts/15/workbench.aspx)
  • add Media Recorder webpart and edit it
    • configure the library name where you would like to save the recording/input file.
    • start recording
    • allow camera and mic
    • stop recording
    • replay video
    • retry or upload the recorded video

Features

This project illustrates the following concepts:

  • Front/Back camera selection
  • Video recording using the supported browsers
  • File uploading option for the unsupported browsers
  • Playback recording
  • Upload files to document library
Advertisements

SharePoint Framework Web Part – Continuous Integration and Delivery

Continuous Integration and Delivery are the foundations of Modern Software Development. Continuous Integration and Delivery process is going to help your team in the following aspects:

  • Revision Control
  • Build Automation
  • Automated Deployment
  • Reduced Overhead
  • Consistent Build Process
  • Confidence and Team Communication
  • Risk Mitigation

In this article, I am going to show you how to set up Continuous Integration and Delivery for SharePoint Framework Web Part.

Tools Needed 

  1. Visual Studio Team Service – Source Control System
  2. Visual Studio Code – Code Editor
  3. SharePoint Framework Development Environment – Refer
  4. Git Repository Project in Visual Studio Team Service(VSTS)
  5. Git Commands
  6. A SharePoint Document Library that acts as a CDN
  7. SharePoint App Catalog Site
  8. A SharePoint Site to test the app

SharePoint Framework(SPFx) Git Project Configuration

The first step is to create a SPFx Git Repository Project in VSTS.

Snip20170818_1(Example)

Let us clone the newly created Git project into your favorite local folder using the following git command

git clone -b master repopath

SharePoint Framework(SPFx) Web Part Setup

Go to the project directory using command prompt/ terminal and set up your SPFx Web Part project as explained here. I am going to use my sample code here but feel free to write your own logic in your SPFx Web Part.

This is my project folder structure

Snip20170818_4.png

One Time Activity

Let us package artifacts and upload the files in app catalog site and CDN library.

Open the write-manifests.json file under config folder and update the cdnBasePath parameter with your CDN SharePoint Document Library path.

Snip20170818_8Make sure you are still in the project directory you used to set up your web part project. In the console window, execute the following gulp task:

Snip20170818_9

This will build the minified assets required to upload to the CDN library in temp\deploy directory. Go to your CDN SharePoint Library and upload the generated files.

Snip20170818_11

Snip20170818_14.png

In the console window, execute the following gulp task to package your client-side solution that contains the web part:

Snip20170818_10

The command will create the .sppkg package file in the sharepoint/solution.

Snip20170818_12

Go to your App Catalog site and upload the generated .sppkg file to the App Catalog. This will deploy the client-side solution package. SharePoint will display a dialog and ask you to trust the client-side solution to deploy. Click deploy.

Snip20170818_13.png

 

At this point the web part is ready to be used on a page. Open a site where you want to test the web part and go the Site contents page of the site. Choose Add – App from the toolbar and choose the your app to be installed on the site.

Snip20170818_16.png

After the app has been installed, add the webpart in a page

Screen Shot 2017-08-18 at 10.36.17 AM

Check-in the code and push the same to master branch via Visual Studio Code editor.

Climax

At this point we are ready integrate our SPFx web part project repository with VSTS continuous build and release process.

Gulp Tasks

Upload the highlighted custom gulp tasks provided by Elio Struyf and install the necessary npm packages as per the instruction given.

Snip20170818_7

Update the gulpfile.js as shown below:

Snip20170818_6

Continuous Integration and Delivery Setup in VSTS

Switch back to VSTS

Go to build & release section and click New buttonScreen Shot 2017-08-18 at 10.43.52 AM

Select the empty template and click Apply.

Variables

Configure the following variables for the build and release. Adjust the values as per your environment.

Snip20170818_28

Tasks

Add the following tasks and configure it as shown below

Process

Snip20170818_19

Get Sources

Snip20170818_20.png

NPM Install – npm

Snip20170818_21

Update CDN Location – Gulp 

Snip20170818_22.png

Bundle Project – Gulp

Snip20170818_23

Package Solution – Gulp 

Snip20170818_24.png

Upload Files in CDN – Gulp

Snip20170818_25.png

Upload App Package to App Catalog – Gulp 

Snip20170818_26.png

Deploy App – Gulp 

Snip20170818_27.pngTrigger

Also enable the continuous integration settings so that the build process starts when the latest code is checked-in in master branch.

Snip20170818_29.png

All done. Now it is time to test our continuous build and release process by pushing a new code change to git repository and check build process get triggered.

Code Change 

Let us change the progress bar color to red and check-in the latest change to git.

Screen Shot 2017-08-18 at 11.23.24 AM.png

Commit & Push Code Changes 

Screen Shot 2017-08-18 at 11.26.05 AM

Screen Shot 2017-08-18 at 11.26.25 AM

Build and Release Status

Screen Shot 2017-08-18 at 11.30.18 AM.png

Snip20170818_31.png

Snip20170818_32.png

Snip20170818_33.png

Snip20170818_34

As you can see in the screenshot, the latest code got updated and progress bar color is reflecting.

Email Notification

Snip20170818_35.png

Note: You can isolate the deployment process from the build process using a release template.

SPFx Extension – Email File URL

In SharePoint there used to be a ‘copy shortcut’ option in the right-click menu on a document. This feature is not available currently. Now we need to go to the share sub-menu to get a link to the document, but what is offered there is the docidredir link, not the full path.

This SPFx extension opens a dialog where the user can see the document full path. The Email Link button helps the user to share the link via default email client.

react-command-email-urlreact-command-email-urlreact-command-email-url

Used SharePoint Framework Version

SPFx Extensions Dev Preview

Applies to

Solution Author(s)
react-command-email-url Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 June 12, 2017 Initial release

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
  • Move to folder where this readme exists
  • In the command window run:
    • npm install
    • gulp serve --nobrowser
  • Use following query parameter in the SharePoint site to get extension loaded without installing it to app catalog

Debug URL for testing

Here’s a debug URL for testing around this sample.

?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"0af576ed-1e72-4602-bea9-543c60f5fa09":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar"}}

Full URL to request would be something like following:

https://tenant.sharepoint.com/Shared%20Documents/Forms/AllItems.aspx?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"0af576ed-1e72-4602-bea9-543c60f5fa09":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar"}}

Features

This project contains SharePoint Framework extensions that illustrates next features:

  • Command extension
  • Office UI Fabric React

Notice. This sample is designed to be used in debug mode and does not contain automatic packaging setup for the “production” deployment.

Building the code

git clone the repo
npm i
npm i -g gulp
gulp

This package produces the following:

  • lib/* – intermediate-stage commonjs build artifacts
  • dist/* – the bundled script, along with other resources
  • deploy/* – all resources which should be uploaded to a CDN.

Microsoft Blocked HTML Markup in SharePoint Calculated Fields

Problem
Microsoft has started blocking execution of custom markup in calculated fields in SharePoint Online from June 13, 2017 onwards.

Reference

Workaround

  • JS Link Approach – JSLink allows us to change the field formatting based on field values or custom logic. This approach may not work for calculated column and modern concept.
  • DOM Manipulation at runtime using a script editor webpart – This is a temporary solution as Microsoft is recommending users to use modern features.
  • SharePoint Framework Extension – This approach can be used only when we switch to modern concepts. We can make a ApplicationCustomizers using extension approach to derive a generic solution.

Temporary Fix for Classic Pages – DOM Manipulation at runtime

Sample Formula

Snip20170617_7

Sample JavaScript Code to add in Script Editor WebPart

Snip20170617_6.png

SharePoint Framework WebPart JQuery – AngularJS Conflict

Issue Summary

I have created a SharePoint Framework WebPart using AngularJS 1.5.8 (not using TypeScript) which was working fine in workbench.html. However I have noticed that we get intermittent errors and WebPart failed to render when a user does things like refresh. We could reproduce this error in all the major browsers.

Errors

TypeError: s.bootstrap is not a function

TypeError: qa.fn is undefined

Analysis

One thing is very clear from the error is that the angular related objects/modules are not recognized when the SPFx WebPart is trying to bootstrap. So I started analyzing the other components involved in the page and I could find the following

  1. Custom JavaScript Injections injected in the page such as global navigation using JQuery 1.11.1
  2. More than one SPFx WebPart using angualr 1.5.8

Options Tried 

  1. Initially I thought it might be an angular load timing/sequence issue and tried to reference angular in the page layout directly but no luck
  2. MS Engineer suggested to load JQuery latest version(2.X or 3.X) for custom actions but still I could not resolve the issue.
  3. I also tried to load the custom actions with JQuery noConflict() method

Root Cause 

As we all aware angular uses the lite version of JQuery internally. If JQuery is not available in the page, angular.element delegates to AngularJS’s built-in subset of JQuery, called jqLite. I noticed the SPFx WebPart was loading in all the browsers consistently when custom actions with no JQuery or without custom actions on the page. This means the JQuery(any version) included in the custom action conflicts with the jqLite included in angular. This was the root cause.

Solution

Now I have 2 options

  1. Remove JQuery from custom actions
  2. Avoid JQuery Conflict in SPFX WebPart

In my case I adopted option 1 because I can replace the JQuery related code with pure Javascript in custom actions and there is no clear documentation about option 2.

As per the MS Engineer, The product group is looking at adding some documentation/samples to show how to do option 2. Let us wait for this update as we can not completely avoid JQuery in SharePoint Development.

Reference

https://github.com/SharePoint/sp-dev-fx-webparts/issues/188

 

 

How to add external JavaScript file without typings in SharePoint Framework

Problem Statement 

In one of my requirement I have to reference https://c64.assets-yammer.com/assets/platform_embed.js file in SharePoint Framework WebPart to display the yammer feeds. But the platform_embed.js file is not available in npm and typings are also not available.

Solution

As the TypeScript typings is not available for yammer platform_embed.js file, we can’t use import * as yammer from the external settings. Instead, we should use require(‘yammer’).

Also yam is a global object, so we have to change the way we reference it to (window as any).yam.connect.embedFeed() instead of (yam as any).connect.embedFeed()

Thank you Waldek Mastykarz for this suggestion.

Check the below example

spfx1

spfx2.PNG

SharePoint Framework – Yammer Feed WebPart using Angular

Summary

This Web Part displays the feeds from yammer using https://c64.assets-yammer.com/assets/platform_embed.js.

Yammer Feed WebPart using Angular Yammer Feed WebPart Properties

Used SharePoint Framework Version

drop

Applies to

Solution

Solution Author(s)
angular-yammer Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 March 03, 2017 Initial release

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 repo
  • in the command line run:
    • npm i
    • tsd install
    • gulp serve

Features

The Yammer Feed is a sample Client-Side Web Part built on the SharePoint Framework using Angular.

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • using Angular for building SharePoint Framework Client-Side Web Parts
  • including Angular in the Web Part bundle
  • using non-reactive Web Part Property Pane and custom Properties
  • using conditional rendering for one-time Web Part setup
  • passing Web Part configuration to Angular and reacting to configuration changes
  • display the yammer feed based on configuration changes