Part 1: Customize SharePoint Online User Interface using JavaScript | CSOM | PowerShell

 

Woman’s hand drawing a light globe with a felt pen

 

During my web-ex session “Manage SharePoint Online Using CSOM” I showed few of the custom functions wrapped up as script module. I will be posting the recording session by next week and module will be shared in Git! In the session content management team was actively posting questions and this blog series shares all the questions and solutions we discussed.

Question: Can we Inline Java Script and modify the ribbons, menu items etc in SharePoint Online? If yes can you show step by step procedure?

Answer: Start from here!

Step 1: Create a folder and save all the required files and test the simple java script code to show Hello, World!

console.log('Message appears here!')

1

Step 2: Now, we need to know the existing custom actions attached in the list, the below code does it for you!

Import-Module .\Microsoft.SharePoint.Client.dll
$Admin = "Admin@domain.onmicrosoft.com"
# Using Clear Text Password is not adviced in the script (Use Get-Credential)
$Password = "P@ssw0rd!" | ConvertTo-SecureString -AsPlainText -Force
$Credential = [pscredential]::new($Admin,$Password)
$Context = [Microsoft.SharePoint.Client.ClientContext]::new('https://contoso.sharepoint.com/sites/csom')
$Context.Credentials = [Microsoft.SharePoint.Client.SharePointOnlineCredentials]::new($Credential.UserName,$Credential.Password)

$UserCustomActionCollection = $Context.Web.Lists.GetByTitle('Custom').UserCustomActions
$Context.Load($UserCustomActionCollection )
$Context.ExecuteQuery()
foreach($UserCustomAction in $UserCustomActionCollection)
{
    $UserCustomActionCollection
}

For now, we haven’t attached any custom user actions so the script returns nothing for the list custom (In your case if you have any user custom actions attached you get to see whole bunch of information)!

Step 3: Now, we will add a simple menu in the SharePoint List item menu (The code is in MSDN link and we will use the same but in PowerShell). Take a look at the screen shot which is default out of the box options.

3

Let us add a menu name as Bing to open the bing search engine !  below is the code which does it easily

Import-Module .\Microsoft.SharePoint.Client.dll
$Admin = "Admin@domain.onmicrosoft.com"
# Using Clear Text Password is not adviced in the script (Use Get-Credential)
$Password = "P@ssw0rd" | ConvertTo-SecureString -AsPlainText -Force
$Credential = [pscredential]::new($Admin,$Password)
$Context = [Microsoft.SharePoint.Client.ClientContext]::new('https://contoso.sharepoint.com/sites/csom')
$Context.Credentials = [Microsoft.SharePoint.Client.SharePointOnlineCredentials]::new($Credential.UserName,$Credential.Password)

$UserCustomActionCollection = $Context.Web.Lists.GetByTitle('Custom').UserCustomActions
$Context.Load($UserCustomActionCollection )
$Context.ExecuteQuery()

$NewAction = $UserCustomActionCollection.Add()
$NewAction.Location = 'EditControlBlock'
$NewAction.Title = "Bing It!"
$NewAction.Description = "Search in Bing!"
$NewAction.Url = "http://www.bing.com"
$NewAction.Update()
$Context.ExecuteQuery()

It works! Here is the output 🙂

4

Step 4: If we rerun the Get Custom Actions script we get to see information about the custom actions we added. The below image illustrate it

5

If you re run the script List Drop Down Menu it gets duplicated! So, don’t do that if accidentally did that like me not an issue quickly clean the dirt by running the below piece of code

foreach($UserCustomAction in $UserCustomActionCollection)
{
    $UserCustomAction.DeleteObject()
    $Context.ExecuteQuery()
}

Clear! Now, it’s time to use java script 🙂 since I have very basic knowledge in java I showed the example using the MSDN code sample 🙂 Yes Copy + Paste !

In this example we will add a custom ribbon user interface in list display form  – All I did is removing the unnecessary nodes from the XML and below is my example

$here = @"
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.ListForm.Display.Manage.Controls._children"> 
<Button Id="{B511A716-54FF-4EAE-9CBE-EA02B51B626E}" 
Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" 
Image32by32="~site/_layouts/Images/BingSearch/bing32.png" 
Image16by16="~site/_layouts/Images/BingSearch/bing16.png" 
Sequence="0" 
LabelText="Hello, World" 
Description="SharePoint Demo" 
TemplateAlias="o1" /> 
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" CommandAction="javascript:alert('Hello, World!')" />
</CommandUIHandlers>
</CommandUIExtension>
"@

I don’t have the BingSearch and bing image in my layouts so image breaks but code works as expected

6

 

Sample code is below, you need to change the URL, credentials and list name as applicable! Exception handling is not in place because this is built during the demo

Import-Module .\Microsoft.SharePoint.Client.dll
$Admin = "admin@contoso.onmicrosoft.com"
# Using Clear Text Password is not adviced in the script (Use Get-Credential)
$Password = "P@ssw0rd!" | ConvertTo-SecureString -AsPlainText -Force
$Credential = [pscredential]::new($Admin,$Password)
$Context = [Microsoft.SharePoint.Client.ClientContext]::new('https://contoso.sharepoint.com/sites/csom')
$Context.Credentials = [Microsoft.SharePoint.Client.SharePointOnlineCredentials]::new($Credential.UserName,$Credential.Password)
$UserCustomActionCollection = $Context.Web.Lists.GetByTitle('Custom').UserCustomActions
$Context.Load($UserCustomActionCollection )
$Context.ExecuteQuery()
$here = @"
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.ListForm.Display.Manage.Controls._children"> 
<Button Id="{B511A716-54FF-4EAE-9CBE-EA02B51B626E}" 
Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" 
Image32by32="~site/_layouts/Images/BingSearch/bing32.png" 
Image16by16="~site/_layouts/Images/BingSearch/bing16.png" 
Sequence="0" 
LabelText="Hello, World" 
Description="SharePoint Demo" 
TemplateAlias="o1" /> 
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" CommandAction="javascript:alert('Hello, World!')" />
</CommandUIHandlers>
</CommandUIExtension>
"@
$NewAction = $UserCustomActionCollection.Add()
$NewAction.Location = 'CommandUI.Ribbon.DisplayForm'
$NewAction.CommandUIExtension = $here
$NewAction.Update()
$Context.ExecuteQuery()

Go through the MSDN reference links for more information! In next part I will show bit more automation of UI settings using PowerShell. Cheers 🙂 Enjoy PowerShell 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *