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).
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).
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!
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>
- 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 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.
** 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>
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.