HTML 5 SSP – Buchatech.com

Microsoft has released a great blog post about customizations that can be done to the Service Manager HTML 5 self-service portal. This article covers the following areas:

Title
Logo
Colors and Tiles
Icons
New sidebar link

In the article they talk about what is supported and what is not for customizations. They key is that if you make unsupported customizations be sure to back up your customizations. This is because they might be overwritten when an update rollup is applied and Microsoft will not guarantee those customizations will stay intact. This is no big deal if you back your customizations up as you could simply reapply them after an update rollup.

Here is the link to Microsoft’s blog post on this:

https://blogs.technet.microsoft.com/servicemanager/2016/03/15/basic-ui-customization-in-new-self-service-portal-html5/

Now I am writing this blog post for few reasons. #1 There are other customizations that have been blogged about by the community that are not included in Microsoft’s article. #2 I want a central location to document all of the customization articles out there. #3 I am using this as a way to document some of the customizations that I have made for later reference. Here is the list:

Customising the Service Manager HTML5 Portal

This a blog post on general customizations of the HTMK5 portal.

By System Center MVP Steve Beaumont: http://www.systemcenter.ninja/2015/12/customising-service-manager-html5-portal.html

HTML5 Portal: Search Query!

This covers changing the Refresh box to Search and adding text to the search input box.

By Ryan Ephgrave:

http://www.ephingadmin.com/service-manager-html5-portal-search-query/

HTML5 Portal: Larger Description Text Box

This covers making the text box on forms larger. I know this is a common ask. This is a great blog post to bookmark.

By Ryan Ephgrave:

http://www.ephingadmin.com/service-manager-html5-portal-larger-description-text-box/

Display “Must Vote” by the side of the user name on Change Request Activity in the portal

”

This can be done by doing following changes in Views\MyActvities\ActtvitiyDetails.cshtml (addition & removal) –

<div class=”name col span_6″ style=”padding:1px;”>@Resources.SelfServicePortalResources.Name</div>

<div class=”name col span_6″ style=”padding:1px;”>Must Vote</div>

<div class=”status col span_6″>@Resources.SelfServicePortalResources.Status</div>

<div class=”comment col span_7″>@Resources.SelfServicePortalResources.Comment</div>

<div class=”voted col span_6 grey-text”>@Resources.SelfServicePortalResources.VotedBy</div>

————————–

<div class=”name col span_6″ style=”padding:1px;”>@reviewerItem.Item1</div>

<div class=”name col span_6″ style=”padding:1px;”>@reviewerDetails[“MustVote”]</div>

<div class=”status col span_6″>@decision</div>

<div class=”comment col span_7″ style=”padding:1px;”>@reviewerDetails[“Comments”]</div>

@if (!reviewerItem.Item2.IsEmpty())

{

<div class=”voted col span_6 grey-text”>@reviewerItem.Item2</div>

}

”

https://social.technet.microsoft.com/Forums/systemcenter/en-US/8c3af275-820d-4663-8165-46364d6e0040/new-html-5-portal-change-control-user-to-approve-info?forum=portals&tduid=(bbc82b3a96d3ba9c69f8efad24f74430)(256380)(2459594)(TnL5HPStwNw-5ocTrJtqN7jv7JWlYxWHgQ)()

NOTE: When looking for the code to change search for:

@foreach (var item in formData)

Customizations By System Center MVP Steve Buchanan:

GENERAL

In the Web.config file change

<!– Customizable fields starts here –>

FOR TITLE CHANGE:<add key=”CompanyName” value=”Buchatech Self-Service Portal”/>

FOR PORTAL LOGO (COMPANY LOGO) CHANGE: <add key=”CompanyLogoLocation” value=”../Content/images/System Center_Cloud_Logo_Transparent.png”/>

FOR NUMBER CHANGE:<add key=”ITPhone” value=”562-309-4042″/>

FOR EMAIL CHANGE:<add key=”ITEmail” value=”support@buchatech.com”/>

You will notice on my side menu I do not have email address and instead of an IT phone number I have “Service Desk Contact Info:” and my Powered By logo and text are custom.

To change these go to:

C:\inetpub\wwwroot\SelfServicePortal\Views\Shared

And modify the Sidebar.cshtml file.

Find “<div class=”side_nav_bottom”>” and modify:

<div>@Resources.SelfServicePortalResources.PoweredBy :</div>

I COMMENTED OUT THE DEFAULT TEXT HERE: <!–<div>@Resources.SelfServicePortalResources.CantFindSolution</div>–>

<!–<div>@Resources.SelfServicePortalResources.ContactUs</div>–>

I ADDED MY OWN TEXT HERE: <div>Service Desk Contact Info:</div>

</div>

<span class=”icon-text icon-text-pos”>@System.Web.Configuration.WebConfigurationManager.AppSettings[“ITPhone”]</span>

</div>

<span class=”icon-text icon-text-pos”>@System.Web.Configuration.WebConfigurationManager.AppSettings[“ITEmail”]</span>

</div>

NOTE: Company logo image works best as 32×32.

NOTE: Powered by logo image works best as 36×26.

All images should be stored in: C:\inetpub\wwwroot\SelfServicePortal\Content\images

ICONS

In C:\inetpub\wwwroot\SelfServicePortal\Content\CSS you have to edit the main.css file.

In this file find the [class^=”icon-“].icon-medium{ section.

Here you will see all the font icons. You can add the font icons you want to be available for use in the portals CSS. In the following screenshot I have highlighted the fonts I have added.

As stated on the Microsoft blog post you can find the icons that will work with the portal here:

http://modernicons.io/segoe-mdl2/cheatsheet

In the following section I will mark the font icon placement in custom links in blue. This way you can see how they would be used.

SIDE BAR LINKS

In my portal I added some custom sidebar links.

In C:\inetpub\wwwroot\SelfServicePortal\Views\Shared

Modify the Sidebar.cshtml file.

In the file under “<div class=”side_nav_bar col side_menu”>”

I added the following:

<!– Custom IT Portal Link Begin –>

</font>

</a>

</div>

<!– Custom IT Portal Link End –>

And

<!– Custom Change Calendar Link Begin –>

</font>

</a>

</div>

<!– Custom Change Calendar Link End –>

In the file under “<div class=”side_nav_bar_expand col side_menu”>”

I added the following:

<!– Custom IT Portal Link Begin –>

<span class=”icon-text icon-text-pos”><a href=”http://portal.buchatech.com” target=”_blank”><font color=”white”>IT Portal</font></a></span>

</div>

<!– Custom IT Portal Link End –>

And

<!– Steve Change Calendar Link Begin –>

<span class=”icon-text icon-text-pos”><a href=”http://portal.buchatech.com/_layouts/15/start.aspx#/Lists/Change%20Calendar/calendar.aspx” target=”_blank”><font color=”white”>Change Calendar</font></a></span>

</div>

<!– Steve Change Calendar Link End –>

Here is the Microsoft link for adding sidebar links:

https://blogs.technet.microsoft.com/techlazy/2016/03/13/service-manager-new-html5-portal-basic-customizations-55-new-sidebar-link/

COLORS LOOK AND FEEL

Custom Buchatech look and feel:

Default look and feel: