Ben Prins – Page 12 – Consulting and developing on Office 365

SharePoint Teams: Link web part

April 3, 2017 Ben Prins Office 365

A new Link web part has been added to the Team sites. With this web part you can add a link (website) to a page to create a link that displays information about the linked page.
The web part will create a clickabe tile that contains a title, description and a picture if possible of the linked page. The look and feel is the same as linking a web page in Slack or WhatsApp.

Solution

Open the home page of a teamsite
Set the page in the edit mode
Click on the plus icon and click on the Link web part
Provide the web part with a hyperlink and press enter. The web part will resolve the hyperlink and show some information of the website.
Click on the X next to the hyperlink to hide the hyperlink and save the changes

SharePoint 2013 Workflow: Check if list item exists

March 13, 2017 Ben Prins Office 365

For a customer we are building a complex approval process on Office 365 with SharePoint 2013 workflows. During the process we need to check if an list item (in an other list) existed. There is no default action that lets you do this. You can however us the set variable and if statement action to figure out if the item you are looking for exists or not. This is a useful trick to know when working with SharePoint 2013 workflows.

Solution

Create a SharePoint 2013 workflow.
Create a variable called ContractItemID, here we will try to store the ID of the list item we are trying to find.
Set the variable to 0 (zero).
Then we need to try and set the ContractItemID variable with the ContractID of the item we are searching. This can be from the same list or a different list.
I am trying to find the ID of a list item with a specific Contract Number.
If the workflow finds an ID the ID will be stored in the variable, if no item is found then the ContractItemID value will remain 0 (zero)
Use an if statement to determine if the list item exists.

JavaScript / jQuery: Hide/show fields

March 1, 2017 Ben Prins Office 365

With SharePoint we use a lot of lists and libraries to store and share information, we add and change this information with the help of forms. In most cases we create one form with all the information required for the content. Even if not all the information is required for all types of content or if it depends on a phase or status. With the help of jQuery and JavaScript we can create a more dynamic form that will hide/show fields based on selected values of fields. Make sure to disable the quick option, otherwise user will be able to edit the field outside of the provided solution.

SharePoint 2013/Online: Disable Quick edit

Open the list or library settings
Open the Advanced settings
Set Quick Edit to No

SharePoint 2010: Disable Datasheet editing

Open the list or library settings
Open the Advanced settings
Set Datasheet to No

JavaScript: New Form

Open your favorite JavaScript Editor.
Create a new JavaScript file called NewFormHideShow.js
Add the following base code to the JavaScript file.
```
$( document ).ready(function() {
   
}
);
```
The first step is to hide the columns. Find the display names of the field that need to be hidden. Note that you need the name located in the HTML nobr tag.
You can use a DOM explorer to find the correct names.

For each field add the following code.

$('nobr:contains("[Field Name]")').closest('tr').hide();

In my example I hide two fields, Finalized Date and Finalized By. My example code for the document ready function is shown below.

$(document).ready(function()
   {
      $('nobr:contains("Finalized Date")').closest('tr').hide(); 
      $('nobr:contains("Finalized By")').closest('tr').hide();
   });

The second step is to make the function that hides or shows the fields depended on the selected value.

Add the following code to the JavaScript.

(function($){
   function showHideRegionLocation() 
   {
      var FeedbackMatchingValue = 'Final';

      var thisDiv = $("select[title='Status']"); 
      var mmFieldValue = thisDiv.find("option:selected").text();
		
      $('nobr:contains("Finalized Date")').closest('tr').hide(); 
      $('nobr:contains("Finalized By")').closest('tr').hide();
			
      if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
      {
         $('nobr:contains("Finalized Date")').closest('tr').show(); 
         $('nobr:contains("Finalized By")').closest('tr').show();
      } 					
   }

Set the var FeedbackMatchingValue to the value which will show the hidden fields.
Set the var thisDiv to the name of the Field that is used to show/hide the fields. Note that different types are just for different columns example Select or Input.
Add the hide and Show codes. The code hides or show the table row (tr).

Add the final function to the code. This part makes sure the functions runs when a users selects and/or reselects the option.

$(document).ready(function() {
   $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
   });

})(window.jQuery);

Change the value after id^ to the field that contains the value on which field are being shown/hidden.

The final code looks like this.

$(document).ready(function()
   {
      $('nobr:contains("Finalized Date")').closest('tr').hide(); 
      $('nobr:contains("Finalized By")').closest('tr').hide();
});

(function($){
   function showHideRegionLocation() 
   {
   var FeedbackMatchingValue = 'Final';
   
   var thisDiv = $("select[title='Status']"); 
   var mmFieldValue = thisDiv.find("option:selected").text();
		
   $('nobr:contains("Finalized Date")').closest('tr').hide(); 
   $('nobr:contains("Finalized By")').closest('tr').hide();
			
   if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
   {
      $('nobr:contains("Finalized Date")').closest('tr').show(); 
      $('nobr:contains("Finalized By")').closest('tr').show();
   } 	
}

$(document).ready(function() {
   $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
   });	
})(window.jQuery);

JavaScript: Edit Form

The edit form is almost completely the same, only the last function is different.
Open your favorite JavaScript Editor.
Create a new JavaScript file called EditFormHideShow.js
Follow the steps 3 – 12 from the chapter JavaScript: New Form.

Add the final function to the code. This part makes sure the functions runs when a users selects and/or reselects the option.

$(document).ready(function() {
   setTimeout(function() {
      showHideRegionLocation();
   }, 1000);
   $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
   });	
})(window.jQuery);

Change the value after id^ to the field that contains the value on which field are being shown/hidden.

The final code looks like this.

$(document).ready(function()
   {
      $('nobr:contains("Finalized Date")').closest('tr').hide(); 
      $('nobr:contains("Finalized By")').closest('tr').hide();
});

(function($){
   function showHideRegionLocation() 
   {
   var FeedbackMatchingValue = 'Final';
   
   var thisDiv = $("select[title='Status']"); 
   var mmFieldValue = thisDiv.find("option:selected").text();
		
   $('nobr:contains("Finalized Date")').closest('tr').hide(); 
   $('nobr:contains("Finalized By")').closest('tr').hide();
			
   if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
   {
      $('nobr:contains("Finalized Date")').closest('tr').show(); 
      $('nobr:contains("Finalized By")').closest('tr').show();
   } 	
}

$(document).ready(function() {
   setTimeout(function() {
      showHideRegionLocation();
   }, 1000);
   $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
   });	
})(window.jQuery);

Adding JavaScript to a form

Open the edit and/or new form of the list.
Set the form in edit mode
Add the Script Editor Web Part to the page

Edit the SNIPPET and add the following code.

<script src="../../SiteAssets/System/jquery-3.1.1.min.js" type="text/javascript"></script> 
<script src="../../SiteAssets/System/EditFormHideShow.js" type="text/javascript"></script>

Insert the code en Stop editing the form.
Save the custom JavaScript HideColumns and the jQuery script in the correct location.
The JavaScript will now run and hide or shows the field based on the selected value of the field Status.

JavaScript / jQuery: Set fields to read only

February 9, 2017 Ben Prins Office 365

With SharePoint we use a lot of lists and libraries to store and share information. But not every bit of information needs to be managed/changed by users. Sometimes a workflow or code is responsible for the information. With default SharePoint it is not possible to set field to read only, but with the help of jQuery and JavaScript we can. We can add JavaScript to the new and or edit form and disable (read only) any field we want. Make sure to disable the quick option, otherwise user will be able to edit the read only field using this feature.

SharePoint 2013/Online: Disable Quick edit

Open the list or library settings
Open the Advanced settings
Set Quick Edit to No

SharePoint 2010: Disable Datasheet editing

Open the list or library settings
Open the Advanced settings
Set Datasheet to No

Creating the JavaScript

Open your favorite JavaScript Editor
Create a new JavaScript file called HideColumns.js

Add the following base code to the JavaScript file

// A $( document ).ready() block.
$( document ).ready(function() {
   
}
);

Now you need to get the display names of the fields you need to set to read only (disable). Note that you need the correct name of the input, select, text area etc fields. Make sure you do not select the label of the field.
You can use a DOM explorer to find the correct type of fields and the corresponding name. Note that different types are just for different columns
In this example I selected the Multiple Lines of text field
The selected code is
In this code you are able to find the name: Multiple Lines
And the type of field: textarea
Do this for all the fields you need disable
In my example I will disable the following fields

Name Column Type Input field type

Multiple Lines Multiple lines of text Textarea

Title Single line of text Input

Date Date and time Input

Choice Choice Select
Depended on the type of field different code is required.
For Input and textarea use
```
.attr("disabled", "disabled"); 
```
For select we use
```
.prop("disabled", true);
```

The final code will look as follows

// A $( document ).ready() block.
$( document ).ready(function() {
    jQuery("input[title='Title']").attr("disabled", "disabled"); 
    jQuery("textarea[title='Multiple Lines']").attr("disabled", "disabled");
    jQuery("input[title='Date']").attr("disabled", "disabled"); 	
    jQuery("select[title='Choice']").prop("disabled", true);
    }
);

Adding JavaScript to a form

Open the edit (or new) form of the list.
Set the edit form in edit mode
Add the Script Editor Web Part to the page

Edit the SNIPPET and add the following code

<script src="../../SiteAssets/System/jquery-3.1.1.min.js" type="text/javascript"></script> 
<script src="../../SiteAssets/System/HideColumns.js" type="text/javascript"></script>

Insert the code en Stop editing the form.
Save the custom JavaScript HideColumns and the jQuery script in the correct location
The JavaScript will now run and set the required field on read only when the edit form is opened

SharePoint 2010 Workflow: Capture document set versions

February 1, 2017 Ben Prins Office 365

When a user changes a document set the version is not automatically capture, the user can capture the version by manually . Capturing a version manually is down with the Capture Version button located in the Document Set Tab in the ribbon. This is not the a secure way to make sure all versions are captured. With a SharePoint 2010 workflow (not workflow 2013) you can capture all the versions automatically. The solution has been tested on SharePoint 2013 On Premise and SharePoint Online (Office 365).

Solution

There is a small bug with the action Capture a version of the Document Set, the action runs multiple time (equal to the number of columns) and captures multiple versions. To prevent this from happening add a wait action to the workflow, this will make sure that only one version will be captured.

Create a SharePoint 2010 workflow
Configure the workflow to Start Workflow automatically when an item is Changed
Add the action Wait for Field Change in Current Item
Set the action to: Wait for Modified by (column) to equal Current Item: Modified By (column)
Add the action Capture a version of the Document Set, with comment: Version Captured by Workflow.
The full workflow looks like this

SharePoint: Get the Role ID

January 23, 2017 Ben Prins Office 365

SharePoint uses role ID’s to create the permissions levels for SharePoint Groups. These role ID’s are a set of numbers that define the precise permissions level details.
The most used role ID are for Visitors (Read), Members (Contribute) and Owners (Full control). When you need other permission levels, creating the correct numbers can be difficult. With the help of the following steps it will be easy to create/find the role ID’s you need. This solution works for SharePoint Online and SharePoint 2013. The role ID’s are used when setting permissions using a rest call, see the blog post SharePoint 2013 Workflow: Changing Permissions with REST Calls for the details.

Permissions level	Role ID
Full Control	1073741829
Contribute	1073741827
Read	1073741826

Solution

Open the SharePoint 2013 or Online site.
Create the required Permission level on the Site Collection
Go Site Settings – Site Permissions
Open the Permission Levels
Create a custom permission level, in this example I created a permission level called Custom Contribute.
Now we need to find the corresponding role ID

Create the following URL for your farm / site

https://contoso.sharepoint.com/sites/dev/_api/web/roledefinitions

This will open a page which looks like an RSS feed.
Right click on the page to View Source, this will open the Source in Notepad.
Now copy the code into your favorite XML editor.
Search the XLM for the correct entry
The Role ID is located in the link tag. The Role ID for my custom permission level is 1073741927
The Role ID can now be used in web services, see the blog post SharePoint 2013 Workflow: Changing Permissions with REST Calls for the details.

Name	Column Type	Input field type
Multiple Lines	Multiple lines of text	Textarea
Title	Single line of text	Input
Date	Date and time	Input
Choice	Choice	Select