Customising the Service Manager HTML5 Portal

August 1, 2016

Customising the Service Manager HTML5 Portal

Microsoft have released a new HTML5 Portal, released as Update Rollup 8 for Service Manager, and we have a few different areas in which to do customisations.

In this post I will outline both the most common, basic customisation you will want after installation (branding the portal for your organisation) and a slightly deeper customisation (adding a new item to the side bar).

Written by

01 Apr 2018

Basic Customisation:

After a default installation, one of the first things you’re likely going to want to change is the basic info.

This consists of:

Site Tile (Default Contoso Service Desk)
Support Contact Information (Defaults to Contoso Support with a 12345 number).

This is done via the web.config file found in the root of the installation folder (by default C:inetpubwwwrootSelfServicePortal).

Lines 18 – 37 are the ones to focus on (for now) and allow you to change the defaults to something more suitable for your environment.

Lines 20 – 23 alter the site title and basic contact information.
Line 25 usually gets set to French, so amend to reflect your preferred default language.
Line 27 should be changed if you have a custom template that needs using for logging a basic incident request.
Line 29 should have been set correctly during installation and will reflect the SCSM Management server to use for all SDK calls.
Line 30 controls how much data is pulled back from a query in a request offering
Lines 32 & 33 control the timeouts on the caching of information used by the portal (only play with when testing or have a specific need, these defaults should suffice for most)
Line 35 will control the upload of telemetry data to Microsoft.
N.B. Please don’t immediately go and turn this off as a knee jerk reaction to “Microsoft are invading my privacy!!”. The more telemetry Microsoft can get around usage of the portal, the better they can make it!

Deeper Customisation:

One example of a deeper customisation is modification of the side bar, there may be a requirement to add your own link, perhaps to an external site.

In the following example, I’ll add a link to the Configuration Manager Software Catalog.

Open the Sidebar.cshtml file in either notepad, or some other editor (Default location is C:inetpubwwwrootSelfServicePortalViewsSharedSidebar.cshtml)

The first DIV section controls the collapsed state of the sidebar (Usually line 13)

Within this section, adding the following code will add a new item:

Class=”row side_nav_sccm” is used to name this section artefact
accesskey=”” part to bind the icon to the S Key
tabindex=”” assigns the order of which pressing the tab key cycles through the items.
title=”” is the text shown as a tooltip when hovering over icon

The span class code is used to choose the icon displayed, in this example I’ve specified the Dictionary icon using icon-Dictionary which is the same used for accessing the Service Catalog at the top of the sidebar.

The list of icons already defined for use in the portal can be found in the main.css file in the .ContentCSS folder usually from line 2024. These are basically friendly name mappings for the character codes used within the fonts found in the .ContentCSSfonts folder.

You can either reference one of these friendly names, like I have in this example using icon-Dictionary, or dig deeper into the font file, find the icon you want and create your own friendly name for reference.

TIP: If you can’t convert the woff file to a ttf to be able to view it in Character Map, then you might want to check the OneDrive API GitHub site which hosts a copy.

https://github.com/OneDrive/onedrive-api-docs/tree/master/html-template/css

Back in the Sidebar.cshtml file that we’re customising…

The second DIV section controls the expanded state of the sidebar

Within this section, add the following code to control how the button looks on the expanded state, along with the URL to use when clicked.

Software Catalog

Class=”row side_nav_sccm” is used to name this section artefact

The first bit of span class code is used to choose the icon displayed, so I’ve kept it the same as the icon in the minimised state (icon-Dictonary).

The second bit of span class code is used to define the text to show alongside the icon.

It’s also here that a URL is inserted so that becomes the icon text and will open a new tab to the URL when clicked.

Save the sidebar.cshtml file, refresh the page and the new icon should be there and working!

I’m working on some further customisation posts, but feel free to post a comment if there is any specific customisation scenario you would like me to cover.

Keep Up To Date – Join The Mailing List

The team are here to help

If there are any questions and want to learn more about PowerON’s services or Solutions, please get in touch and a member of the team will be in touch shortly.