The SCSM HTML 5 portal has been out for some time now and this blog post is a collection of links to customizations that have been made to the HTML 5 portal.
Adding a custom.css file in the \Content\css folder of the Self Service Portal website folder is the basic start, as this will override the default css styles defined in \Content\css\main.css.
The official position from Microsoft is that you can customize the following files with rollups or patches overwriting them:
- web.config
- custom.css
- sidebar.cshtml
Any over customization that you make to other .cshtml, .css, .js or .dll files should be backed up before any upgrade, rollup or patch. The customizations may need to be reapplied after the upgrade, rollup or patch.
From the Official System Center Service Manger Blog comes with a short video quick demo about basic Self Service Portal deployment & customizations.
Donato Pasqualicchio from the Service Manager community has published a few blog posts that provide details on how you can customize the portal:
Steve Buchanan also has a summary of these blogs along with an explanation of the basic customization’s described in the Microsoft blog: http://www.buchatech.com/2016/04/customization-in-the-service-manager-html-5-ssp/.
He covers the following as well:
- Display “Must Vote” by the side of the user name on Change Request Activity
- How to change Contact Information – telephone number and email address
- Logo sizes
- Side Bar links
- Custom Error Message
Steve Beaumont again covers the most common basic customisations on branding and gives an explanation on adding a new item to the side bar
Both of the Steve’s posts above reference Donato Pasqualicchio’s cheat sheet for the font\icons that can be used on the Portal : http://modernicons.io/segoe-mdl2/cheatsheet/
Ryan Ephgrave has three useful blogs relating to customizing the Portal:
- Larger description text box:
- Show a Service Offering Filter
- A better way to do a Search Query
The scsmadventures blog site has an interesting post that displays extra information to help users fill in the Portal form.
From the blog post ” After the HTML5 Self-Service Portal was released from Microsoft, there really isn’t a nice way to display non-question information for specific request offerings. For example, email/share naming standards.”
This post from the Automation Guy gives an example of making a string box accept carriage returns. It essentially customises the Size of a String Property to allow a return.
The blog System Center Tools https://sctools.azurewebsites.net has some good posts on Service Manager Self-Service Portal customizations
- Part 1: Downloading attachments – make SCSM attachments visible on the portal
- Part : Timepicker control – change the default date picker to a time (hours, minutes) picker
- Fixing MyRequests bugs – when the user has an active request it’s not listed under ‘My Requests’
This blog post from Antoni, covers increasing the Query limit from the default limit of 2000 results.
Technet Forum Posts that might be Helpful
I have not tested of verified any of these solutions or ideas. Use these to see what others have tried and where you might find related settings to an issue that you are experiencing:
- Change Control User to Approve Info – Must Vote
- Show more than 5 announcements in the portal
- HTML 5 service manager portal is not sorting the catalog items – list of service requests is not alphabetically sorted anymore
- How to customized My Activities – Remove vote options
Hopefully these help and if you have any other suggestions please leave a comment.
Thanks.
SCSMtools 
Very useful post !
I just found out how to sort query results when you are opening a request and press the refresh (or updated to search 🙂
in Query.cshtml modify the lines at the top of the file
(sits in the same folder as where Makeform.cshtml is)
@{
Layout = null;
List<Tuple> displayColumns = ViewBag.DisplayColumns;
List<Dictionary> itemList = ViewBag.ItemList;
START OF EXTRA LINE
itemList = itemList.OrderBy(x => x[“DisplayName”]).ThenByDescending(x => x[“DisplayName”]).ToList();
END OF EXTA LINE
Dictionary configItems = ViewBag.ConfigItems;
string queryPickerId = ViewBag.Id;
}
obviously do not add the text in CAPITALS
now in the search results it will sort automatically on the first text column (A-Z)
LikeLike