In this blog post, I review the steps for customizing the StoreFront UI so that the “details” link associated with each application is replaced by a dynamic icon determined by the application’s subscription status.

For example: 
Customized

Original

This is a useful modification for customers that have a large number of applications, as it affords users the ability to quickly identify their subscribed applications while scrolling through the app store view.  In the example, a star was chosen as the dynamic icon. The star icon brings the StoreFront UI in line with other subscription models that users are probably already familiar with, such as browser bookmarks and contact favorites. Clicking this star brings users to the “details” page where they can then subscribe to the application as they would normally. One future change being explored is the ability to have the star also act as the subscribe mechanism, but that is beyond the scope of this current blog.

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 tested it.  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 CSS and some JavaScript.

Step 1:  Remove the word “details”
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

Create a backup of strings.en.js (or your respective language localization file) 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 string to the customStringBundle:

Details: ""

Once added, the file should look something like the following:

(function ($) {
$.localization.customStringBundle("en", {
Example1: "This is an example",
Example2: "This is another example”,
Details: ""
});
})(jQuery);

Step 2:  Install your icons
For this step, you will need two icon files- one for an unsubscribed app and another for a subscribed app.  From a general user acceptance point of view, the unsubscribed app should be an unfilled image and the subscribed app should be a filled image, but this is not a requirement.  These files should be small in dimension and file size (probably no more than 25px by 25px and under 2kb in size).  Any web appropriate file format should work (PNG, JPG, etc.).  I chose PNG because it supports lossless compression and would maintain visual clarity.

Note: The images files used as examples in this blog can be downloaded here:

   

Once you have your image files, within Windows Explorer on the primary StoreFront server, navigate to the following path:

[Drive Letter]:\inetpub\wwwroot\Citrix\[Store Name]Web\custom

Create a sub-folder called images.  Place your new image files into this folder.  The path should look like:
[Drive Letter]:\inetpub\wwwroot\Citrix\[Store Name]Web\custom\images

Step 3:  Add your icons to the UI
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:

.storeapp-action-link{
background-image: url('images/[unfilled image]');
background-repeat: no-repeat;
background-position: center;
}
.added .storeapp-action-link{
background-image: url('images/[filled image]');
}

Replace the image names with your respective images. Using the example images, the code would look like this:
.storeapp-action-link{
background-image: url('images/unfilled.png');
background-repeat: no-repeat;
background-position: center;
}
.added .storeapp-action-link{
background-image: url('images/filled.png');
}

You will then need to add margins around the icon to center it appropriately within the application tile.  The following code is based on the example images and should be adjusted to suit your particular configuration.  Add it to the bottom of the style sheet and adjust as necessary:
.largeTiles .storeapp-action-link{
width: 30px;
height: 30px;
margin-top: 6px;
margin-left: 83px;
}

You may want to add a hover effect such as magnification to the icon, so that the UI visually responds when users mouse-over a particular icon.  In the following example, the star will increase slightly in size when users hover over the icon.  To implement this, add these additional lines to the bottom of the styles sheet and adjust as necessary:
.largeTiles .added .storeapp-action-link:hover{
background-size: 80%;
}
.largeTiles .available .storeapp-action-link:hover{
background-size: 95%;
}

Since the CSS background-size attribute is based on the height and width of the parent element and not the image itself, some trial and error may be required to get your image to grow by the expected amount.

Using the background-size attribute with a percentage will cause the image to be magnified and thus lose some visual acuity.  As an alternative, you could create a larger, higher resolution version of the same image, so that the icon remains sharp.  You’d then edit the :hover property accordingly, such as:

.largeTiles .added .storeapp-action-link:hover{
background-image: url('images/[larger filled image]');
}
.largeTiles .available .storeapp-action-link:hover{
background-image: url('images/[larger unfilled image]');
}

Step 4:  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 server 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 will be updated as new items are added to the series): https://citrixblogs.wpengine.com/2017/12/08/storefront-ui-customization-series/