Jump to content
Welcome to our new Citrix community!

Custom HTML content in StoreFront


Recommended Posts

Hi all,

 

I'm trying to add two new viewButtons next to Home, Apps and Desktop in StoreFront and show different HTML content in each of them. Managed to do one, but not the second.

My scipt.js file cotains the following:

 

CTXS.ExtensionAPI.addViewButton("Helpclass", "Help", "Foo");

 

// Make HTTP request for custom content

CTXS.ExtensionAPI.proxyRequest({

    url: 'Help.htm',

    success: function (customContent) {

        // Display custom content in the main area of the page

        $('#customScrollTop').html(customContent);

    }

});

 

CTXS.ExtensionAPI.addViewButton("Statusclass", "Status", "Foo");

CTXS.ExtensionAPI.proxyRequest({

    url: 'Status.htm',

    success: function (customContent) {

        // Display custom content in the main area of the page

        $('#customScrollTop').html(customContent);

    }

});

 

 

 

In addition my style.css contains:

#customScrollTop { display: none }

 

.Helpclass-view #customScrollTop { display: block }

.Statusclass-view #customScrollTop { display: block }

 

 

However, this does not work. What am I doing wrong? Any help is appreciated :D

 

Best regards

-Owe

Link to comment
Share on other sites

The way your code is currently structured, you are loading both files immediately, and whichever file is loaded last will overwrite the content in the <div>.

You should wait to load the content until the user clicks the appropriate button. Try the following (note that my content is coming from the custom directory):

CTXS.ExtensionAPI.addViewButton("Helpclass", "Help", "Foo");
CTXS.ExtensionAPI.addViewButton("Statusclass", "Status", "Foo");

CTXS.Extensions.onViewChange = function(viewName) {
    if (viewName == "Helpclass") {
        CTXS.ExtensionAPI.proxyRequest({
            url: 'custom/Help.htm',
            success: function (helpContent) {
                // Display custom content in the main area of the page
                $('#customScrollTop').html(helpContent);
            }
        });
    } else {
        if (viewName == "Statusclass") {
            CTXS.ExtensionAPI.proxyRequest({
                url: 'custom/Status.htm',
                success: function (statusContent) {
                    // Display custom content in the main area of the page
                    $('#customScrollTop').html(statusContent);
                }
            });
        }
    }
}; 

 

  • Like 1
Link to comment
Share on other sites

2 hours ago, Sam Jacobs said:

The way your code is currently structured, you are loading both files immediately, and whichever file is loaded last will overwrite the content in the <div>.

You should wait to load the content until the user clicks the appropriate button. Try the following (note that my content is coming from the custom directory):


CTXS.ExtensionAPI.addViewButton("Helpclass", "Help", "Foo");
CTXS.ExtensionAPI.addViewButton("Statusclass", "Status", "Foo");

CTXS.Extensions.onViewChange = function(viewName) {
    if (viewName == "Helpclass") {
        CTXS.ExtensionAPI.proxyRequest({
            url: 'custom/Help.htm',
            success: function (helpContent) {
                // Display custom content in the main area of the page
                $('#customScrollTop').html(helpContent);
            }
        });
    } else {
        if (viewName == "Statusclass") {
            CTXS.ExtensionAPI.proxyRequest({
                url: 'custom/Status.htm',
                success: function (statusContent) {
                    // Display custom content in the main area of the page
                    $('#customScrollTop').html(statusContent);
                }
            });
        }
    }
}; 

 

 

Sam Jacobs, THANK YOU! Works perfectly! That one really made my day.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...