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.

1. 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.
2. I’ll collect current logged in user information (Image, Role) and show on header just as we see on Office 365.

Figure 1: SharePoint Online – Menu on custom master page

Prerequisites:

1. Custom master page imported and set as default. Described in part 1.
2. Download / provide references to (CDN) Office UI fabric JavaScript, Office UI fabric Core. This supports responsive layout, Icon font, and have some predesigned component. This will help to maintain consistent UI on Office 365.
3. Custom CSS, JavaScript files on custom master page asset folder.

Let’s go to the steps.

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.

1. 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.
2. 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.

   var getSetUserInfoAndMenu = function(){
   var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
   $.ajax({
   url: siteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=DisplayName,Email,Title,PictureUrl,PersonalUrl,PersonalSiteHostUrl",
   method: "GET",
   async:false,
   headers: { "Accept": "application/json; odata=verbose" },
   success: function (data) {
   // Response
   var result = data.d; 
   
   // Profile name of the user
   $(".profileName").text(result.DisplayName);
   
   // Email
   $("#email").text(result.Email);
   
   // Degignation / Service title
   $("#serviceTitle").text(result.Title);
   
   // User initials
   var initialsUser = result.DisplayName != null || result.DisplayName != ""? (result.DisplayName.split(" ")[0]).charAt(0)+""+(result.DisplayName.split(" ")[1]).charAt(0) : "N/A"; 
   $(".initials").text(initialsUser);
   
   // Link for profile page 
   var myUrl = result.PersonalSiteHostUrl+"person.aspx";
   $("#MyProfile").attr("href",myUrl);
   
   // Link for onedrive page
   $("#MyOneDrive").attr("href",result.PersonalUrl);
   
   
   // Master page Main menu
   $.ajax({
   url: siteUrl + "/_api/web/lists/getbytitle('Site%20Menu')/Items?$select=Title,link_x0020_address,Icon_x0020_Class&$top=100",
   method: "GET",
   async:false,
   headers: { "Accept": "application/json; odata=verbose" },
   success: function (sitemenuresp) {
   // Response
   var mainmenus = sitemenuresp.d.results;
   
   var links = "";
   $.each(mainmenus,function(index,value){
   links+='<li>'+
   '<a href="'+value.link_x0020_address.Url+'">'+
   '<i class="'+value.Icon_x0020_Class+'" aria-hidden="true"></i>'+
   '<span class="mnTitle">'+value.Title+'</span>'+
   '<span class="mnDesc">'+value.link_x0020_address.Description+'...</span>'+
   '</a>'+
   '</li>';
   }); 
   
   $(".mainmenucontrol").html(links);
   
   },
   error: function(error) {
   console.log("=> Error log at Master page Main menu ajax call!!!");
   console.log(error);
   }
   });
   // main menu link ends
   
   
   
   },
   error: function(error) {
   console.log("=> Error log at getSetUserInfoAndMenu() ajax call!!!");
   console.log(error);
   }
   });
   };

   This function will retrieve the required user information from

   SP.UserProfiles.PeopleManager. The links for the menu is collected from /_api/web/lists/getbytitle('Site%20Menu')

   .

3. Now, the function is called on document ready.

   /*
   ** JQuery document ready function starts from here.
   ** some required functions are initialized from here.
   */
   $(document).ready(function(){
   UserPannel(); 
   getSetUserInfoAndMenu(); 
   }); // document ready ENDS!

Note:

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.

Result:

The menu links are collected from the list and rendered on main menu.

Figure4: SharePoint Online – SharePoint List – site menu links

The current logged user and the necessary user links.

Figure 5: SharePoint Online – User information

Figure 6: SharePoint Online –  Essential User links

Thanks for reading

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles