Microsoft Dynamics Retail Conference 2014
E-Commerce
Hands-on Lab Manual
Feb 6-7, 2014
Hyatt Residency Bellevue
Conditions and Terms of Use
This training material contains Microsoft Confidential Information and is provided for informational and training
purposes only. It represents Microsoft’s view as of the training date. Microsoft cannot guarantee the accuracy of any
information after the training. Because Microsoft must respond to changing market conditions, it should not be
interpreted as a commitment on Microsoft’s part. This training material is provided “as-is”.
Microsoft Dynamics AX 2012 R3 is pre-release software under development. All dates, features, and descriptions
specified are preliminary, are based on current expectations, and are subject to change at any time without notice.
Sample code included in this training is made available AS IS. THE ENTIRE RISK OF THE USE OR THE RESULTS FROM
THE USE OF ANY SAMPLE CODE REMAINS WITH THE USER.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
TRAINING MATERIAL. NO LICENSE (EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE) TO ANY
INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS TRAINING.
© 2014 Microsoft Corporation. All rights reserved.
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
1
Contents
Objective of this lab ................................................................................................................................... 3
Exercise 1: Online store design elements ................................................................................................ 4
Exercise 2: Improve search results for the Contoso tablet .................................................................... 9
Exercise 3: Extending customer to enable email .................................................................................. 15
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
2
Objective of this lab
In this lab you will learn how to customize the out of the box online store with the focus on the
following features:
 SharePoint 2013 Site Designer
 Query rules
 Out of the box online store customization
Overall Scenario
The out of the box online store is meant to be a starter platform for customizations that are
required for specific retail scenarios. We will review the various concepts to continue with
extending the customer object to expose the required fields. In addition we will work on specific
exercises to better understand the SharePoint platform.
Overall Goals
At the end of this lab, you should be able to understand how to customize the online store.
To complete this lab you will be using the VM provided to you.
Login: contoso\admin
Password: pass@word1
Estimated time to complete this lab: 60 mins
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
3
Exercise 1: Online store design elements
Scenario
You have the out of the box online store up and running. Seasonally you want to alter the basic
look and feel of the online store. This scenario will walk through the various design elements that
can be controlled in an online store.
Goal
At the end of this exercise, you will know the basic elements on the online store that control look
and feel.
Task Overview
1. Controlling the desktop and mobile master page
2. Controlling navigation
3. Managing images
Tasks
Task
1.
Detailed Steps
Controlling the desktop and mobile master page
• All page editing functionality should be done using windows authentication – port
40003 (for Contoso) and 50003 (for Fabrikam). Browse to
http://ax2012r2a:40003/sites/retailpublishingportal
• Select sign in from the top. The top nav should indicate that “System account” is
signed in.
•
Select the gear control on the right side, right click and select Site Settings
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
4

Review the various areas on this page and select “Master Page” under “Look
and feel”

Review the master page templates available for the default master page. You
can add new templates to become available here. This can be used for seasonal
display.
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
5


2.
Select the Mobile master page drop down to review the pages available for
mobile. This controls the mobile master page.
Go back to the Site settings page. Select device channels. See this user agent
strings defined here. Using other strings such as “iphone” or “android” defines
the other channels. The mobile device channel is defined under device
channels
Controlling navigation and refinements
 Go to the site settings page for fabrikam belowhttp://ax2012r2a:50003/sites/RetailPublishingPortal/_layouts/15/settings.aspx

Select Term store under Site Administration .This controls the terms store
navigation for this publishing site. All publishing site changes related to this site
are done here.

Expand site navigation under 50002 and expand to select “Fashion Accessories”.
On the right hand side look at the tab called “Term driven pages”.
Note how the “category landing page” specifies the actual landing page.

Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
6

Select the custom properties. See the Nav_image property – This defines the image
shown on the category hover.

Expand the Fashion accessories and select Handbags. Select the custom property
and view the image value and columnIndex and insideColumnIndex. This controls
the image and location of the image in the category landing page. These values
are set and controlled from AX. You can review this by looking at the category
attributes in the “Fashion navigation hierarchy”
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
7
3.
Managing rich content
 Images are managed in the hive and can be located below. The relative path is
setup as references in the AX product data.
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
8
Exercise 2: Improve search results for the Contoso
tablet
Scenario
Search is very important for an online store. You are a Business manager and want to improve
the chances of showing Contoso tablets for all other competitor brands. So you are looking to
editorially control search to returns tablets from the Contoso electronics store. In addition
include a banner of contoso tablets for the search result.
Goal
At the end of this exercise, you should have a good understanding of how search forms the
basis of the Dynamics E-Commerce solution. You will get a better understanding of editorial and
business rules controlling search.
Task Overview
1. Set up a tablet alias query rule with a promoted result
2. Include a content search web part with the right settings
3. Test the scenario
Tasks
Task
1.
Detailed Steps
Set up a tablet alias query rule with a promoted result
• Go to http://ax2012r2a:40003/sites/RetailPublishingPortal/_layouts/15/settings.aspx
• Under “Site collection administration” select “Search Query Rules”
• In the drop down “Select a Result Source” select “Default”
• Select New Query Rule
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
9
•
•
•
Provide the name “Tablet alias”
Under Query conditions – Query Matches Keyword Exactly
Specify “ipad; kindle”
Select Add promoted result
a) Provide a title like “Cameras on Sale!”
b) Specify the following URL http://ax2012r2a:40002/sites/RetailPublishingPortal/PublishingImages/c
ontoso/banners/search_promo_tablets.png?width=396&height=150
c) Select the check box “Render the URL as a banner instead of as a hyperlink”
and close the prompt.
d) Select Save
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
10
•
Select “Add result block”
a) Specify “tablet” in Configure Query
b) Select “Ok”
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
11
2.
•
•
•
•
•
•
•
Save query rule
Go to http://ax2012r2a:40003/sites/retailpublishingportal
Enter ipad in the search box
Select “sign in”
Select the gear icon on the right top side.
Select edit page.
Now Add a content search web part to the “ Search gallery page”
•
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
12
•
Setup the properties of the webpart.
a) In the Web Part, click the Content Search Web Part Menu arrow, and then
click Edit Web Part.
b) In the Web Part tool pane, in the Properties section, expand the Settings
section.
c) In the Settings section, in the Result Table list, select SpecialTermResults.
d) Also set the control template to “List” and item template to “Best bet item”
e) Select “Change Query and select “Default” as the result source.
f) Save the page
Setup image rendition (optional step – this resizes the image as required)
 Go to
http://ax2012r2a:40003/sites/RetailPublishingPortal/_layouts/15/settings.aspx
 Select image renditions under “Look and Feel”
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
13

Select new – specify banner and say width = 396 and height = 150.
Test the scenario
• Wait a couple minutes for the query rule to be picked up.
• Go to http://ax2012r2a:40002/sites/retailpublishingportal
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
14
•
•
Search for “ipad”
View the banner and results from tablet
For more information on this topic, please refer to the following link:
http://technet.microsoft.com/en-us/library/jj871014.aspx
Exercise 3: Extending customer to enable email
Scenario
As the wed developer on the project, you are extending the customer account to enable a check
box that the customer can use to specify whether they want to opt-in for an Email to get more
marketing information. The change is made in both the “Account read only form” and “Edit
Profile” page to read and change email options.
Goal
At the end of this exercise, you should understand the various classes and architecture of the
online store to make further customizations. The architecture is based on a standard modelview-controller pattern.
Task Overview



Service changes
Controller changes
View changes
Tasks
Task
1.
Detailed Steps
- Open Storefront.sln located at c:\users\admin\documents\Retail SDK\Online
Channel\Storefront
Service changes
 Define a property for the new field. Open file SharePoint.Web.Services. Folder
ViewModel. Edit file customer.cs and add the following.
///HOL Code
/// <summary>
/// Gets or sets the boolean value indicating whether the customer has opted
for email offers
/// </summary>
[DataMember]
public bool EmailOptIn { get; set; }
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
15


Open file Services/ObjectModel/CustomerMapper.cs.
Copy these lines
bool emailOptIn = false; /// HOL Code
var emailOptInExtensionProperty = customer.ExtensionProperties.Where(c
=> c.Key == "EMAILOPTIN").FirstOrDefault();
if (emailOptInExtensionProperty != null)
{
int intEmailOptIn =
(int)emailOptInExtensionProperty.Value.GetPropertyValue(); // HOL Code
emailOptIn = intEmailOptIn == 0 ? false : true;
}

Copy this line in the location below.
EmailOptIn = emailOptIn // HOL Code
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
16

Copy this line to the method UpdateDataModel
dataModelCustomer["EMAILOPTIN"]
///HOL Code

=
Convert.ToInt64(customer.EmailOptIn);
Update file Customer.js. Add the following lines in “updateCustomer” function.
// HOL Code
if ($view.find('.msax-EmailOptInCheckBox').is(':checked')) {
customer.EmailOptIn = true;
}
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
17
else {
customer.EmailOptIn = false;
}

Search for file CustomerDisplay.js in the solution explorer. Add this code in
function “Initialize”
// HOL Code
if (customer.EmailOptIn) {
$view.find('.msax-EmailOptInCheckBox').prop('checked', true);
}
else {
$view.find('.msax-EmailOptInCheckBox').prop('checked', false);
}
$view.find('.msax-EmailOptInCheckBox').attr("disabled", true);
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
18
2.
Controller changes
 Search for file Customer.cs under SharePoint.Web.Controls/Customer.
Copy this code to RetailWebControl
private HtmlInputCheckBox emailOptIn; // HOL code

Copy this code in function private HtmlTemplate GetCustomerTemplate()
///HOL code
this.emailOptIn = ControlFactory.CreateCheckBox("msaxEmailOptInCheckBox");
this.emailOptIn.AddAttribute(AXDataBindAttributes.Value, "EmailOptIn");
HtmlLabel emailOptInLabel =
ControlFactory.CreateLabel(ControlResources.CustomerEmailOptIn, null,
this.emailOptIn);
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
19
HtmlFieldPanel emailOptInContainer =
ControlFactory.CreateFieldPanel(emailOptInLabel, this.emailOptIn, "msaxCustomerEmailOptIn");

Paste this code also above.
contactInfo.Controls.Add(emailOptInContainer);


Search for file CustomerDisplay.cs.
Add this to the header
using System.Web.UI.HtmlControls; /// HOL Code
In the method private HtmlTemplate GetCustomerTemplate() Paste this code.
/// HOL code
HtmlLabel displayEmailOptInLabel =
ControlFactory.CreateLabel(ControlResources.CustomerEmailOptIn, "msaxCustomerDisplayEmailOptInLabel");
HtmlInputCheckBox displayEmailOptIn =
ControlFactory.CreateCheckBox("msax-CustomerDisplayEmailOptIn");
/// HOL Code
displayFieldSet.Controls.Add(displayEmailOptInLabel);
displayFieldSet.Controls.Add(displayEmailOptIn);
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
20
3.
View changes
 Search for file ControlResources.Designer.cs. Insert the string below.
/// <summary> HOL code
///
Looks up a localized string similar to Email for special offers:.
/// </summary>
internal static string CustomerEmailOptIn {
get {
return ResourceManager.GetString("CustomerEmailOptIn",
resourceCulture);
}
}
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
21

Search for file ControlResources.resx in the controls folders. Insert the required
label like below.

Build the solution

GAC altered dlls Microsoft.Dynamics.Retail.SP.Web.Controls.dll
And Microsoft.Dynamics.Retail.SP.Web.Services.dll
1. Copy C:/Users/admin/Documents/Retail SDK/Online
Channel/StoreFront/Controls/obj/Debug/Microsoft.Dynamics.Retail.SP.Web.Controls.dll
to
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
22
C:\Windows\Microsoft.NET\assembly\GAC_MSIL\Microsoft.Dynamics.Retail.SP.Web.Cont
rols\v4.0_1.0.0.0__cd39a5825b5ea86b
2. Copy C:/Users/admin/Documents/Retail SDK/Online
Channel/StoreFront/Services/obj/Debug/Microsoft.Dynamics.Retail.SP.Web.Services.dll
To
C:\Windows\Microsoft.NET\assembly\GAC_MSIL\Microsoft.Dynamics.Retail.SP.Web.Servi
ces\v4.0_1.0.0.0__cd39a5825b5ea86b

Copy customer.js and customerdisplay.js to
http://ax2012r2a:40003/sites/retailpublishingportal/Style
Library/Scripts/ViewModel
 Run iis reset
Test the solution





Open Contoso home page from favorites.
Sign in and register a new user.
Go to the account page. View the Email optin flag.
Say Edit profile and update the Email optin flag.
Verify the table select * from ax.retailcustpreference in db
retailcustpreference.
Microsoft Confidential Information | © 2014 Microsoft Corporation. All rights reserved.
23