in Service Manager

Advanced Cireson Service Manager Portal Customizations

You probably know that Service Manager has some drawbacks when it comes to the Self-Service portal. Microsoft recently released a new HTML 5 Self-Service portal which is actually a big step forward compared to the Silverlight based portal delivered out of the box with Service Manager 2012. However many customers evaluating ITSM tools are still surprised that there is no better out of the box portal available. Compared to the other ITSM product vendors, the Service Manager portal is definitively not what you are expecting from a state of the art ITSM software.

But since Service Manager really is a flexible and customizable product, it offers you an API which can be used to interact with 3rd party products. This is what some Microsoft Partners are using when creating their very own version of a Service Manager portal.

This really gives you the flexibility to choose from a variety of portal solutions. However you will have to decide for your self what solution suits your needs best. For this post I will concentrate on the Cireson Self-Service Portal. But Cireson is not the only company offering a replacement for the Service Manager portal. Other Self-Service portal solutions are offered by itnetX as well as Cased Dimensions.

One of our customers decided to go with the Cireson portal as portal solution for his Service Manager environment. However, this portal still did not fit all their needs unfortunately. By default, the portal for example does not provide a shop-like experience. There is no shopping basket and also not images can be shown for items.

However, the Cireson portal provides a neat way to customize quite a lot of things. You can customize the style of the portal using CSS. These customization changes are saved in a dedicated folder and applied on top of the default style. They will always override what is provided out of the box even if the out of the box CSS code changes. Details can be found on the Cireson support page.

Luckily a talented web developer works for the above mentioned customer ๐Ÿ™‚ With his permission, I want to share some of the customizations which he made to boost their Cireson portal experience. All credits for the following portal customizations go to Manuel Kammermann. If you need to know more details about the below customizations, reach out to Manuel. I am sure he is happy to help.

Service Catalog

Normally the first thing a user sees when connecting to the Cireson portal is the Service Catalog. Service Catalog experience can be customized pretty heavily by changing colors, fonts and also some parts of the layout. With this in mind you can create your own custom portal experience according to your company’s corporate identity. As you see below, colors, fonts were changed and the search bar was resized. Also, in addition to the Request Offering’s name, users can now also click the Request Offering’s image to access the corresponding form.

Cireson Portal Service Catalog

Furthermore, Knowledge Base articles are hidden by default to save some space. Users can toggle them by clicking Show How To’s below the categories navigation pane.

Cireson Portal Knowledge Base

Images for Request Offerings

When it comes to Request Offerings where users can order hardware and applications, it is often requested to show some images representing the corresponding item. As already mentioned, the Cireson portal out of the box does not support images in Request Offerings. However, one can achieve this by using some Java Script magic which shows appropriate image located on the file system based on the filename.

Along with images,

Cireson Portal Images

Order Summary

Unfortunately the Cireson portal lacks some functionality when it comes to ordering items with a shop like experience, where users have kind of a shopping basket to keep track of their order. This can be (partly) solved by customizing the portal. As you see below, users can now see exactly what items they selected for a given request. What’s still missing unfortunately, is the possibility to remove items directly from the basket.

Cireson Portal Order Summary

Activity Status Highlighting

Users and Analysts can now see at first sight what activities have which status.

Cireson Portal Activity Status

 

 

Write a Comment

Comment

  1. Hi Stefan, some really cool customizations here. I was wondering what more you could tell us about the Order Summary page, is it an Advanced Request Offering that leads up to the Order Summary page? Is it possible to provide me some more screenshots of the entire order process there? Thanks!

    • Hi David and thanks for your comment! No, this is not an Advanced Request offering. The Cireson portal version used in this case did not yet support Advanced Request Offerings. The Order Summary does basically use some Java Script magic to summarize CIs selected by the user. It is always visible just below the Service Offering information and gets updated in realtime.
      When using multi selection Query Prompts with Cireson Portal, it is sometimes very hard to make changes to the selection especially if there is a great many of CIs. Users often can’t see what items they selected previously. Order Summary should help users to get an overview of what they selected for the given Request Offering.
      Hope this helps and if you need more (technical) information, I reaching out to Manuel who did all the hard work ๐Ÿ™‚

    • Hi David,
      As Stefan already summarized very well, the “Order Summary” does summarize all inputs in a single Request – at least so far ๐Ÿ˜‰ (also there are still some issues with pagination).

      What was the functionality you were expecting? Maybe we can twist this Summary a bit to achieve what you need/want?

      • Hi Manuel,

        This is really good looking. Thanks for sharing and nice job.

        How easy is it to customize the portal’s request forms and to what extent? For example, sometimes number fields and grids are too large and confusing and could use some rightsizing. Do you have a picture or two showing what the customized forms look like?

        Thanks,
        L

        • Hi L,

          When it comes to customisation of the forms I guess your fantasy are the limits, really! I recently realized that with jQuery.getScript() your even able to load any javascript needed (not necessary to say, that Cireson itself already implements underscore and other libraries that allow for further javascript source inclusion).
          For example we just replaced the kendoEditor to create KB-articles with the TinyMCE Editor (Simply to better fit our processes, the kendoEditor is fine as it is).

          To answer your question: If you know your way around HTML5, JavaScript and LESS/CSS you can start right away.
          – start with the cireson support article https://support.cireson.com/KnowledgeBase/View/43?selectedtab=enduser
          – Be aware, that there is a lot of Ajax Requests around the portal but Cireson was lazy with using Events to determine the apps state. So I guess this might be one of the heavier parts to get around

          Some considerations:
          – There are a number of things on how to customise the grids. Start with optimising the shown columns within SCSM itself (maybe A/B test with your clients to know what they need).
          – Check Teleriks documentation on the kendo UI framework (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid) to see how you can intervene while loading the grids dataSource in order to set filters, groupings or columns from within your custom.js before the grids get rendered initially
          – For manipulations within the grids themselves (for example shortening date columns, activating links etc.) you can slide tackle directly to the dataSource of the grids and change its values

          To start maybe check out some articles on the Cireson Community Pages (you will also find my posts on how to get all selected items of a grid, no matter whether you filter, group, or whatever https://community.cireson.com/discussion/961/get-every-selected-item-within-a-paginated-multiselect-grid-with-javascript)

          For Screenshots, I did not have the time to make this most stating before/after screenies, but basically you see some examples above. If you want, you can send me an email with some concrete ideas and I’ll see if we already did that.

      • Hey Manuel,

        I’m an IT-technician working for the local power company in my hometown and we implemented System Center Service Manager with the Cireson Self Service Portal about two years ago. Updates have been non-existant since launching, but sadly customer complaints have not been.
        We are just about to upgrade our Cireson SSP to version 6, and in doing so, we’re revamping all our request offerings. There’s however one feature that our customers have complained about a number of times, that we still can’t deliver – an order summary. I was definitely excited when I found this blog post (thank you Stefan!).

        Is there any way for me to download these customizations so that I can implement them in our portal?

        • Hi Jacob,

          Hmmm, honestly, I would love to give it to you to see if it works in different environments. However I have never tested it on version 6, and never standalone (I have implemented a bunch of features together which share the core detecting methods to trigger the features). Also some methods (getting the label, highly depends on custom dataItem classes).

          In short: It most probably won’t work out of the box.

          I’d suggest you write me an email to m.e.kammermann@gmail.com and we’ll see what we can do …

          PS: which power-company would that be? (Even though I wrote the code, my company ‘owns’ it and decides about sharing it)

  2. Hi Manuel

    Love the work you have done with the portal. I am very interested in the loading of the catalog item images. Is this something you are able to share?

    Thanks