Step by Step Customizing RD Web Access 2012 R2 – Part 2

In this second post I’ll focus on customizing the main page. That is the page a user sees after the user logs in.

Update: the third post in the series is published, which focuses on customizing the second main page (Connect to a remote PC). Read it here.

Just as a friendly reminder or if you didn’t read the first post (Step by Step Customizing RD Web Access 2012 R2 – Part 1), we’ll be editing the files in the Web Access interface, which can be found in %windir%\web\rdweb\pages\<language-code> on the RD Web Access server.
To be safe, make a full backup copy of the %windir%\web\rdweb\pages folder and subfolders.

The main page is actually made up of two pages. The first page is the page that shows you the published Desktops and RemoteApp programs. By default it looks like this:

I published several RemoteApps and arranged them into a folder structure.

Customizing the Web Access navigation bar
The navigation bar presents the user with different screens in the main page.

The navigation bar is defined as two navigation bars actually.
Navigation bar [1] contains the tabs. The “RemoteApp and Desktops” tab is the page we’re on at the moment. The “Connect to a remote PC” tab takes you to the main page’s second page called “Desktops.aspx” and I’ll cover that in the next post.

Navigation bar [2] shows a Help link, and a Sign out link.
The Help link will be covered later.
The Sign out link will sign the user out by calling a JavaScript function called “onUserDisconnect()” and returns to the login page.

Remove the Connect to a remote PC tab from the Web Access navigation bar
In previous versions of RD Web Access you’d have to edit the Web Access files. That’s no longer needed.

On the RD Web Access server open Internet Information Services Manager (IIS Manager).

Expand the tree on the left and click Pages, then double-click Application Settings and select ShowDesktops. Notice its value is “true” by default and click Edit to change it to “false”. This change is immediate, without the need to restart IIS.

Refresh or open the Web Access page, make sure you’re logged in and check the navigation bar:

Changing ShowDesktops to false not only removed the Connect to a remote PC tab, but also the divider between the two tabs.
Change ShowDesktops back to true because we’ll need it to be true further down this post.

Adding an extra tab on the Web Access navigation bar
So, we can remove a tab. Can we add another tab? Sure, but it’s not as simple as flipping a switch in the Application Settings.
I am going to add an extra tab called “Custom Tab” which, upon clicking, opens “Custom.aspx”.
The tab definitions are embedded in the Web Access pages, so we need to customize each page that is accessible through the tabs. Luckily we’ll only need to modify two pages at this stage: “Default.aspx” and “Desktops.aspx”.
Open “Default.aspx”.

Insert an extra line before line 18:

I’ve highlighted the extra line in the screenshot above. Important thing here is not to change anything, make sure you’re adding a line, not overwriting an existing one.
Adding this line tells the code what name to display on the tab.

Move to line 278 and insert another line:

Again, in the screenshot above I’ve highlighted the line that needs to be added.
This change adds a piece of code that defines the extra tab. You can see the href is “Custom.aspx” and the text this tab will display is defined by L_CustomTab_Text, the line we added in the first change.
Save the file.

To apply these changes to “Desktops.aspx” add the same two changes, but this time insert the first change on line 20 and insert the second change on line 234 and save that file as well. Of course, if you decide to hide the “Connect to a Remote PC” tab you don’t need to apply those changes to “Desktops.aspx”.

As for the “Custom.aspx”, I’ve created a template based on “Desktops.aspx”, stripped of all code that is necessary for that page, and simply added the text “Custom Page Example”. You can download this template here if you wish and build your own custom pages from that. Place your “Custom.aspx” or whatever you named it in %windir%\web\rdweb\pages\<language-code>.

Reload the Web Access interface and make sure you’re logged in:

How cool is that? We now have a Custom Tab tab on the navigation bar. As a bonus, the default code even adds a divider, we didn’t have to do anything extra to accomplish that.

Clicking it will open the “Custom.aspx” file:

Customizing the “Help” link
Clicking the link pops up a new window which by default shows the content from http://go.microsoft.com/fwlink/?LinkId=141038.
You can switch this to a local file, which is located on your RD Web Access server.
I showed how to do this in detail in the first post in this series, so I’ll be lazy here and tell you that you need to change the LocalHelp Application Setting on the Pages application in IIS Manager on the RD Web Access server.
After changing this setting the help popup window shows the contents of the rap-help.htm file.
You can customize this file if you want or your can edit the page to point to a different local file or link.

To customize the external link or local help file you need to edit the “Default.aspx” file.
The logic for defining the help pages starts on line 152:

Change line 153 (“./rap-help.htm”) if you want to use a different local file to show your users, and change line 155 (“http://go.microsoft.com/fwlink/?LinkId=141038&#8221;) if you want to use a different external URL.
Of course, save your changes.
Note: these Help entries are specific to the main page. The login page has a Help link as well and this was addressed in the first post in this series. This means that you could specify different Help content for the login page and the main page if you wish.
Note: if you change the Help entries in the “Default.aspx” file, you may want to make the same changes in the “Desktop.aspx” file to keep them the same in all the main pages, if you’re not hiding the “Connect to a Remote PC” tab.

 

Remove the Help link from the navigation Bar
If you want to hide the Help link on the navigation bar you need to edit %windir%\web\rdweb\pages\site.xsl.

Go to line 311:

Change this line to look like this:

Change line 315 to look like this:

Change line 317 to look like this:

And change line 319 to look like this:

The result of these two changes should look like this:

This piece of code shows line 310 to 320 and reflects the changes that need to be made. These changes turn the code to display the Help link and the divider both into a comment and thus hidden.
Save the file.

Refresh or open the Web Access page and you’ll see the Help link and the divider are gone.

Adding an extra link to navigation bar
So we just hid the Help link. Can we add our own links here? Yes we can!
Open %windir%\web\rdweb\pages\site.xsl.
Copy this piece of code:

       <td>
             <a href="https://outlook.com" target="_new">
               WebMail
             </a>
       </td>
       <td width="15"> </td>
       <td class="dividerInNavigationBar">|</td>
       <td width="15"> </td>

And insert it just before line 311, the same line we changed first to get rid of the Help link.
The result will look like this:

That is including the changes we made to hide the Help link.
The new code adds a hyperlink to https://outlook.com, displays “WebMail” on the Navigation bar, and adds a divider.
Save the file.

Refresh the Web Access interface and make sure you’re logged on:

And there’s our new link! Clicking it will open (in my case) a new tab in my browser to Outlook.com.
This is but a simple example. If you want to have a popup like the Help link has, you need to copy the JavaScript function and be sure to call it from the site.xsl.

Removing the bread crumbs trail
I still have to figure out what the added value of the bread crumbs section is on “Default.aspx”.

Since the RD Web Access’s folder structure is limited to one level, and doesn’t support subfolders, I see no use for it whatsoever.
Especially if you’re publishing Desktops only, or when you’re not using folders at all. It’s just always there:

Even if we do click a folder, the crumbs are not turned into hyperlinks and we have to click the “Up” icon to go back:

What if we could strip the “Current folder: /” static text? We’d have a cleaner main page, and if we do decide to use folders and go into one of those folder it would just show a text label with the name of the folder we’re in. Much cleaner.

Open %windir%\web\rdweb\pages\site.xsl.
If you edited this file along in this post, you’ll need to go to line 537, if not, the original line number is 529.
Anyway, you’ll need to edit the highlighted line:

This line is responsible for 2 things: It will display the static text “Current folder: ” and it will add the current path, including the leading “/”.
So I modified the code to not display the static text and to strip the leading “/” from the current folder path. I also added some ASCII to keep the spacing intact when we’re on the main page.
Modify the code so it looks like this:

Note that I’ve turned wordwrap on. All code should actually be on one line. To make this a little easier, here’s the code in plain text so you can copy & paste it:

<div class="tswa_CurrentFolderLabel"><span><xsl:attribute name='id'><xsl:value-of select="$feedidprefix"/>CurrentFolderPath</xsl:attribute><xsl:value-of select="substring-after(appfeed:Publisher[1]/@DisplayFolder, '/')"/> </span></div>

Refresh the Web Access page and make sure you’re logged on:

Voila, no more useless information.

And of course, clicking a folder shows just the folder name on the folder’s page.

There’s just one thing left to customize on this page and that is custom icons for the published apps and published desktops, including resizing them. This takes a lot of customizing and I will address this in a separate post.

So far for customizing the main page. Everything that’s customizable without adding new functionality or without touching “Branding” is now explained.

In the next post in the series I will focus on customizing the Connect to a Remote PC page. In the post after that one I will focus on Branding the entire Web Access interface.

Arjan

About Arjan Mensch

30+ years experience in Microsoft powered environments. Enjoy automating stuff using powershell. In my free time (hah! as if there is any) I used to hunt achievements and gamerscore on anything Xbox Live enabled (Windows Mobile, Windows 8, Windows 10, Xbox 360 and Xbox One). Recently I picked up my Lego addiction again.

‹ Step by Step Customizing RD Web Access 2012 R2 – Part 1

Step by Step Windows 2012 R2 Remote Desktop Services – Part 4 ›

Tagged with: Customizing, RD Web Access, Windows 2012 R2
Posted in Customize, Remote Desktop, Step-by-Step guide