Windows PowerShell

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!


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

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.


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

It works! Here is the output 🙂


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


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

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

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



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

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 *