How to set up Images to show in MPOS

With the release of AX 2012 R3 Cu 8 and MPOS we introduced the ability to have a more interactive experience with our retail Customers.  One of the great features of this MPOS is the ability to not just show images of our Products  but also the ability to display an image that represents our Customers and Staff.    This may seem trivial but imagine for a second you need to look up a record for customer John Doe.  If I have 20 John Doe records in my system, a cashier has to rely on the Customers phone number or mailing address being in the system.   Now assuming that same John Doe just moved to a new place and changed his number, how would you find it?   You could have the cashier read every address to the Customer and give away PII information until you find the right record  or we could display a list of customer images and the Cashier could easily pick out the customer via their image.

To take that scenario one step further, after we can select a customer record in MPOS, and then also see images for products that this customer has recently purchased.  In addition we could add another section of product images  we recommend they buy based on previous history.   Or a Customer can point out a product they recent bought based on the images and tell the cashier that they are looking for add-on xyz for this product.

The good news is that setting up this interactive experience and updating it is a fairly easy process and can mostly be done within AX.   For the sake of simplicity I’m going to use the AX USMF Demo Data to demonstrate how you can easily set this up and apply custom images to your MPOS implementation that is connected to a Retail Server.  However you can take this same concept and easily apply it to any implementation you are doing.

Before we dig into the AX side we first need to setup an Website that will host our Images for MPOS. There really isn’t any major requirements for this other than the ability to pull image files from it.  The easiest and quickest way to do this is to just simply create a new Website in IIS Manager. For our Demonstration I’ve created the IIS website “RetailMediaWebSite” as you can see below.  I do recommend creating this on the same machine that is hosting your Retail Server, however this is not required.  The specifics for this site are as follows:

 1. Application Pool  = Any account that has rights to read a folder and its content on the file system
 2. Protocol = HTTP or HTTPS  (you can use both if you want, for this Demo I’m using HTTP) 
 3. Port =  Any port will work, just make sure it’s not in use   (for this Demo I used 8989)
 4. Authentication = Not required but since I’m only hosting images, I did allow Anonymous Authentication
 5. Folder = This can be anywhere on the file system. (For this demo I created a folder called RetailMediaWebSite in C:\inetpub\wwwroot
 6. I have a few Sub-Folders (Categories, Images) not required for the initial creation but I will explain the purpose of these further down in this blog.
 

 

 

Now that we have our IIS Website to host our Images we need to do some configuration in AX.  To start with Log into an AX Client > Go to Retail > Setup > Retail Scheduler > Channel Integration > Channel Profiles

 

In this window we want to select the Retail Server Channel Profile that is associated to our Store.  Now in the Profiles Properties Fast tab we need to add a new key called “Media base URL”.    Once you’ve added this you need to set the Property Value to match the URL for the IIS Website we created earlier.   Keep in mind the value you specify here will be the BASE STRING for resolving the image locations and the code will be appending paths to this later in AX code.   To give you an idea of how this impacts your URL.  In the stock demo data the Media base URL property is set to “http://dax2012r2a:8989/images/”    however in another section of AX we set the product image to  be:  “images/productID#.jpg”.      What happens then is that MPOS tries to resolve the URL of “http://dax2012ra:8989/images/images/productID#.jpg”      Notice the double Images folder in this path, to load this image MPOS would have to place an image file inside of the image folder, inside of another image folder in our MediaWebSite Folder.

  Since my RetailMediaWebsite folder for this demo is located in the wwwroot folder and I’m not specifying subfolders we aren’t going to include a subfolder in this property value.    Also notice I put a ‘/’  at the end of the string.  This is required as again we are going to append additional values to this url later in code.

Now that we have our Base URL String we can click Close on this window and save the changes.   With our base setup done, we can no delve into setting images for our varies areas in AX.   Because image settings aren’t all located in the same places in AX I’m going to split this up by their area they are.

To set Images on Categories for MPOS:
 1. Go to Retail > Setup > Category Hierarchies > Retail Channel Navigation Hierarchies
 2. Double click the Navigation Hierarchy your store is using. (Since I’m using Houston store I’m going to select “Fashion Navigation Hierarchy” )
 3. In the left hand pane:  select the Category or sub-category you want to set an image on. 
 4. Then Click Images at the top
 
 
 
 

 
When you Click Images you will see the below window.  Since I’m using Demo Data this is already populated.  If this is a new environment then you simply need to specify the path to your image and mark it as default.

 

Now remember earlier when I said I would cover those Sub-Folders that I created in the IIS Website?  Here is where those sub-folders come into play.  As you can see in the above example the “Fashion Sunglasses” image is located in a folder called “Categories”.   You could get away with not specifying a Sub-Folder here, but when you’ve got thousands of images to manage, I would recommend creating a Sub-Folder in your Website Directory so that you can easily identify what are category Images.  

For Categories the image is pretty straight forward,  specify the folder and image name in the AX Window above that matches the file you have in the IIS directory as you see below.  As long as the names match you should be able to resolve the image.

 

 

Once you have your image for the Categories Set, click close on the Images form to save the changes. Then Click Close on the Hierarchy Form to save your changes as well.

BIG FYI here:  To save you some headache,  you can’t just run a Scheduler job after making a change to the hierarchy like this.  Instead we need to Re-publish the store, which will trigger a series of records to be written to the database for the store.  These records are then what is pushed down to the channel database.

Since we are using MPOS we need to re-publish the store.  (Retail > Common > Retail Channels > Retail Stores > Select your Store > Click Publish)

Once you’ve “re-published” the store.  You can now push the changes to the Channel. For hierarchy changes we just need to run the 1150 job in  Retail > Periodic > Data Distribution > Distribution Schedule)

If you want to confirm your changes made it to the Channel Database you can run the below SQL query against it to see your changes:

select * from ECORESTEXTVALUE
where TEXTValue like ‘%categories/category_accessories_4.jpg%’

 

To Set Images on Products for MPOS:

We first need to see how AX is configured so that we know where to place our images.  To start with go to Product Information Management > Setup > Attributes > Attribute Groups

Then select “Default Product Attribute Group”  in the Name Column.  Now in the Attributes Fast tab > Select Image

When you first Click on Images in the Fast Tab,  notice that the  “Attributes” title for the fast tab will disappear, and show you a URL text instead, as you can see from the below screen shot.  This is behavior is actually a product defect in AX, however it’s a defect that actually works in our favor as it quickly shows us the URL we need to setup for Products.

 

If you manage to click off of Image or don’t experience the above glitch, you can still get the URL for our Products by simply scrolling to the right and looking at the text information listed in the Default Values Field.

 

Alternatively you can also Click on Edit after selecting Image and see the below Image path. If you want to specify a different Folder path, then simply replace the values below.

 

 

As you can see from the above two screen shots AX is showing us that our Products images should follow the folder structure path of  Products/{ProductNumber}_000_001.png    The last part of this URL is actually a dynamically generated URL. In the Demo Data you’ll see a backslash in the URL, this is actually a typo and should be a forward slash.

BIG FYI here:  the value {ProductNumber} is actually a place holder in AX.  What the MPOS/Retail Server code will do is actually replace this string with the actual product number.  If you were to run Fiddler with MPOS and look for this URL call from MPOS it would look something like  http://ServerName:Port/MediaWebsite/Products/MyitemNumber_000_001.png
When creating your custom URLS make sure you leave {ProductNumber}  as is, otherwise the system won’t be able to find your images.

Back on our Retail Server Media Website we need to create a folder called Products under our Root Site. If you set your Media Base URL earlier to include a Sub-Folder in it, then create your Products Folder in here.  Within that Products folder we add our images based on the format we set in AX.  As you can see below:

 

 

 

To Set Images on Customers and Workers for MPOS:

If you just finished setting up products then your AX client is already in the right window.   If you’ve decided to skip this blog, then in AX you need to go to:

 Product Information Management > Setup > Attributes > Attribute Groups

Then select “Default Customer Attribute Group” or the “Default Worker Attribute Group”  in the Name Column depending on which one you want to setup.  Now in the Attributes Fast tab > Select Image

Just like with Products you will see a URL that we use for Customers and Workers.  Or you can click Edit and see the URL structure we use as well.

BIG FYI here: Just like with Products, {CustomerNumber} and {WorkerNumber] are place holders in AX.  MPOS will replace this string with the actual Customer or Worker Number that its using.  So make sure you leave this value in your URL in AX.

Clicking Edit on Images for either attribute will show you the following

 

 

Based on this Layout, we know that our Retail Media Site needs to have an Images Folder (luckily we created this folder earlier!)  So now we just need a Customer and Worker folder inside of the Images folder.  As shown below:

 

 

To Set Images on Catalog Name for MPOS:

Just like setting Customer and Worker images  Catalog images are set in the same Attribute Groups window in AX.  As you can see below we use the following URL layout

 

 

On our Media site the layout would look like this:

 

 

 

BIG FYI HERE:  As of the time of this writing MPOS will indefinitely cache an image after its been requested.  What this means is if you are looking to update/replace an existing image over time (I.E. update an employee picture)  this doesn’t work to well.   There are plans to improve this so that MPOS doesn’t cache the image indefinitely but no time table has been released for that.  In the in term if you need to update images you will need to uninstall MPOS and Re-install it, as this will flush the cache.

 

As you can see It’s very easy in AX 2012 R3 to setup custom images for display in MPOS and provide a very interactive sales experience with your most important customers.

 

As always I hope you found this posting useful.

 

Regards,
Brian S.
Sr. Support Engineer