Changing the wat the home page looks.

Daran_Stokes

Hi

I'm looking to change the way our home page gets displayed to our end users.

Currently we display the default home page.

In the main body of the page it show the  shows the service offerings and above the title of each offering are up to 8 icons for the request offerings that are in that Service.

What I'd like to do is clean up the home page, by replacing these small icons with 1 large icon representing the service offering - using the graphic that I've added in SCSM Service Offerings.

Any help would be greatly recieved

Leigh_Kilday

Yep, that's possible. Check out this article for more information.

Not so sure about using the SO icon though.

Daran_Stokes

Thanks for the help, but this Custom.CSS only works for the alternate home page.

Not really what I'm after.

I'm using the default home page, and trying to make it as simple for our end users as possible.

Any other suggestions?

Tony_Collett

While we provide many types of Home Pages (Home Page, Home Page 2, Alternate Home Page), modifying them outside of CSS is not possible at this stage. You may be able to create a custom page and provide a link to the service offerings/request offerings from that page. 

I haven't tried making a custom page as a Home Page so I don't know how well it would work out. There are settings within Admin Settings>Setting Items which allow you to change the default home page of different user types. "AnalystHomePage" and "EndUserHomePage" take a GUID of a page, you could possibly use the GUID of the Custom Page

I have seen it done, where a customer had 4 big, clear buttons that all linked to different ROs, so it's not impossible, I'm just not sure how they did it I'm afraid. 

Martin_Blomgren

@Daran_Stokes
It's possible using javascript and css to get what you want, I started out that way but gave up since in the end to achieve what we wanted none of the included Home Pages where a "good enough" starting point. You need to target the "so-blocks" using js remove from DOM and replace with image from SO, the href link below remains the same.

This is how far I got using the default home page before I decided to go for a custom solution (test server):


Also wanted to get rid of that 8 picture grid which where confusing for the end users but as already mentioned our demand where a bit bigger I didn't followed through on that.


This is what the end users are seeing today when going to the portal (test server):




Custom built single page application and a 95% dynamic solution where we pull ROs with SO and Category information via API making the flow easier for the end user.

So if you truly want a home page based on your needs you have to build your own utilizing Cireson API. Will share our custom home page in the future once I have the time to remove/rewrite company specific information making it 100% dynamic. My hope is that in the end others will contribute making it even better for all of us!

Tony_Collett

Hi Martin, 
That looks really awesome. If you would like some help with publishing your code to the public, you are welcome to send me a message and I will (in confidence) help remove any private information. 

Martin_Blomgren

@Tony_Collett
There isn't any private information it's just that for example some areas of the shop functionality is written "for us" and not usable in a more generic sense. Already have ideas how to solve it saving the information in service manager and retrieve it via API thus making the final solution 100% dynamic. But as mentioned there isn't enough hours in a day to fix everything in the timeframe I would like.

Will upload it to a public GitHub repo to easily collaborate and track changes!

Daran_Stokes

Excellent work Martin,

This looks fantastic and exactly what our end users would be looking for.

If there's anything I can do to assist, please give me a shout.

Gerhard84

Good day everyone, is there a way I can access the KB article listed at the top without being a Cireson customer? I understand that "Free" users cant get access to support, but this article is under the "SELF-SERVICE PORTAL - COMMUNITY" and was hoping to research how to customize the portal. I have tried to login with my community account without success. Please help, i really LOVE the Cireson Community apps and are in the process to setup a POC to showoff to management what the product range can do "and hopefully get some moneys for licences" 

Joe_Burrows

Gerhard84 said:

Good day everyone, is there a way I can access the KB article listed at the top without being a Cireson customer? I understand that "Free" users cant get access to support, but this article is under the "SELF-SERVICE PORTAL - COMMUNITY" and was hoping to research how to customize the portal. I have tried to login with my community account without success. Please help, i really LOVE the Cireson Community apps and are in the process to setup a POC to showoff to management what the product range can do "and hopefully get some moneys for licences" 

Hi Gerhard84

Im pleased you are enjoying the Cireson Community apps - access to support.cireson.com is usually only granted to customers with a support agreement. 

However in saying that if your interested in becoming a prospect customer and trialing our applications, id recommend getting in contact with customersuccess@cireson.com they should be able to able to assist you with what you require.

@Morten_Meisler has a good blog post here covering portal customization.

Gerhard84

Joe_Burrows said:

Gerhard84 said:

Good day everyone, is there a way I can access the KB article listed at the top without being a Cireson customer? I understand that "Free" users cant get access to support, but this article is under the "SELF-SERVICE PORTAL - COMMUNITY" and was hoping to research how to customize the portal. I have tried to login with my community account without success. Please help, i really LOVE the Cireson Community apps and are in the process to setup a POC to showoff to management what the product range can do "and hopefully get some moneys for licences" 

Hi Gerhard84

Im pleased you are enjoying the Cireson Community apps - access to support.cireson.com is usually only granted to customers with a support agreement. 

However in saying that if your interested in becoming a prospect customer and trialing our applications, id recommend getting in contact with customersuccess@cireson.com they should be able to able to assist you with what you require.

@Morten_Meisler has a good blog post here covering portal customization.

Hi Joe_Burrows

Thanks for the reply. The blog post you mentioned it the one I was trying to access the KB for the customization from. I have made contact with paul.reid@cireson.com when I initially downloaded the portal last year but only got the chance to mail him this weekend regarding our needs. I will wait for his reply and then start the wonderful journey you have to offer.

Thanks for making my working life ridiculously easy ;-)

G

Giovanni_Perini

Wow, this looks realy great. Any timeframe in which we could look at the APi and custum home page? I would love to play around with this. What a great work.

Daran_Stokes

I ended up with this...

Joe_Burrows

Daran_Stokes said:

I ended up with this...

Looks awesome Daran

Tom_Hendricks

@Daran_Stokes this does look fantastic--it is simple to follow, yet informative.

I am curious about where these lead.  Are they Service Offering Categories, Service Offerings, links to tickets (with certain templates, maybe), or custom pages?

I am good with the technical aspects of how to link to those pages, but I am always curious about how others are structuring their catalog and the rest of their site.

Daran_Stokes

Hi Tom,

We've based the structure of the portal based on feedback from our users. They've told us that they want the service catalogues to be as intuitive as possible. so...

each icon leads to a similar custom page... based on Application/equipment/User access (see example below)

Then, we've used the ARO to create a single request from that link, so the user says:

1.I've a problem/I've a change required/I need something new

2. with an application/equipment/user access

3. form to complete.

 The only exception being the ask/inform section. This leads to a custom page, with a set of icons (as above) but one of the icons leads to a service offering page for HR to use to notify ICT of user changes.

I hope this helps.

FYI we did look to make the background a little more interesting... but end users feedback was they didn't see the need.

I'm also interested on how people are structuring their portals... I'm wondering if we could get a gallery stood up with images/code of peoples home pages?

Eric_Krasner

This is really interesting.  Any chance  you can share any of your code to look at?

Daran_Stokes

Hi Eric

Heres my code. I wish I could say I've been clever but unfortunately not. this is all manually created code and doesn't dynamically link back to SCSM. So I've ended up having to manually create HTML links within the custom pages

I've also had to manually create a new home page under the Navigation menu's

(apologies for the shocking HTML code - I'm no programmer)

Eric_Krasner

So @Daran_Stokes, does the 2nd level page open in a view window?  I have tried to follow along, but If i link the first page icon (HelpMe) to the 2nd level web page (HelpMe.html), it opens the HelpMe.html page on the same tab, clearing the portal window.  Is it possible to open that page in the same view panel as the 1st page?

Peter_Nordqvist

@Daran_Stokes
Hi Daran, thanks for nice solution, were did you get the icon images? Trying to find some more with the same design.

Peter_Nordqvist

If i like to use Daran's solution, and would like to add for example My Favorite Requests below the page, how can i achive this?

Daran_Stokes

Hi Peter,

The images were put together via our internal Marketing team... I'll check and email you the .png files if its ok....

I haven't added my favorite requests, but I'm sure theres existing code available for this. might need a SR with the guys at Cireson to pick this up.

Peter_Nordqvist

Thanks @Daran_Stokes
I think i found the icons at flaticon.com.
Regarding the favorites, i can ask the community in the forum first

Jeff_Lang

@Peter_Nordqvist
here is an example of how to get the My Favourite requests, and add them to a page, you will need to modify the HTML it adds to suit your page though. we are currently using this to modify the default home page.

We do run through the returned list from the end to the start as the code is set to add after another element, so it ends up creating the list from the bottom to the top.

var favreqlistdata = '';<br>$.get('/api/V3/ServiceCatalog/GetFavoriteRequestOffering', { userId: session.user.Id, returnAmount: 10, isScoped: false },<br>	function (data) {<br>		if (data.length > 0) {<br>			for(i = (data.length - 1); i > -1; i--) { <br>				favreqlistdata = '<div><table><tr><td width="15%"><div class="mid-thumb"><a class="cursor-pointer" href="/SC/ServiceCatalog/RequestOffering/' + data[i].Id + ',' + data[i].ServiceInfo.Id + '"><img src="/ServiceCatalog/GetRequestOfferingImg/' + data[i].Id + '" onerror="this.onerror=null; this.src=' + '"' + '/Content/Images/Icons/RequestOffering/RO_Default.png' + '"' + ';"></a></div></td><td width="85%"><div><a class="link" data-request-url="null" data-request-target-type="_self" data-service="b431ee69-071b-a7b1-be29-ea64e9833810" data-request="0a0acc12-05cc-db92-cc11-25fab424ecc4" data-bind="text: Title, click: openRequestOffering" href="/SC/ServiceCatalog/RequestOffering/' + data[i].Id + ',' + data[i].ServiceInfo.Id + '">' + data[i].Title + '</a></div></td></tr></table></div>';<br>				$(favreqheader).after(favreqlistdata);<br>			}<br>		};<br>	},"json");<br>

Peter_Nordqvist

@Jeff_Lang
Thank you, but were do i put this?, sorry, not a web developer, im testing Darans solution and want to modify his homepage. Thanks!

Vyacheslav_Gromov

Can sombody post here examples to add My favorites to custom home page please.