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 

Advertisements

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)

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’

 

 

 

 

 

 

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