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

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.
Menu on custom master page
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.

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

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

SharePoint List - site menu links
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.

    This function will retrieve the required user information from

    .

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

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.

SharePoint List - site menu links
Figure4: SharePoint Online – SharePoint List – site menu links

The current logged user and the necessary user links.

User information
Figure 5: SharePoint Online – User information
Essential User links
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

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.