Removing the "Favorite Feature" from the Cireson Portal?

John_Fitzpatrick

Is there a way to remove the functionality that shows a "favorite star" when you hover over a Service Request in the portal? We would rather that when you click the picture it takes you to the SR instead of having to click the text.

joivan_hedrick

The following code will enable you to click the image and load the request offering. 

$(document).ready(function(){
    //Since this uses a mutationobserver against a guaranteed-to-exist object, make sure we are only on the Home alternate page.
    if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) { 
        return; 
    }
    
    //The service catalog and request offerings don't load immediately. So wait until it does load.
    var mainPageNode = document.getElementById('main_wrapper');
    
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        //The page changed. See if any RO descriptions exist yet. 
        var titleElements = $(".sc-item-title");
        if (titleElements.length > 0) {
            fn_SetRequestOfferingImagesToOpenROs();
            observer.disconnect();
        }
    });
     
    // configure the observer. For our purposes, subtree is required.
    var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
     
    // pass in the node, and our mutationobserver options.
    observer.observe(mainPageNode, observerConfig);
     
    //Create the function to add our click event.
    function fn_SetRequestOfferingImagesToOpenROs() {
        //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.
        var favoriteIconElements = $('.fa-star-o');
        favoriteIconElements.hide();
        function clickChildRequestOffering(event) {
            console.log("clicked!");
            var parentAElement = event.target;
            //call the click event of the child img element.
            var childImgElement = $(parentAElement).find("img")
            childImgElement.click();
        };
        //For every icon, there's a sibling img element. Get it since it contains our click() event, which opens up the RO. We need to apply this to the parent <a>.
        for (var i = 0; i < favoriteIconElements.length; i++) {
            var siblingImgElement = $(favoriteIconElements[i]).parent().find("img")
            var parentAElement = siblingImgElement.parent();
            
            //Add our custom event to our img element, which will just end up calling the click event of the child <i>
            parentAElement.click(clickChildRequestOffering);
            
            //Change the hover event on this sibling img element.
            parentAElement.css('cursor', 'pointer');
        }
    }
});

Nicholas_Velich

Although style changes are being made, this is JavaScript code so it needs to go in custom.js, not the css file. Can you give it a shot there instead?

Steve_Wright

Hi John,
Can you tell me what version of the portal you are using. Do you have a screen shot available?

Thanks,

John_Fitzpatrick

Hi Steve,

We are on Portal 5.1
Please see the below linked image  which shows what happens when the mouse moves over the SR image

https://i.imgur.com/S90Wrni.png

Nicholas_Velich

Hi John,

You can hide the favorite icons with the following code:

$(document).ready(function (){

        var url = window.location.href;

        if(url.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") > -1){ // Verify we are on the Home Alternate Page

                setTimeout(function() { // Elements are not ready immediately, so we need a brief timeout

                        $('.fa.fa-star-o').hide();

                        $('.fa.fa-star').hide();

                },1500);

        }

});


Note-- this will not make the icons themselves into links (clicking them would just do nothing). Making these clickable links would require some additional code. Maybe somebody else in the community has done this already?

Thanks,
Nick

joivan_hedrick

The following code will enable you to click the image and load the request offering. 

$(document).ready(function(){
    //Since this uses a mutationobserver against a guaranteed-to-exist object, make sure we are only on the Home alternate page.
    if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) { 
        return; 
    }
    
    //The service catalog and request offerings don't load immediately. So wait until it does load.
    var mainPageNode = document.getElementById('main_wrapper');
    
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        //The page changed. See if any RO descriptions exist yet. 
        var titleElements = $(".sc-item-title");
        if (titleElements.length > 0) {
            fn_SetRequestOfferingImagesToOpenROs();
            observer.disconnect();
        }
    });
     
    // configure the observer. For our purposes, subtree is required.
    var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
     
    // pass in the node, and our mutationobserver options.
    observer.observe(mainPageNode, observerConfig);
     
    //Create the function to add our click event.
    function fn_SetRequestOfferingImagesToOpenROs() {
        //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.
        var favoriteIconElements = $('.fa-star-o');
        favoriteIconElements.hide();
        function clickChildRequestOffering(event) {
            console.log("clicked!");
            var parentAElement = event.target;
            //call the click event of the child img element.
            var childImgElement = $(parentAElement).find("img")
            childImgElement.click();
        };
        //For every icon, there's a sibling img element. Get it since it contains our click() event, which opens up the RO. We need to apply this to the parent <a>.
        for (var i = 0; i < favoriteIconElements.length; i++) {
            var siblingImgElement = $(favoriteIconElements[i]).parent().find("img")
            var parentAElement = siblingImgElement.parent();
            
            //Add our custom event to our img element, which will just end up calling the click event of the child <i>
            parentAElement.click(clickChildRequestOffering);
            
            //Change the hover event on this sibling img element.
            parentAElement.css('cursor', 'pointer');
        }
    }
});

John_Fitzpatrick

Joivan,

I placed this in my custom css but it didnt have any effect.

joivan_hedrick said:

The following code will enable you to click the image and load the request offering. 

$(document).ready(function(){
    //Since this uses a mutationobserver against a guaranteed-to-exist object, make sure we are only on the Home alternate page.
    if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) { 
        return; 
    }
    
    //The service catalog and request offerings don't load immediately. So wait until it does load.
    var mainPageNode = document.getElementById('main_wrapper');
    
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        //The page changed. See if any RO descriptions exist yet. 
        var titleElements = $(".sc-item-title");
        if (titleElements.length > 0) {
            fn_SetRequestOfferingImagesToOpenROs();
            observer.disconnect();
        }
    });
     
    // configure the observer. For our purposes, subtree is required.
    var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
     
    // pass in the node, and our mutationobserver options.
    observer.observe(mainPageNode, observerConfig);
     
    //Create the function to add our click event.
    function fn_SetRequestOfferingImagesToOpenROs() {
        //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.
        var favoriteIconElements = $('.fa-star-o');
        favoriteIconElements.hide();
        function clickChildRequestOffering(event) {
            console.log("clicked!");
            var parentAElement = event.target;
            //call the click event of the child img element.
            var childImgElement = $(parentAElement).find("img")
            childImgElement.click();
        };
        //For every icon, there's a sibling img element. Get it since it contains our click() event, which opens up the RO. We need to apply this to the parent <a>.
        for (var i = 0; i < favoriteIconElements.length; i++) {
            var siblingImgElement = $(favoriteIconElements[i]).parent().find("img")
            var parentAElement = siblingImgElement.parent();
            
            //Add our custom event to our img element, which will just end up calling the click event of the child <i>
            parentAElement.click(clickChildRequestOffering);
            
            //Change the hover event on this sibling img element.
            parentAElement.css('cursor', 'pointer');
        }
    }
});

Nicholas_Velich

Although style changes are being made, this is JavaScript code so it needs to go in custom.js, not the css file. Can you give it a shot there instead?

John_Fitzpatrick

Nicholas_Velich said:

Although style changes are being made, this is JavaScript code so it needs to go in custom.js, not the css file. Can you give it a shot there instead?

Thanks! That worked. You guys rock!

Cory_Bowe

Just a note to anyone that is using JV's excellent code.  To make it work with portal v6 change function fn_SetRequestOfferingImagesToOpenROs like so:

    //Create the function to add our click event.

    function fn_SetRequestOfferingImagesToOpenROs() {

        //hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.

        var favoriteIconElements = $('.fa-star-o');

        favoriteIconElements.hide();

        function clickChildRequestOffering(event) {

            console.log("clicked!");

$.savecrap = event.target

            var parentAElement = event.target;

            //call the click event of the child img element.

            var childImgElement = ($(parentAElement).parent()).find(".sc-item-title") // <--this is the line to modify

            childImgElement.click();

        };

joivan_hedrick

Incorporating @Cory_Bowe 's v6 and v7 code fix, this attached file will also work for Portal v5 and v4. 

Adrian_Mataisz

Thank you for the code, it work great. The only issue I see if the SO is Favorited the clicking on the icon doesn't work and it show the star.

How we can hide the Favorite Button from bar next to Save/Cancel while in RO?

Cory_Bowe

@Adrian_Mataisz - Personally, I would allow them to still use the favorite functionality but change the script like so:

//hide all star icons so that you cannot set favorites. This would interfere with clicking on the request offering images.
var favoriteIconElements = $('.fa-star-o').add('i.fa.fa-star');
favoriteIconElements.hide();

Notice the new .add on the line that gathers the favorite page elements.  This should gather all necessary elements from both older and newer versions of the portal.

Adrian_Mataisz

@Cory_Bowe Thank you for your answer. We already disabled showing the Favorites list and KBAs from the Home page. I would really like to disable the Favorites button while in RO. 

Cory_Bowe

I haven't tested, but it'd be something like this:
$(function() {

    //Checking to make sure we are on a Request offering

    if (document.URL.indexOf("/SC/ServiceCatalog/RequestOffering/") === -1) {

        return;

    };

    $('button:contains("Favorite")').hide();
});

Lukas_Kocher1

Hi dear

I'am using

General

Current Portal Version: 7.3.2016.1

Management Pack Version: 7.7.2016.185

How can i integrate it that i can click the Icon and get direct to the request offering

Thank you for your Help

Best regards

Cory_Bowe

@Lukas_Kocher1,

What have you tried so far?  Did you apply @joivan_hedrick script above to your custom.js and it didn't work?

Lukas_Kocher1

exactly what i did.
here is the script.
what i used but it is not working
i have to Change to Format from js to txt to upload here

Thank you for your help.

Best regards

Adrian_Mataisz

joivan_hedrick version  is working fine for us.

Cory_Bowe

@Lukas_Kocher1 - Did you grab the script from JV's December 2016 post? 

https://us.v-cdn.net/6026663/uploads/editor/mh/16xdz9fxkrh0.zip

Lukas_Kocher1

@ Cory_bowie
Currently is working that the favorite Icon is no more, but when i click on the Icon the request as i expect is not open.

Best regrads

Cory_Bowe

@Lukas_Kocher1 -

The script you sent is the old version that doesn't work with the newer versions of the portal. Please verify you are using the newest version of the script again.

This is the correct one:
https://us.v-cdn.net/6026663/uploads/editor/mh/16xdz9fxkrh0.zip

Lukas_Kocher1

@Cory_Bowe
Thank you very much now it works best regards

Vladimir_Budyak

For remove favorite star from panel on RO, use this code in custom.js:

(function() {
	$(document).ready(function () {
		var url = window.location.href;
		if (url.indexOf("/SC/ServiceCatalog/RequestOffering/") === -1) {return;};
		var mainPageNode = document.getElementById('main_wrapper');
		var observer = new MutationObserver(function(mutations) {
			var Element = $("#drawer-taskbar").find("[class*=fa-star]");
			if (Element.length > 0) {
				Action();
				observer.disconnect();
			};
		});
		var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
		observer.observe(mainPageNode, observerConfig);
	});
    var Action = function() {
			console.log("Hide favorites");
			$("#drawer-taskbar").find("[class*=fa-star]").parent().remove();

	};
})();

CaterhamITSupport

This worked for me really well thank you!

The only issue i can see if that when i hover over the Request Offering i want it to open up the the page.

Or have it so that the picture is just a picture and not a link anymore. When you hover over the picture it changes colour so its almost like its still there?

Daniel