SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 2

December 3, 2018December 12, 2018

Hi Techies,

This is the second blog in the series. In my last blog, I described how to customize/branding of SharePoint online site. Visit my last blog (SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 1), for more details.

So far, we have customized the master page at HTML level only. In this blog I’m going to demonstrate, how we can use our custom JavaScript, CSS to make it more interactive and can write our own JavaScript code at master page level.

I’m going to maintain all the links to pages in a list. Then retrieve these links from list using Rest API call and render on menu bar.

I’ll collect current logged in user information (Image, Role) and show on header just as we see on Office 365.

Configure menu list.

I have created a custom list named as “Site Menu”. There are 4 columns on the list. Please check my next blog for the simplest way to create a Power Apps to interact with list which will be accessible on mobile.

Figure 2: SharePoint Online – SharePoint List – site menu list

I’ve added links to the list for the demo.

Figure 3: SharePoint Online – SharePoint List – site menu links

Retrieve list data and Render information.

While designing custom master page I already had markups ready. For the menu the <ul></ul> tag is used with class name “mainmenucontrol”. Similarly, I had some span tag where the user infromation such as name, email, etc. can be shown.

Open the JavaScript file that we had uploaded while creating the custom master page using design manager. In my case the file name is “app.js” and it can be accessed from SPD 2013, by navigating toAll / _catalogs / masterpage / BrandingAssets /

“BrandingAssets” is my custom master page assets folder where I kept all the required JS and CSS files.

On app.js page I’ve made two REST calls using simple jQuery ajax. First call is made for user profile information. The second REST call is made for collecting the link information from “Site Menu” list.

While editing the master page (.html) file, CSS, JS make sure to check-out before editing and after saving your work, make sure to check-in these file. This will helps to make latest updated files available to the user instead of cached ones.