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.

55 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.

Unknown 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.

Unknown 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/

Unknown 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.

Unknown 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

Anonymous 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.

YTBPALS said...

When the live video will be uploaded to your channel all the users of your FREE Youtube subscribers can watch the video and thereby you can have thousands of views for your live video. Increasing view means you are reaching more people and more people are getting information about your products and services hence your brand value will increase.

Riglook said...

Thanks for the great information. I'm sure it would help many individuals like me. Apart from this, if you want to buy wooden rings then please do visit our official website.

solicitud esta said...
This comment has been removed by the author.
solicitud esta said...

Gracias por la información. Las solicitud esta de autorización oficial de ESTA son simples y rápidas. Su formulario ESTA para viajar a los Estados Unidos está disponible. Vaya a los EE. UU. Con su VISA ESTA en mano.

Trykartehai said...

Thank you for the valuable information. It means a alot to me.

Apart from this, The sexual wellness industry is flourishing in India with the adultproductindia. So, If you're looking for adult products India like dildos in India? Don't fret. You can now buy it online from trykartehai.com as they are best in the business. You can visit here for more information:

http://cryptoliveleak.org/sex-toy-facts-that-are-hardly-talked-about/

https://dailygram.com/index.php/blog/590389/best-sex-toys-you-can-use-to-make-her-cum-enjoy-the-best-orgasm/

http://www.leapzipblog.com/blog/read/410944/fleshlight-vs-sex-dolls%3A-which-one-is-a-better-option-for-men/

James Smith said...

Do you know that the top 5 positions of google get more than 70% of the traffic visits over the first page? Yes, it is true. That is the only reason that every business wants to achieve a particular position for themselves. So why are you waiting for? Go for the SEO India - SEO Experts Company India and make your dream come true. This is the only company that will help you to take your business to the height by achieving your business the top rankings over Google.

Unknown said...

Om vi pratar om det söta leendet är det första som kommer in i vårt sinne våra tänder. Och vid ålderdomen ökas kravet på implantat tänder på grund av problem uppstår i våra tänder och det faller ner. Så hantera med detta kan du gå till tandläkaren. Där får du den bästa tandimplantationen och får de bästa tjänsterna för det.

gastriball said...

Få den bedste og effektive Medsil ballonbehandling fra den bedste behandling, dvs. Gastri Ball. Behandlingen fra Gastri Ball er fuldt organisk og sikker. Så du behøver ikke at frygte for det.

Anonymous said...

Our commercial litigation solicitors will use their expertise to develop effective strategies with a view to reaching commercial benefits to our clients.

Anonymous said...

Our best quality vaporblock plus 20 is more than 100 times less permeable than typical high-performance polyethylene vapor retarders against Methane, Radon and other harmful VOCs.

etaofficial said...

Votre autorisation ESTA USA de voyage est valable pendant deux ans à compter de la date d’autorisation ou jusqu’à l’expiration de votre passeport. Pour vérifier la date d’expiration de votre autorisation de voyage, vous pouvez la trouvée sur l’écran indiquant Autorisation approuvée.

Sera Corner said...

Logo is the primary identifier of our company and kaizen brand evolution is the best logo design company. Our logo design experts will design the logo which clearly shows the purpose and position of your company.

Jessica Brian said...

Rogers EV provides you different golf cart parts Greenville sc at a reasonable price and if you found any problem then we will pick and fix it.

Jinni said...

There are many options to cure your stress pain and anxiety but everyone wants effective solution and it can only get with the help of effective cbd oil for anxiety. You can easily cure your anxiety with the help of pure and effective cbd oil.

Jessica Brian said...

Rogers EV gives the best service in Greenville sc golf carts. We also free test driving and we give the best deals in the golf cart.

Anonymous said...

At Ai Law, you consult top rated dispute resolution solicitors for your problem because we believe in settle dispute and achieve resolution as soon as possible so that your time did not get wasted and you can move forward towards your business. As we know that it is very important to save your business.

Jessica Brian said...

If you are in Greenville and searching for the best golf cart then you do not need to go anywhere because of et Rogers Ev you the best golf carts sales for both residential and commercial models. We are in this business for the last 42 years and we provide you the best golf cart with affordable price, which is valuable, and their color size will easily fit in your lifestyle.

Alex Green said...

At Spartan felt all lens polishing pads are the best because at spartan felt the polishing pads are durable stock removal pads and one of them is Spartan warrior pads which can be used for most of the polishing application as we can adjust them as per the requirement.
We used them on medium flame also because these are fragile items.

Prestige Experiences said...

Prestige Experiences is the best sports travel agencies to book your tickets for the football match and we offer many special things like having lunch with your favorite player or join them in the training session.

Admin said...

Hello, I’m Neda. I’m a web developer living in Pakistan. I am a fan of photography, design, and fitness. I’m also interested in web development and arts. Enjoy This Attitude Poetry

SEO Firms India said...

The Incredible blog with mind blowling thought.

Top SEO Companies in India
Best SEO Companies in India
Top SEO Company in India

Contractors Serviced Apartments said...

nopAccelerate is the best company to hire if you are looking for nopcommerce theme development company, they are providing the best nopCommerce development services

Accounting Firm Singapore said...

3E Accounting being the leading service provider, would assign a team of qualified professionals including ISCA registered Chartered Accountants visit 3ecpa.com.sg for the Singapore incorporation

Anonymous said...

let us discuss for your e-commerce project requirements we are leading the e-commerce development company in the USA at a responsible price at arhamtechnosoft.com

Balochi Status Downloader said...

This is really amazing and helpful Thanks for sharing your best opinions
Please visit for Ahmad faraz shayari

augustwalker said...

Interface with the hp deskjet 3050 connect to wifi You need to associate your HP Deskjet 3050 printer to your system with the assistance of the Wireless Setup Wizard. When you interface the printer HP installer will discover your printer during the establishment system.

Anonymous said...

Hello guys!!! what's about your think for your web hosting and web development. I want to say that if your site is having a problem with HTML so get a great solution here.
Dubai VPS Server

Anonymous said...

With regards to purchasing CBD oil items, you clearly have many alternatives to browse. Nonetheless, it is basic to pick the correct brand with the goal that you get the best quality for what you have paid. CBD Labs

Sex Toy said...

Nice blog… Great information but if someone looking to buy sex toys in India online. So which one website is best in providing quality products with the cheapest in price and giving discreet delivery. Please suggest to me, I’m looking to buy.

Nick001 said...

Hi guys! My name is Nick and our world is such a beautiful place. I'm so happy that more people can also find out about it. In general, I would like more and more people to start traveling to different places, because it is so interesting! I would like to advise you guys help me philosophy who will help you save your time and spend it on travel. Have a nice day!

John said...

Hi guys! My name is Nick and our world is such a beautiful place. I'm so happy that more people can also find out about it. In general, I would like more and more people to start traveling to different places, because it is so interesting! I would like to advise you guys help me philosophy who will help you save your time and spend it on travel. Have a nice day! دانلود آهنگ جدید

Elinathomas said...

It offers excellent security with many benefits. If you are planning to create a Gmail account, don't hesitate to create it and easy to use. Some of Google's Gmail is listed below in this article. Here you will find all the details to set up your Gmail account and fix your Gmail account related problem at once. Gmail Nummer

Elinathomas said...

First, check your device's software; it is conceivable that it is outdated which could lead to streaming problems. Swipe down from the top of the screen and select More or Settings to check the software. Then select Device Options and System Updates from the drop-down menu. If an update is available, select it. If the update (if there was one) didn't fix your problem, you have one option left: clear data.Kindle Contact Nederland

Elinathomas said...

This guide doesn't cover what to do with your group once it's created, such as how to get more likes on Facebook posts in your group, or how to improve community participation.
Bellen Facebook Nederland

jack smith said...

Useful information ..I am very happy to read this article. thanks for giving us this useful information. Fantastic walk-through. I appreciate this post.
Grammarly Review