SharePoint Online – Column Formatting

Background 

Microsoft has changed calculated fields to block the execution of custom markup. That means calculated fields that contain any unsupported markup will not display correctly.

This change went into effect on June 13, 2017. Administrators can request an extension through September 10, 2017 at the latest. During this extension, execution of custom markup in calculated fields will not be blocked. This request can be submitted through Microsoft Support. However, beginning September 10, 2017, all unsupported markup will be ignored. This change can be controlled in on-premise SharePoint 2013 and 2016 using CustomMarkupInCalculatedFieldDisabled setting.

Alternatives 

SharePoint Framework Field Customizer 

  • To extend the SharePoint user experience within modern pages and list/document libraries
  • Provides modified views to data for fields within a list/library
  • more powerful and can write custom code
  • End users need developer help to deploy the solution
  • For more advanced scenarios that column formatting does not support
  • Not supported in classic experience

Column Formatting 

  • To customize how fields in SharePoint list/library is displayed
  • No change in data; only changes how it is displayed to the users who browse the list/library
  • Anyone who can manage list/library views in a list can use column formatting
  • JSON based scehma
  • Reusable as site column

Supported Column Types 

The following column types support column formatting:

  • Single line of text
  • Number
  • Choice
  • Person or Group
  • Yes/No
  • Hyperlink
  • Picture
  • Date/Time
  • Lookup Title (in Lists)

The following are not currently supported:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label

Sample List with Column Formatting 

03082018SampleList

03082018ColumnFormatting

For more info click here 

Enable Modern Site Pages in SPOL

What is modern site Page?

Modern team site pages are fast, easy to author, and support rich multimedia content. Additionally, pages look great on any device, in a browser, or from within the SharePoint mobile app.

If you want to learn more about the functionalities offered by the “modern” experiences, see here.

Prerequisite

We should activate the Site Pages feature on the SharePoint site before creating the modern pages.

  • Click the settings(gear) icon and select Site settings
  • Click on Manage site features under Site Actions
  • Search for “Site Pages”
  • Click on Activate

How to create a modern page?

  • Click the settings(gear) icon and Site contents
  • Open the “Site Pages” Library
  • Click the Files options from top ribbon bar and select Site Page
  • Configure the required webparts
  • Save and Publish
  • Done

Supported Customizations

  • Custom branding
  • Adding “modern” pages programmatically
  • Adding, deleting, and updating client-side web parts on “modern” pages
  • Alternative layouts

Unsupported Customizations

  • Adding “classic” web parts on “modern” pages
  • Custom CSS via AlternateCSSUrl web property
  • Custom JavaScript embedded via user custom actions
  • Custom master pages
  • Minimal Download Strategy (MDS)

Connect SharePoint Framework Apps with Office 365 Service Endpoints using Office Graph APIs

As you aware, SharePoint Framework 1.4.1 supports MSGraphClient.

MSGraphClient is used to perform REST calls against Microsoft Graph. The Microsoft Graph JavaScript client library is a lightweight wrapper around the Microsoft Graph API. This class allows developers to start making REST calls to MSGraph without needing to initialize the the MSGraph client library.

Note: Microsoft Graph API is replacing the previously released GraphHttpClient, which is now considered to be deprecated.

In this post, I am going to show you a SharePoint Framework WebPart to fetch my User Profile details using Microsoft Graph API. I consider that you have a SharePoint Framework HelloWorldWebPart WebPart, if you don’t, take a look at this article.

Note: API Management can be performed only on first release tenant.

  • Import the MSGraphClient in the HelloWorldWebPart.ts file as shown below

importgrpahclient

  • Write the following code snippet inside the render function.

render.png

  • Open the package-solution.json file and update the Graph API permission

graphapipermission

  • Update the CDN cdnBasePath parameter in write-manifests.json file as per your setup
  • Execute the gulp bundle and gulp package-solution with ship attribute to prepare the build
  • Upload the CDN files in the CDN location specified in the write-manifests.json file
  • Upload the SPPKG file in the app catalog site. As shown below, We have to approve the Microsoft Graph API permission requested by the developer in the package-solution.json.

helloworddeploy.png

  • Click Deploy
  • Open the New SharePoint Admin Center and click on API Management
  • Select the permission and approve the request

approvehelloworld.png

  • Install the HelloWorld WebPart in a SharePoint Site and add the same in a page
  • Verify if HelloWorld WebPart is printing the current user display name and mail in browser console.

SharePoint Online – Create/Update Record with MMD Field using SharePoint Designer Workflow and REST API

Workflows help people to collaborate on documents and to manage project tasks by implementing business processes on documents and items in a SharePoint site. Workflows help organizations to adhere to consistent business processes, and they also improve organizational efficiency and productivity by managing the tasks and steps involved in business processes. This enables the people who perform these tasks to concentrate on performing the work rather than managing the workflow.

In the below example I am going to show you how to ADD/UPDATE a sharepoint list item with MMD Column.

Create Item

Step 1 – Create the following variables in the SharePoint Designer 2013 workflow and set the values accordingly

create

Step 2 – Add Call HTTP Web Service action and configure the same as shown below using the advanced properties

action

Step 3 – Based on POST Response Code you can perform your action using an If condition

Step 4 – Publish the workflow and test

Update Item

To update an item we have to slightly adjust the EndPointUrl and POST_RequestHeader variables as shown below

update

SharePoint Online – REST API – Select Taxonomy Field

You can perform basic create, read, update, and delete (CRUD) operations by using the Representational State Transfer (REST) interface provided by SharePoint. The REST interface exposes all the SharePoint entities and operations that are available in the other SharePoint client APIs. One advantage of using REST is that you don’t have to add references to any SharePoint libraries or client assemblies. Instead, you make HTTP requests to the appropriate endpoints to retrieve or update SharePoint entities, such as webs, lists, and list items.

If you have a requirement to select a taxonomy field from SharePoint Designer workflow using Call HTTP action, it is not a straightforward approach. The below article is going to talk about few workarounds for this problem.

My List

list

Note: Job Title is a Taxonomy field.

Problem 1 – Select query will not return Taxonomy Term Label

SPmmdcolumnselect

Problem 2 – Filter query can not be applied against the Taxonomy field.

spmmdcolumnfilter.png

Solution 1 – CAML Based REST Call

The following POST query help you to get the necessary results but the problem with this approach is we can not call this REST Endpoint from SharePoint Designer workflow as it contains curly braces and curly braces are used as tokens in SharePoint Designer.

spmmdcamlquery.png

Solution 2 – Query Taxonomy field value using GUID associated with the Taxonomy TextField

This will be a 3 step process

Step 1 : Get the TextField(hidden note field) value of the Taxonomy Field

Execute the following REST call and note down the TextField value from the REST response

notefield.png

Step 2 : Get the InternalName of the TextField

Pass the GUID of the TextField received from Step 1 in the below REST Call and get the InternalName of the same

intername.png

Step 3 : Get the Taxonomy field value passing InternalName as shown below

getvalue.png

Applying filter against this internal field also leads to the same problem

“The field ‘g9d8145fb42b43f59dd422adf7bbb575’ of type ‘Note’ cannot be used in the query filter expression. ”

A workaround will be to create an additional single line of text field in the list and populate the same with taxonomy field value and use the same to apply filter as shown below

https://yourtenant.sharepoint.com/sites/dev/_api/web/lists/getbytitle(‘Employee Details’)/items?$select=g9d8145fb42b43f59dd422adf7bbb575&$filter=ExtraField eq ‘CEO|6c47210d-44d3-496e-82a3-aaac11a3b94b’

 

 

 

 

 

 

Basic Site Provisioning using SharePoint Framework client-side web part and Microsoft Bot Framework

Summary

Sample SharePoint Framework client-side web part illustrating Site Provisioning using Microsoft Bot Framework.

Sample SharePoint Framework client-side web part illustrating Site Provisioning using Microsoft Bot Framework

Applies to

Solution

Solution Author(s)
js-bot-framework Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 June 4, 2018 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

Register Bot

  • go to https://dev.botframework.com/ and sign in with your Microsoft account
  • click on Register a bot link at the top botregister-step1
  • fill all the details like Name, Bot handle, Description and Messaging endpoint botregister-step2
  • generate a new App ID and password by clicking Create Microsoft App ID and password button. Save this value somewhere as we will use in this next step
  • accept the terms and click Register
  • your bot is now registered
  • click edit link under Web Chat channel and notedown the Secret key to configure the client web part botregister-step3
  • you can test your connection here by typing hello message and click Send. Try this step after completing “Publish Bot in Azure Web App” step

Publish Bot in Azure Web App

  • in the Azure Management Portal at https://portal.azure.com create a new Web App(example: https://asksprider.azurewebsites.net/)
  • download the publishing profile from the web app we just created. This will be used to publish the Bot in Azure using Visual Studio
  • Open the web.config file in AskSPRider.sln and update the MicrosoftAppId, MicrosoftAppPassword, O365AdminId and O365AdminPassword
    • MicrosoftAppId – App ID generated from Bot Registration Process
    • MicrosoftAppPassword – App Secret generated from Bot Registration Process
    • O365AdminId – SharePoint Online Admin User Id(example: user@tenant.onmicrosoft.com)
    • O365AdminPassword – SharePoint Online Admin Password
  • save the web.config file
  • right click on the project and publish the bot in Azure using the publishing profile downloaded

Configure web part

  • go to the working directory to the webpart folder in the command line run:
    • npm i
    • tsd install
    • gulp serve
  • add Ask SP Rider webpart and edit it
    • configure bot name and web chat secret key preview
    • type hello and proceed with site creation process
  • final output botregister-step4

Features

This project illustrates the following concepts:

  • connecting SharePoint Framework client-side web part to a custom bot
  • showing how to embed bot within client-side web part
  • how to create a sub-site by posting set of questions to the user via bot
  • bot form field validations

SharePoint Client-side Web Part – Video Capturing

Summary

Sample SharePoint Framework client-side web part illustrating video capturing via 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 Blog Admin

Version history

Version Date Comments
1.0 June 1, 2018 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