Saturday, 26 December 2015

Customising the Service Manager HTML5 Portal

Microsoft have released a new HTML5 Portal, released as Update Rollup 8 for Service Manager, and we again 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 to do after installation (branding the portal for your organisation) and a slightly more deeper customisation (adding a new item to the side bar).

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:\inetpub\wwwroot\SelfServicePortal).

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 more deeper customisation is modification of the side bar. For example there may be a requirement to add your own link to perhaps 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:\inetpub\wwwroot\SelfServicePortal\Views\Shared\Sidebar.cshtml)

The first DIV section controls the collapsed state of the sidebar (Usually line 13)
   <div class="side_nav_bar col side_menu">

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

       <div class="row side_nav_sccm" accesskey="S" tabindex="9" data-toggle="tooltip" title="Software Catalog">
           <span class="icon-Dictionary icon icon-pos icon-medium"></span>
       </div>


  • 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 icon 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 .\Content\CSS folder from usually about line 2024. These are basically friendly name mappings for the character codes used within the fonts found in the .\Content\CSS\fonts 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 like and then 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


** Updated 12/04/2016**
The link I had previously to the font for use in CharMap is now dead :(

However, thanks to Donato Pasqualicchio @ MSFT, here is a link to this useful cheat sheet for the font: http://modernicons.io/segoe-mdl2/cheatsheet/

Back in the Sidebar.cshtml file that we're customising... 

The second DIV section controls the expanded state of the sidebar
   <div class="side_nav_bar_expand col side_menu">

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

<div class="row side_nav_sccm">
    <span class="icon-Dictionary icon-medium icon icon-pos"></span>
    <span class="icon-text icon-text-pos"><a href="http://ponconfigmgr01/cmapplicationcatalog/#/SoftwareCatalog" target="_blank">Software Catalog</a></span>
</div>



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 I insert a URL 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.

13 comments:

Will Prather said...

I thought it was mentioned that with this portal, we'd be able to make done Ajax calls. I'm hoping this means inside the request forms. I'd love to see something like that. For example a billing code field that uses an Ajax call to validate the code against a separate database.

Will Prather said...
This comment has been removed by the author.
Unknown said...

HTML 5 SSP is deployed fine with basic configuration like Logo, Title, help desk info however i can only publish one Request Offering under on Service Offering.

for example:

Incident : Outlook issues
Network issue (not coming)

At a time only one Request offering showing even i added both on the same incident request offerings.

not sure what i am missing :)

Steve Beaumont said...

@Will - Not sure on that one, I'll ask around but I agree, that would be a cool scenario.

@Unknown - Not sure what's causing that. I've been able to add multiple Request Offerings to a Service Offering without any problems and they show up fine.

Also, if you're just using the service catalog to make lots of individual forms to log similar incidents you might want to re-think your strategy.

The Service Catalog is supposed to be a place where you offer up distinct services that IT offer, with relevant questions to ask to capture enough information to complete the request, either manually or automated.

If you're looking to simply capture "Something doesn't work" just use a generic form (either the built in one or replace it with a custom one) and use categories and business services to categorise/organise/route the incident to the correct team.

Regards,
Steve

Saleh said...

We have our Service Offerings grouped in 5 different Categories. Using the Silverlight interface, we had an option to view the Service Offerings using the Category View, which grouped them by Category. Unfortunately, the HTML5 interface does not seem to have any options to view the Service Offerings grouped in any way. They are only displayed in one long list.

It would be extremely helpful in our environment if we could customize the HTML5 Portal to group the Service Offerings by the Categories.

Any suggestion would be much appreciated.

Shawn Miller said...

Any idea how to change the filter on the "My Requests" portal page? If we use the "Request User Input" sidebar in the service manager console the incident status is changed to "Active\Pending". For some reason the Portal shows incidents in this status under "Closed", so user can't add the requested input.

tek said...

Shawn , https://social.technet.microsoft.com/Forums/systemcenter/en-US/0dc3f2c5-75f5-499c-b126-a7fe37e3e451/new-html5-portal-and-custom-incident-statuses?forum=portals#2067f064-6982-43ad-b128-e57086aa7c40

Anonymous said...

Any suggestions on where to look if the icons are not displaying properly? I am either getting some weird Chinese looking icon, or none at all in IE, and in Firefox I am getting the character codes, and in Chrome, getting that same weird Chinese icon and the rest are just boxes.

If I change the icon code, or the icon code all together, I get no icon at all.

Vikas Gawde said...

Hi Steve,

With Microsoft not offering web portal for analyst use along with service manager, will it be possible to modify this self service portal for analyst use. So the interface will remain the same, but when analyst uses this portal, in requests he will be able to view & work on requests assigned to him & so on. Please let us know if it is possible.It will be great for all the analysts.

Thanks & Regards,
Vikas

Thomas bianco said...

FYI: the Font file you link is missing, but it seems to line up with the "Segoe MDL2 Assets" fond that is already installed in windows 10. i was able to use this font in charmap as you describe to locate icons and add them to Main.CSS

Steve Beaumont said...

@Vikas I doubt at this time, well without a LOT of effort, you would be able to customise it enough for analyst use.

@Thomas, the original link to the font is now dead. However, I've updated the article to point to this useful cheat sheet: http://modernicons.io/segoe-mdl2/cheatsheet/

Derrick V. Mays said...

Post is out of date already. I recently was looking for some source I use that would also set up. And in this I was helped by this website https://jitbit.com/ . There I noticed that the workers once will not leave things half way and will bring it to the end. They all help to set up and will give advice on how to keep everything in good condition. But if you have any problem, you can contact them and they will help.

Baby Music said...

Chữa trào ngược dạ dày: http://traonguocdadaythucquan.net/p/6-cach-chua-benh-trao-nguoc-da-day-thuc-quan-2016.html
Bệnh trào ngược dạ dày: http://www.tybachthao.com/p/thuoc-chua-tri-benh-trao-nguoc-da-day-thuc-quan-tot-nhat.html
Dịch vụ lắp đặt barrier tự động chuyên nghiệp với giá cực sốc trong mùa hè năm nay. Chúng tôi chuyên cung cấp các loại cửa cửa tự động nhật bản tốt nhất trên thị trường hiện nay