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.

20 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

John Smith said...

If you are living in UK and facing any issue commercially then as per my recommendation you should go for the dispute resolution solicitors. Because they give you a right advice for your future. They already faced many issues like you have so that when they will provide the ideas is best and definitely help you a lot.

Albus Snape said...

If you are searching for the best virtual reality app development company then I recommend you the India's best virtual reality app development company : Appknock. This company has a team of best developers who provide the best virtual reality app development services for your business. Here you'll get the best and affordable services with best quality and client support.

Trykartehai said...

Thank you for publishing the great information. Apart from this, If you're looking for adult products in India then trykartehai.com is the perfect place for you. You can shop for the best sex toys for men, including strokers, male vibrators, anal toys, cock rings, penis pumps, & prostate toys. Toys available for all budgets and desires, discover them now

Internet Marketing Tips Blog said...

Here again, are the key tips on how to Improve search visibility: Start every blog post with keyword research. Target long tail keywords. Write articles with high topical authority. Make your content easier to read. Get high authority backlinks. Make your website faster. Understand searcher intent. For more info please visit
http://rossnelson.freeblog.biz/2019/05/31/how-to-kick-start-your-b2b-content-marketing-strategy-that-works/
http://site-1895288-3599-5002.strikingly.com/blog/what-is-an-seo-company-and-how-does-it-work
https://rossnelson.doodlekit.com/blog/entry/5101932/how-to-measure-the-success-of-your-digital-marketing-campaign

Changement d'adresse said...

Merci de partager ces informations précieuses. Si vous souhaitez savoir comment faire une demande de changement d'adresse carte grise en ligne si vous avez déménagé en France.S'il vous plaît aussi visiter: https://telegra.ph/Pourquoi-est-il-important-de-changer-ladresse-du-permis-de-conduire-lorsquon-change-de-poste-11-28

vignette crit'air said...

Merci pour ces informations précieuses. De nos jours, il est obligatoire d'avoir un certificat de qualité de l'air du véhicule si vous conduisez en France. Cette de qualité d’air vignette crit'air paris certificat est un document sécurisé qui classe les véhicules en fonction de leurs émissions de polluants.pour plus d'informations.

solicitud esta said...

Solicite la Visa Waiver ESTA a más tardar 72 horas antes de partir a los Estados Unidos. Las aprobaciones en tiempo real ya no estarán disponibles y llegar al aeropuerto sin una Visa ESTA aprobado previamente resultará en una denegación de embarque.