This is my second blog post in a series related to the Tech Preview of Receiver X1. In my first, I provided  background and explained the rationale behind X1.

This post is more practical – a step-by-step guide to help you deploy X1. I’ll also show you how to make some simple but powerful customizations to brand X1 to your company colors.

The Tech Preview download is StoreFront 2.7. This is an iteration on 2.6. While there are features beyond X1, I’m going to focus exclusively on X1. For the tech preview, there is no upgrade support. So, please start with a clean machine, or uninstall StoreFront first. (The GA release will support upgrade from earlier releases, but not from the Tech Preview itself).

As a Demonstration,
I’m Going to Install and Use StoreFront on a Virtual Machine.

I’m using Windows 2012 R2 (see the release docs on the download page for full list of supported platforms). The machine should be domain joined, but there are no other pre-requisites.

Step-By-Step Guide

First, download and run the installer. You will need to be an admin to compete the steps I’m demonstrating.

Handle any UAC prompts. (Yes I know it says ‘Citrix Delivery Services’ not ‘Citrix StoreFront. Know that we are currently addressing this obvious bug.

Go through all of the obvious steps until you get to to this point.

Once you click ‘finish,’ the admin console will be opened. (You can open this again by running ‘StoreFront’ from the start screen).

Hint: Pin to task bar

The StoreFront UI should be familiar to previous StoreFront admins. No big changes here:

Click ‘Create new deployment’ and enter the base URL for your server. Use a fully qualified DNS name if that is what you will use elsewhere. StoreFront can be fussy if the name entered here doesn’t match what users will type, and whilst this isn’t an issue for web clients, best to get into the habit now. I’d also suggest sticking to HTTP for ease during the tech preview (obviously I’d advise that HTTPS is better for production)

For my test’s I’m using the url http://x1blog-sf.example.net

After the base URL comes the name for the primary store. StoreFront can support many “stores” but most people use only one, and pick the rather obvious name ‘Store’. Feel free to go with the flow or be as inventive as you like. I’m going to ‘Purple’ just so it is clear what is part of the store name (Purple) rather a fixed term in the UI. This will result in a set of services (for use by native clients) under /Citrix/Purple and a web site under /Citrix/PurpleWeb.

Next, you will need to enter the details of the backend XenApp or XenDesktop services you intend to use to actually provide the apps. It really helps if you already have a farm. Pretty much, any will do. (It is possible to enter a dummy address here and then fake the apps later – I’ll return to this in a later blog). If you put in a dummy server here the system will work – but you won’t get any apps.

(Again generally HTTP/Port 80 is just fine for a tech preview. You can copy settings from any existing Web Interface or StoreFront deployment you have)

Finally, let’s address remote access. For simplicity, I’m deliberately picking ‘None’. If you are using NetScaler Gateway and only care about web access (which is what this Tech Preview focuses on) pick ‘No VPN Tunnel’ and enter your gateway details. You can always come back and do this later.

Once StoreFront has finished churning, the following is created:

  • An Authentication Service
  • A Store, pointing at the XenApp/XenDesktop services you indicated.
  • The website, which in turn points at the store. This is where X1 lives.

Let’s take a quick tour of the web UI before we turn to customization.

If you open the web site you will set the new login page. Login using any credentials trusted by the domain your storefront is in.

Once the user has logged in they will get to a page something like this:

If you want to take a look at a ‘nearly’ live site, I have put a canned version here:

http://samples.citrixcloud.net/x1/1-VanillaSite/receiver.html?-db

The sample site uses dummy apps and has some limitations – notably no login, “launch” won’t work and subscriptions won’t get remembered – but it is a quick way to take a tour, and later in this series I’ll show you how to use this to speed your own development.

This UI shows three ‘tabs’. “Favorites”, “Desktops” and “Apps”. The first tab shows apps that the use has previously selected, or had pushed to them. This will be the default tab, once the user has some apps in it. (Note that if you disable subscription in storefront, then this tab will be hidden). The second tab “Desktops” is shown if (and only if) the user has some desktops. Again you can turn it off if you don’t want it. The final tab “Apps” contains all the apps published to the user, regardless of whether or not they are subscribed. Some people call this a ‘Store’.

(As a Brit, the fact that ‘Favorites’ is spelled the “wrong” way does grate a little. It is of course, customizable, and we’ll look at changing strings or adding new locales in a later blog)

For users of the previous iterations of receiver, the “Favorites” tab is equivalent to the main Receiver UI, the Desktop tab is equivalent to “Desktops” in Web Receiver, and the “Apps” tab is equivalent to the Plus sign on the left of the UI in previous receivers.

Adding Style

First, know that few changes are completed within the admin console. We are going to cover the following:

1) Creating some featured groups of applications

2) Changing the Logo from Receiver to a company logo

3) Changing the color scheme to match the company logo

Featured App Groups

These are arbitrary collections of applications that you want to highlight to your users. Examples might be for top level categories – “Sales,” “Marketing,” etc., Or, to highlight new apps or a new initiative “Mobile Workspace.”. If you don’t have a need for this feature, don’t create any groups. The UI will adjust to fit.

Each featured app group has the following

  • A name, which can include basic formatting (e.g. <b>old)
  • A description
  • A set of apps, selected by name, keyword or category.
  • A tile background. We ship 9 different tiles. You can of course add your own.
  • An overlay image. This is only accessible via customization, but allows you to add some polish.

Note that app groups are created inside of StoreFront, rather than on the back end XenApp/XenDesktop farms. The advantage of this is that it allows an administrator responsible for end-user access to promote/highlight apps, without the need to make changes to the back end infrastructure.

Let’s add a simple group. For this you will need to know the name of at least one app in your environment.

Adding a Featured App Group

  1. Select your Receiver for Web site
    Note that although this is X1, it is still a receiver for web site, with all the existing features. This web site will in future also be used to deliver the UI to native clients – though the tech preview is limited to just the web.
  2. Select ‘Manage Featured App Groups
  3. Create a Featured App Group. We will use choose to select apps by name, as this is the simplest approach. Any app that has a word matching any of the entered names will be included in the group. I’m going to pick “2013” which will match all my Office 2013 apps.

Note that users will only see apps that are published to them, and only see groups containing at least one app published to them – so you can create bundles for specific user groups or use cases without confusing people for whom they don’t apply. Do be aware though that the full list of featured groups is sent to every client, so don’t use this for security purposes. A featured app group called “Apps related to the hostile takeover of WWCo” is probably not a good idea….

Make sure you click ‘ok’ enough times for the change to actually get applied!

Take A Look In A Browser

Notice we show three icons by default on the featured groups ‘tile’. Again this is customizable, but we will save that for later as it is a bit fiddly.

One featured app group looks a bit lonely. I’d suggest creating at least three.

Here Is A Canned Site Showing Offf

http://samples.citrixcloud.net/x1/2-FeaturedApps/receiver.html?-db

Next let’s add a company logo and color scheme. Again you can do this from the Admin UI. Choose a suitable image beforehand. Keep the image small, and ideally on a transparent background. You can also upload a double sized logo to help with all those high-dpi screens out there (especially mobile).

Also in preparation, find out what color your company favors. You can use Paint to do this (Personally, I prefer Paint.Net as it will give you the result as a CSS friendly hex code).

Using Paint:

  1. Open you company web site, or some other suitable page
  2. Hit ‘Print Screen’ (PrtScn)
  3. Open Microsoft Paint and hit ‘Paste’
  4. Use the ‘Eye Dropper’ tool to pick the color (Blue header in this case)
  5. Open ‘Edit Colors’ to read off the color as RGB values

Now armed with the logo image and colors, go back to StoreFront, and hit ‘Customize Website’.

Note that you get a mini preview of the logo and colors in place. This is just a guide – in practice the logo will be smaller than shown in the preview.

Refresh in a browser to see your masterpiece:

And again, here is a canned site showing what we just did.

http://samples.citrixcloud.net/x1/3-Branded/receiver.html?-db

That’s basically it for this blog post. But, I wanted to finish by giving a quick overview of what happened under the covers and explain how we will build on this in the next installment.

When we created the customization in the admin console, we actually caused the creation of a CSS file. CSS (or Cascading Style Sheets) files are part of the trinity that makes up HTML5 – HTML, JavaScript and CSS. We will use all three as we go deeper into customization. But, even simple CSS changes can have a profound effect.

To see what we have done, look at the following file

http://samples.citrixcloud.net/x1/3-Branded/custom/style.css

This is where we will apply all our stylistic customization, and this is where changes to style made in the admin console also turn up (between the MANAGED SECTION markers).

 

<strong>/* The following section of the file is reserved for use by StoreFront. */</strong>
<strong>/* CITRIX DISCLAIMER: START OF MANAGED SECTION. PLEASE DO NOT EDIT ANY STYLE IN THIS SECTION */ </strong>

<strong>.theme-header-bgcolor{ background-color:#32A9C3; } </strong>

<strong>.logo-container{ background-image: url('WWCO_logo_white.png'); background-size: 112px 29px; } </strong>

<strong>/* CITRIX DISCLAIMER: END OF MANAGED SECTION. */ </strong><strong>/* You may add custom styles below this line. */</strong>

 

CSS is a powerful, and potentially complex beast, but the basics are straightforward. This file says:

“Find any part of the page marked as having class theme-header-bgcolor and change its background color to the specified value”

“Find any part of the page marked as having class logo-container, and set its background image to the specified URL, and squeeze the background image to be the specified size”

Classes are just annotations in the page, and we annotate many parts for our own purposes, and also to enable customization. Here are some key ones:

 

<strong>.logo-container</strong>

<strong>.theme-header-bgcolor</strong>

<strong>.theme-header-color</strong>

<strong>.theme-highlight-color</strong>

<strong>.dialog-button</strong>

<strong>.dialog-button.default </strong>

 

One last thing before I close. CSS classes can be nested, and we use this to indicate the ‘mode’ that part of the UI are in. For example if I want to change the header color on desktops, but not phones, I could use:

 

.large .theme-header-bgcolor { background-color:#32A9C3; }

 

Much more of this in the next blog.


Blogs in this series