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.
- Log out of 1ETRNAP and log in as 1ETRN\Appinstaller
- Launch the Shopping portal in IE
- Select the Administration tab in the navigation panel and click Home to view the application tiles
- 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)
- Click the +Add New Tab link and enter Product Details as the Tab Title and select Text as the Content Type
- In the large unlabelled field (tab body), enter any text you want to display when the user selects this tab and click Save
- Switch to the Self Service tab to see how the new tab would appear to a standard user
- Switch back to the Administration tab and click +Add New Tab
- Enter Version History for the title and leave the content type as text
- Enter the following text in the tab body and click Save
- 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
- Switch back to the Administration tab and modify the text in the tab body as shown below, then click Save
- Switch back to the Self Service tab and observe the results
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
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
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.
- 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
- Browse to 1ESHO04-55 Course Content\MiscFiles\SalesAppImages\SalesApp1.png. Click Save
- Switch to the Self Service tab, and click on the Pictures tab. Note the picture displayed
- Return to the Administration view and select the Pictures tab and repeat the process to browse for and add SalesApp2.png and SalesApp3.png
- 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).
- Navigate to the Self Service Home page, and note the Savings so far section at the bottom of the navigation pane
- Open the Shopping Admin Console and select the Settings node
- Scroll down to the Web Application group of settings
- Select Show Savings To Date and change the value to False and click Save (at the top of the page)
- Close and reopen Internet Explorer and go to the Shopping portal Self Service home page
- 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.
- In the shopping portal under the Self Service tab, observe the application tiles available on the Home page
- Select the Administration tab in the navigation page and click Manage Featured Items
- 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
- 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
- Repeat this process to add 1ETRN Test App Set,PowerGUI and Project 2010 to the Sequence list, then click SAVE
- Log in as 1ETRN\User and launch the shopping website. Note that now only PowerGUI and Project 2010 appear
Changing the 1E logo
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.
- 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
- On 1ETRNAP, open the following file in Notepad C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\Views\Shared_LayoutBase.cshtml
- Locate the sections of the file that defines the logo by searching for logo.png
- Modify the image source in _LayoutBase.html replacing logo.png with ACMEpic.png in both locations
- Save the file
- Refresh the browser and observe the changed logo. This will remain constant through all the Shopping pages
Changing the Shopping Title
- On 1ETRNAP, open Shopping Admin Console, go to the Settings node
- Go to the Web Application section and note that the Application Name is currently Shopping
- Click on Shopping, change it to ACME AppStore and hit Enter
- Click the Save button at the top of the Settings page
- 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.
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.
- Open Windows Explorer and browse to C:\ProgramFiles (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources
- 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
- 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
- Replace 1E Shopping Email with ACME AppStore Notification and save the file
- Open the modified Header.html in Internet Explorer to confirm the changes
- 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.
- 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
- Open Mail-InstalledApp-Shopper.xslt in Notepad
- Locate the <title> section (shown below). This defines the subject line of the email
- Locate the <style> section directly below the <title> section. This defines the body and h3 text styles
- Change the font-family from Verdana to Calibri, and change the font size to 11pt
- Within the h3 style definition, add color:blue; after font-size:1.3em;
- The <style> section should now resemble the following
- Locate where the email body starts in the <body> section
- Note that the first item is %%HEADERTEMPLATE%%. This is substituted with the Header.html you modified in the previous task
- 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
- The main body of the message then continues with the following paragraph
- The opening text in this paragraph can be simplified. Replace The ConfigMgr Application with The Application
- 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
- Note at the end of the file %%FOOTERTEMPLATE%% is inserted, which is Footer.html observed in the previous task
- 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.
In this task, you will use the tool to preview the changes you made to Mail-InstalledApp-Shopper.xslt.
- 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
- Open C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\XSLTTest\XsltTest.exe.config in Notepad
- In the <appSettings> section of the file, locate the BasePath key and ensure the value reads as follows:
- Locate the ConnectionString key and ensure the value reads as follows
- 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
- Locate the UserAccount key and change the value to "1ETRN\user"
- Save and close XsltTest.exe.config
- Launch the XSLT Tool by double-clicking XSLTTest.exe from C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\XLSTTest
- From the Email Template drop-down, select Mail-InstalledApp-Shopper and click GO
- Select the Email Body tab in the main area of the tool's interface to view the preview
- 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
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 de, es, fr, 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.
- 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
- Open ShoppingWebStrings.resx in Notepad and search for <value>Request</value>. The complete definition of this string is as follows
- Replace the word Request between the <value> tags with text of your choice (Get It! perhaps)
- Save and close ShoppingWebStrings.resx
- From a command prompt, run iisreset
- 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
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
- On 1ETRNAP, open the following folder, which contains all the help pages C:\Program Files (x86)\1E\Shopping\WebSite\ShoppingAPI\GlobalResources\Help
- 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
- 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.
- 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
- 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
- Open C:\Program Files (x86)\1E\Shopping\WebSite\Shopping\HelpImages and create a folder named MyHelpPage
- Download and copy 1ESHO04-55 Course Content\ShoppingIcons\ACMEPic.png to the new MyHelpPage folder you just created
- 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)
- Identify the existing links (starting a href"helpdefault.aspx
- At the end of the links, copy the following
- Save Help.html
- 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
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.