Adding Custom HTML Links to Citrix StoreFront Apps Page

This article outlines the process of adding custom HTML links to the Citrix StoreFront applications page, providing users with easy access to company documentation and blogs directly from their application portal. This customization involves modifying the StoreFront JavaScript file, specifically ctxs.webui.min_1F25FA45E8E55270.js. It is crucial to understand that directly modifying core StoreFront files can have unintended consequences and may be overwritten during updates. This approach is generally discouraged for production environments. Consider using supported customization methods if available for your StoreFront version. Always back up your StoreFront server and files before making any changes.

Disclaimer: Modifying core files can lead to instability and is not officially supported by Citrix. Proceed with caution and at your own risk. This article is for informational purposes only and does not constitute professional advice.

Prerequisites:

• Access to the StoreFront server.
• Backup of the StoreFront server and the ctxs.webui.min_1F25FA45E8E55270.js file.
• Text editor capable of handling large files (e.g., Notepad++, Sublime Text).
• Basic understanding of HTML and JavaScript.

Steps:

1. Locate the File: Navigate to the specified directory: C:\inetpub\wwwroot\Citrix\VistaExchangeWeb\receiver\js\. Locate the file ctxs.webui.min_1F25FA45E8E55270.js. The filename hash might be different in your environment, but it will be a ctxs.webui.min file. Identify the correct file by its size and recent modification date.

2. Backup the File: Absolutely critical: Create a copy of the original file before making any changes. Name the backup something like ctxs.webui.min_1F25FA45E8E55270.js.bak.

3. Edit the File: Open the original ctxs.webui.min_1F25FA45E8E55270.js file in your text editor.

4. Identify the Target Location: This is the most challenging part. You need to inspect the JavaScript code to find where to inject your HTML. The exact location will depend on the StoreFront version and the specific UI elements you want to target. Look for code related to the application display area. Use your browser’s developer tools (F12) to inspect the HTML structure of the StoreFront applications page and identify the relevant container where you want to add the links. This will give you clues about the corresponding JavaScript code. Look for functions that render the application icons or the surrounding elements.

5. Inject the HTML: Once you’ve identified the target location, insert your HTML code. For example, to add links to company documentation and a blog, you might use the following HTML:

1
2
3
4

<div class="custom-links">
  <a href="https://www.yourcompany.com/documentation" target="_blank">Company Documentation</a> |
  <a href="https://www.yourcompany.com/blog" target="_blank">Company Blog</a>
</div>

You’ll likely need to wrap this HTML in JavaScript code to dynamically insert it into the page. For instance, if you’ve identified a specific element’s ID as application-list, you could use JavaScript like this (adapt the selector as needed):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Example:  May need adjustments based on StoreFront version
var customLinks = document.createElement('div');
customLinks.className = 'custom-links';
customLinks.innerHTML = '<a href="https://www.yourcompany.com/documentation" target="_blank">Company Documentation</a> | <a href="https://www.yourcompany.com/blog" target="_blank">Company Blog</a>';

// Find the target element (replace with actual selector)
var targetElement = document.getElementById('application-list'); // Or a more appropriate selector

if (targetElement) {
  targetElement.appendChild(customLinks); // Or insert before/after, depending on desired position
} else {
    console.log("Target element not found.  Check your selector.")
}

6. Save the File: Save the modified ctxs.webui.min_1F25FA45E8E55270.js file.

7. Test the Changes: Clear your browser cache and cookies. Log in to the StoreFront portal and verify that the custom links are displayed correctly.

8. Consider Minification: If you unminified the file for editing, you should ideally minify it again after making changes to maintain performance. There are online JavaScript minification tools available.

Important Considerations:

• StoreFront Updates: StoreFront updates will likely overwrite your changes. You’ll need to reapply them after each update. This makes this approach very maintenance-intensive.
• Supported Customization: Explore supported StoreFront customization options, such as using the StoreFront SDK or CSS modifications, if available for your version. These methods are more robust and less prone to breaking during updates.
• JavaScript Obfuscation: The ctxs.webui.min file is minified and potentially obfuscated. This makes it difficult to understand and modify. Be prepared to spend time deciphering the code.
• Testing: Thoroughly test your changes in a non-production environment before deploying to production.

This process is complex and requires careful attention to detail. Proceed with caution and always back up your files before making any changes. Again, strongly consider using officially supported customization methods whenever possible.