In this blog post, I review the steps for customizing StoreFront to include a unique server identifier on the page footer. This is a common requirement for customers who have multiple StoreFront servers behind a load balancer. In this scenario, it is useful to provide users with a quick and easy way to identify which StoreFront server they are accessing.
For example:
Previous implementations were found to be incompatible with native Receiver. This modification should work for both Receiver for Web and Receiver for Windows 4.4 and above. It will likely work with any version of Receiver for Mac that supports the X1 interface, but I have not personally tested. Finally, it has been validated with StoreFront 3.6, 3.9 and 3.12, but should work with other 3.x versions as well. It requires ASP.NET, JavaScript, CSS, and some HTML.
Step 1: Create a server identifier variable in IIS
On each StoreFront server, open IIS and navigate to the server node and then open Application Settings.
Within Application Settings, click Add. Name the variable “ServerIdentifier” and set the value as that server’s host name or some other unique identifier, then click ok. For example, if your server is called StoreFront-1, then the value for this variable could be “StoreFront-1.” The next server would then use the value “StoreFront-2” and that pattern would continue for each server.
Once you’ve created your variable, close IIS.
Step 2: Add a dynamic script to the server
Within Windows Explorer on the primary StoreFront server, navigate to the following path:
[Drive Letter]:\inetpub\wwwroot\Citrix\[Store Name]Web\customweb
For example:
C:\inetpub\wwwroot\Citrix\TestStoreWeb\customweb
In this folder, create a file called ServerIdentifier.aspx and include the following content:
<%@ Page Language="C#" %>
<script runat=server>
protected String GetServerIdentity()
{
return ConfigurationManager.AppSettings["ServerIdentifier"];
}
</script>
<html>
<body>
Current Server: <% =GetServerIdentity()%>
</body>
</html>Note: This is an ASP.NET file that will be processed server side. When it gets requested by a client, IIS will execute the code and fill in all variables before sending the file to the user as HTML. In this case, we are grabbing the ServerIdentifier variable created in Step 1 and populating it within our HTML.
This is necessary because of how StoreFront propagation works. If we were to include a static HTML file with the server name, then it would be replicated to each server in our Server Group and overwrite any local copies. Consequently, each server would return the name of the primary server, rather than the actual server name. By populating the file dynamically, the same file can be replicated to all servers in the group.
Additionally, by placing this file in the customweb folder, it ensures that the file will not be cached locally by native Receiver (we want it to be downloaded each time native Receiver connects to a new server).
Step 3: Update script.js with the server identifier retrieval code
Within Windows Explorer on the primary StoreFront server, navigate to the following path:
[Drive Letter]:\inetpub\wwwroot\Citrix\[Store Name]Web\custom
For example:
C:\inetpub\wwwroot\Citrix\TestStoreWeb\custom
Open script.js in Notepad as an administrator.
Note: If you plan on making a lot of changes to this file, it would be beneficial to add your domain user account to the security properties of the file and giving yourself full control. That way, in the future, you can just open the file by double clicking it instead of using an elevated notepad.
Add the following content to the bottom of this file:
CTXS.Extensions.afterDisplayHomeScreen = function (callback) {
loadServerData();
};
function loadServerData() {
CTXS.ExtensionAPI.proxyRequest({
url: "customWeb/serveridentifier.aspx",
success: function(serverIdentifier){
$('#customBottom').html(serverIdentifier);
},
error: function(){
//do nothing
}
});
};Note: If you’ve already added content to the afterDisplayHomeScreen function, then append the call to loadServerData() after your existing content.
Save and close the file.
Step 4: Stylize your server identifier
Within Windows Explorer on the primary StoreFront server, navigate to the following path:
[Drive Letter]:\inetpub\wwwroot\Citrix\[Store Name]Web\custom
Make a backup of style.css and open in Notepad as an administrator.
Note: If you plan on making a lot of changes to this file, it would be beneficial to add your domain user account to the security properties of the file and giving yourself full control. That way, in the future, you can just open the file by double clicking it instead of using an elevated notepad.
Add the following content to the bottom of this file and customize it to your liking:
#customBottom {
text-align:right;
color:gray;
font-size:10px;
padding-top:5px;
padding-right:5px;
}Step 5: Propagate your changes
Now that the changes are implemented, on your primary StoreFront server, navigate to the Server Group tab and click Propagate Changes. This will pause your sever group and replicate the customizations to the other servers in the group (users will not be able to connect during propagation, so be sure to do this only during off-hours).
Want more customizations?
This post is part of a StoreFront customization series. For more step-by-step guides on customizing StoreFront, check out the entire series located here (this master blog post will be updated as new items are added to the series): https://citrixblogs.wpengine.com/2017/12/08/storefront-ui-customization-series/
Citrix TechBytes – Created by Citrix Experts, made for Citrix Technologists! Learn from passionate Citrix Experts and gain technical insights into the latest Citrix Technologies.
Click here for more TechBytes and subscribe.
Want specific TechBytes? Let us know! tech-content-feedback@citrix.com
