With the profile completeness extension we can encourage or force users to fill their profiles. This sample SPFx extension renders a profile completeness score. By clicking the score, user can see the score details as shown below:
Sample SharePoint Framework client-side web part for Microsoft Teams Tab 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
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.
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.
TypeError: s.bootstrap is not a function
TypeError: qa.fn is undefined
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
More than one SPFx WebPart using angualr 1.5.8
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
MS Engineer suggested to load JQuery latest version(2.X or 3.X) for custom actions but still I could not resolve the issue.
I also tried to load the custom actions with JQuery noConflict() method
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.
Now I have 2 options
Remove JQuery from custom actions
Avoid JQuery Conflict in SPFX WebPart
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.
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.
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()