Exercise Overview:

Customizing Shopping

Interaction between Shopping and end users is primarily through the Shopping portal and through the notification emails that are sent to users, approvers and license managers. It is important that these points of interaction can be customized to allow branding and other customer-specific information to be displayed.

In this lab, you will look at the options for customizing the way Applications are displayed to end users in the portal, modifying emails that are generated by Shopping and applying some basic branding to the portal.

Adding custom tabs to Applications

Application tiles in the Shopping portal contain a More Info link. Clicking this will display the Application details on a larger 'banner'. It is possible to add custom tabs to this view for individual Applications to provide additional information about the application. In this exercise, you will learn how to add text and image tabs to an application using the Administrator tools in the Shopping portal.

Add a text tab to an Application

In this task, you will add a tab to the Sales Application that provides the user with some additional information about the application.

1ETRNAP

  1. Log out of 1ETRNAP and log in as 1ETRN\Appinstaller
  2. AppInstaller is a shopping admin and also has access to the S drive, which we'll need for these tasks.
  3. Launch the Shopping portal in IE
  4. Select the Administration tab in the navigation panel and click Home to view the application tiles
  5. Locate the Sales Application tile and click More Info to open the Sales Application details. As you selected the Administration tab in the navigation panel, when you view the application details you get the additional +Add New Tab link (click the Self Service tab to see that link disappear and then reappear when you go back to the Administration tab)
  6. Click the +Add New Tab link and enter Product Details as the Tab Title and select Text as the Content Type
  7. In the large unlabelled field (tab body), enter any text you want to display when the user selects this tab and click Save

  8. You can add plain text or use standard HTML tags to add formatting to the text.
  9. Switch to the Self Service tab to see how the new tab would appear to a standard user
  10. Switch back to the Administration tab and click +Add New Tab
  11. Enter Version History for the title and leave the content type as text
  12. Enter the following text in the tab body and click Save
  13. Sales Application Version History
    v2.9.13 - Current supported version – includes several minor bug fixes
    v2.9.07 - Added alternate email field for contacts
    v2.9.00 - Added support for Windows 8.1
    v2.8.xx and lower – No longer supported
    This text is available in the Text.txt file in 1ESHO04-55 Course Content\MiscFiles folder accessed via the SkyTap Shared Drive shortcut on the desktop.
  14. Switch to the Self Service tab and view the Version History tab. Note how the text is all displayed as a single line wrapped to fit the page
  15. Switch back to the Administration tab and modify the text in the tab body as shown below, then click Save
  16. Sales Application Version History<br>
    <br>
    v2.9.13 - Current supported version – includes several minor bug fixes<br>
    v2.9.07 - Added alternate email field for contacts<br>
    v2.9.00 - Added support for Windows 8.1<br>
    v2.8.xx and lower – No longer supported
  17. Switch back to the Self Service tab and observe the results
  18. Adding the HTML tag <br> (line break) caused the text to be displayed as intended.

Add a Picture Gallery tab

In some cases, you may want to use one or more images to provide additional information about the application (perhaps if the Application were a piece of hardware as in the case of the Samsung monitor). In this task, you will use a Picture Gallery tab to add more information to the Sales Application.

1ETRNAP

  1. Follow the process in the previous task to add a new tab to the Sales Application, but set the Tab Title to Pictures and select Picture Gallery as the type. This will display the Browse button to allow you to browse for images
  2. Browse to 1ESHO04-55 Course Content\MiscFiles\SalesAppImages\SalesApp1.png. Click Save
  3. Switch to the Self Service tab, and click on the Pictures tab. Note the picture displayed
  4. Return to the Administration view and select the Pictures tab and repeat the process to browse for and add SalesApp2.png and SalesApp3.png
  5. Note that Shopping will resize the images you select to fit the square placeholder, so if your images are not square they will appear stretched or squashed.
  6. Switch to the Self Service tab to see how the new tab would appear to a standard user

Customizing the Home page

In this exercise, you will learn how to customize what the user sees on the home page in the portal.

Hide Savings so far

By default, under the heading, Savings so far in the navigation panel Shopping displays the number of requests processed since Shopping was implemented and the associated cost (money and time).

Savings so far are calculated by multiplying the number of requests by the Help Desk Cost and Help Desk Time values in the Web Applications settings (in the Settings node of the Shopping admin console. By default, these values are 40 and 30 respectively.
In this task, you will disable the Savings so far from being displayed.

1ETRNAP

  1. Navigate to the Self Service Home page, and note the Savings so far section at the bottom of the navigation pane
  2. Open the Shopping Admin Console and select the Settings node
  3. Scroll down to the Web Application group of settings
  4. Select Show Savings To Date and change the value to False and click Save (at the top of the page)
  5. Close and reopen Internet Explorer and go to the Shopping portal Self Service home page
  6. Note the Savings sofar no longer appears

Using Featured Items

By default, the home page show all Applications listed alphabetically. It is possible for an administrator to define up to 20 specific applications to be displayed in a specific order using Featured Items. In this task, you will define specific applications in your chosen order.

1ETRNAP

  1. In the shopping portal under the Self Service tab, observe the application tiles available on the Home page
  2. Select the Administration tab in the navigation page and click Manage Featured Items
  3. Note that by default Featured Items is not enabled (which means all Applications are shown on the home page). Check the Enable displaying featured item sequence on homepage box to enable Featured Items
  4. Use the Search Applications box to search for the Sales Application. The search results appear in the Available applications list. Select Sales Application in this list and click > to add it to the Sequence list
  5. Repeat this process to add 1ETRN Test App Set,PowerGUI and Project 2010 to the Sequence list, then click SAVE

1ETRNW71
  1. Log in as 1ETRN\User and launch the shopping website. Note that now only PowerGUI and Project 2010 appear
  2. The user can of course search or browse for other Applications, or simply click on the User Categories. Featured Items simply controls which applications they see on the home page
    The Sales Application remains hidden from this user as they do not have permissions on the Sales Tools User Category. The App Set is not visible to users as it is only available for Shopping Admins and it will appear as a featured item when the Shopping Admins access the portal. If you launch the Shopping portal on 1ETRNAP, you will see the App Set.

A common request is to change the 1E logo and title that appears at the top of every page. The layout of common areas of the pages in Shopping is defined in _LayoutBase.cshtml located in C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Views\Shared. In this task, you will change the logo.

1ETRNAP

  1. Copy 1ESHO04-55 Course Content\ShoppingIcons\ACMEpic.png via the SkyTap Shared Drive shortcut on the desktop to the Images folder C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Assets\Uploads\Images
  2. On 1ETRNAP, open the following file in Notepad C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Views\Shared_LayoutBase.cshtml
  3. Locate the sections of the file that defines the logo by searching for logo.png
  4. Modify the image source in _LayoutBase.html replacing logo.png with ACMEpic.png in both locations
  5. Save the file
  6. Refresh the browser and observe the changed logo. This will remain constant through all the Shopping pages
  7. Alternatively, you may rename the logo.png file in C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Assets\Uploads\Images to logo.png.1e (to save the original) and then rename ACMEpic.png to logo.png.

Changing the Shopping Title

1ETRNAP

  1. On 1ETRNAP, open Shopping Admin Console, go to the Settings node
  2. Go to the Web Application section and note that the Application Name is currently Shopping
  3. Click on Shopping, change it to ACME AppStore and hit Enter
  4. Click the Save button at the top of the Settings page
  5. Close and reopen the browser and go to http://appstore and see that the page title has changed from *Shopping to ACME AppStore

Customizing email notifications

In this exercise, you will learn how to modify the email templates for the different notification emails generated by Shopping. All email templates are located in the GlobalResources folder, which is in C:\ProgramFiles (x86)\1E\Shopping\WebSite\ShoppingAPI.

This folder also includes folders for emails in alternative languages (German, Spanish, French, Italian and Portuguese are supplied with the product). You will learn more about language support shortly.

Modify the email body header and footer

All Shopping emails include a header and footer defined in Header.html and Footer.html respectively in the GlobalResources folder. In this task, you will make a simple change to the header.

1ETRNAP

  1. Open Windows Explorer and browse to C:\ProgramFiles (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources
  2. Make a backup copy of Header.html and rename the copy to Header.html.1E to identify it as the original file supplied by 1E

  3. Always make a backup copy of the original file before making changes to any of the xslt, html or css files, just in case you need to revert to the original at a later stage.
  4. Open Header.html in Notepad. This contains just one simple line. This defines the text (and style of that text) that appears at the top of the email, and a horizontal line (<hr/>) underneath to separate the header from the body of the email
  5. <h2>1E Shopping Email</h2><hr/>
  6. Replace 1E Shopping Email with ACME AppStore Notification and save the file
  7. Open the modified Header.html in Internet Explorer to confirm the changes
  8. Open Footer.html in Notepad. Note that the default footer is simply a hyperlink to the 1E web site. Change it to something different and save the file

Modify the 'Application Successfully Installed' email template

In this task, you will modify the body text in the Application Successfully Installed email template.

1ETRNAP

  1. In the GlobalResources folder used in the previous task, make a copy of Mail-InstalledApp-Shopper.xslt and rename the copy to Mail-InstalledApp-Shopper.xslt.1E to identify it as the original installed file
  2. Open Mail-InstalledApp-Shopper.xslt in Notepad
  3. Locate the <title> section (shown below). This defines the subject line of the email

  4. <title>
         <xsl:choose>
              <xsl:when test="$AppInstall=1">
                   Application Successfully Installed
              </xsl:when>
              <xsl:otherwise>
                   Application Successfully Uninstalled
             </xsl:otherwise>
         </xsl:choose>
    </title>
    
  5. Locate the <style> section directly below the <title> section. This defines the body and h3 text styles
  6. <style>
         body {
                font-family: Verdana; font-size: 10pt;
         }
         h3 {
                font-size: 1.3em;
         }
    </style>
  7. Change the font-family from Verdana to Calibri, and change the font size to 11pt
  8. Within the h3 style definition, add color:blue; after font-size:1.3em;
  9. The <style> section should now resemble the following
  10. <style>
         body {
              font-family: Calibri; font-size: 11pt;
         }
         h3 {
              font-size: 1.3em; color: blue;
        }
    </style>
  11. Locate where the email body starts in the <body> section
  12. Note that the first item is %%HEADERTEMPLATE%%. This is substituted with the Header.html you modified in the previous task
  13. Below the header is a conditional block that displays either Application Successfully Installed or Application Successfully Uninstalled depending on the value of the $AppInstall. Note that this text is in the h3 style
  14. The main body of the message then continues with the following paragraph

  15. <p>
         The ConfigMgr Application <xsl:value-of select="/ShoppingParameters/@APPLICATION" />
         <xsl:choose>
              <xsl:when test="$AppInstall=1">
                   was successfully installed on
              </xsl:when>
              <xsl:otherwise>
                   was successfully uninstalled from
              </xsl:otherwise>
         </xsl:choose>
         <xsl:value-of select="/ShoppingParameters/@MACHINENAME" /> for 
         <xsl:value-of select="/ShoppingParameters/@TARGETUSEREACCOUNT" />
    </p>


    Note the use of the @APPLICATION, @MACHINENAME and @TARGETUSEREACCOUNT parameters, which will be substituted with the order-specific values from Shopping at the time.
  16. The opening text in this paragraph can be simplified. Replace The ConfigMgr Application with The Application
  17. The remaining paragraphs add several other parameters from the Shopping order to the email. To simplify the email (bearing in mind this is sent to an end user), you can remove unwanted paragraphs by commenting them out (using the<!- and -> tags). The following example shows the code that displays the Install Date in UTC commented out

  18. <!--
         <xsl:variable name="InstallDateUtc" select="/ShoppingParameters/@INSTALLDATEUTC" />
              <xsl:if test='$InstallDateUtc != ""'>
                   <p>
                        Install Date (UTC): <xsl:value-of select="$InstallDateUtc" />
                   </p>
              </xsl:if>
    -->
  19. Note at the end of the file %%FOOTERTEMPLATE%% is inserted, which is Footer.html observed in the previous task
  20. Save the file with the changes made

Using the XsltTest tool to preview customized templates

Within the Shopping product, the only way to check a modified email template is to process an order that will generate the email associated with the modified template and review the resulting email when it is generated. Fortunately, the 1E engineering team have developed a test tool that enables the xslt files to be previewed.

This tool is provided on the training course content source for your own use but is not supported by 1E.

In this task, you will use the tool to preview the changes you made to Mail-InstalledApp-Shopper.xslt.

1ETRNAP

  1. On 1ETRNAP, copy the 1ESHO04-55 Course Content\XSLTTest folder via the SkyTap Shared Drive shortcut on the desktop to C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI
  2. Open C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\XSLTTest\XsltTest.exe.config in Notepad
  3. In the <appSettings> section of the file, locate the BasePath key and ensure the value reads as follows:
  4. "C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI"
    The BasePath defines the full path to the ShoppingAPI folder on the local server.
  5. Locate the ConnectionString key and ensure the value reads as follows
  6. "Server=(local);Database=Shopping2;Trusted_Connection=yes;MultipleActiveResultSets=True"
    If you are working in an environment with remote SQL, you will need to specify the SQL Server name in this ConnectionString.
  7. Locate the OutputPath key and ensure the value reads as follows. This is the location where the tool will generate the resultant email in HTML format

  8. "C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\XSLTTest\Output.html"
  9. Locate the UserAccount key and change the value to "1ETRN\user"

  10. The UserAccount just needs to reference a valid Shopping user. The tool will use this user's language preference to generate the email.
  11. Save and close XsltTest.exe.config
  12. Launch the XSLT Tool by double-clicking XSLTTest.exe from C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\XLSTTest
  13. From the Email Template drop-down, select Mail-InstalledApp-Shopper and click GO
  14. Select the Email Body tab in the main area of the tool's interface to view the preview
  15. Note that the header and font have changed, the heading is now blue, the opening text has changed and the Install Date (UTC) is no longer shown, reflecting the changes you made to the email template
  16. You can compare it with any of the previous Application Successfully Installed emails in User's email inbox).

Using different language

Shopping uses a resource file (ShoppingWebStrings.resx) to define text strings that appear throughout the Shopping portal. The default locale version of this file is located in C:\Program Files (x86)\1E\Shopping\Website\ShoppingAPI\GlobalResources. German, Spanish, French, Italian and Portuguese versions are provided with Shopping in the deesfr, it and pt subfolders of GlobalResources.

This approach not only makes it straightforward to make the portal available in different languages, it also allows the default text to be customized. In this exercise, you will learn how to change almost any text that appears throughout the Shopping site.

Modify default text strings

In this task, you will modify the string REQUEST that appears on the button when you hover over an Application tile.

1ETRNAP

  1. On 1ETRNAP open the C:\Program Files (x86)\1E\Shopping\Website\ShoppingAPI \GlobalResources folder and make a backup copy of ShoppingWebStrings.resx named ShoppingWebStrings.resx.1E
  2. Open ShoppingWebStrings.resx in Notepad and search for <value>Request</value>. The complete definition of this string is as follows
  3. <data name="Request" xml:space="preserve">
         <value>Request</value>
    </data>


    The best way to identify which string to change is to search for the string value as it appears in the Shopping page.
  4. Replace the word Request between the <value> tags with text of your choice (Get It! perhaps)
  5. Save and close ShoppingWebStrings.resx
  6. From a command prompt, run iisreset

  7. Changes to ShoppingWebStrings.resx will not take effect until IIS is restarted.
  8. Open the Shopping portal (Self Service tab) and observe the text on the button of any given application that hasn't been shopped for yet
  9. Note the Request text is changed to whatever you inputted in the .resx file.

Customizing end-user help

Most customers will want to customize the help pages that are presented to users when they click the Help link in the navigation panel.

Editing default help files

1ETRNAP

  1. On 1ETRNAP, open the following folder, which contains all the help pages C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources\Help
  2. Open Help.html in Notepad and within the <body> section add a heading as shown below at line 7. You can modify the text in the main paragraph and add additional paragraphs and headings if you like. Save the file when you are done

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <!--<link rel="stylesheet" type="text/css" href="%SHOPPINGCSS%" />-->
    </head>
    <body>
         <h1>ACME AppStore Help</h1>
    <p>In these pages you can find out how to use Shopping from a Shopper's point of view. Just click on a link below to find out more about how to perform a particular task.</p>
  4. Open the Shopping portal and click on the Help link at the bottom of the navigation panel. Observe the changes you made to the Help home page

Adding a help page

In this task, you will add a new page (prepared for you) with an image and add a link to the Help Home page.

1ETRNAP

  1. Dowload and copy 1ESHO04-55 Course Content\MiscFiles\MyHelpPage.html via the SkyTap Shared Drive shortcut on the desktop to the Help pages folder C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources\Help, then open the copied filed in Notepad
  2. The page contains some basic HTML with a table that includes an image. Note the source for this image is HelpImages/MyHelpPage/ACMEPic.png, which you will now copy to the defined location
  3. Open C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\HelpImages and create a folder named MyHelpPage
  4. Download and copy 1ESHO04-55 Course Content\ShoppingIcons\ACMEPic.png to the new MyHelpPage folder you just created
  5. You will now add a link to this new help page on the Home page. Open Help.html in the Help folder (Shopping\WebSite\ShoppingAPI\GlobalResources\Help)
  6. Identify the existing links (starting   a href"helpdefault.aspx
  7. At the end of the links, copy the following

  8.   <a href="helpdefault.aspx?HelpPage=MyHelpPage">See my new page</a><br/>
  9. Save Help.html
  10. Open the Shopping portal in the browser and go to the Help home page. The link to your new page should appear below the standard links. Click the link to open your added page. Confirm that the image is displayed correctly

Lab Summary

In this lab, you have explored the various methods available for customizing what users see of the Shopping application, both in the portal and through emails. The customizations made in this lab were basic, but you should now have an idea of the process involved with any more complex customizations.