Create and implement a Retail POS skin

Applies To: Microsoft Dynamics AX 2012 R3, Microsoft Dynamics AX 2012 R2, Microsoft Dynamics AX 2012 Feature Pack

You can change the look and feel of Microsoft Dynamics AX for Retail POS registers by creating new Retail POS skins. To create or modify existing Retail POS skins, you must obtain a license from DevExpress. Retail POS uses DXExperience Winforms created by DevExpress. You can develop your own forms without using DevExpress, but it is recommended you use these to maintain a consistent look and feel.

Creating a new skin

1. Go to the SkinEditor tool, which is typically found at <root>\Program Files (x86)\DevExpress 2011.2\Components\Tools\Windows Forms (where 2011.2 is the version number of the product). Double-click the SkinEditor icon to launch the tool.

2. 

   Click File->New to open the New Project window.

3. Set the Project Name: field to MyFirstCustomSkin.

4. Change the Template Skin: field from DevExpressStyle to Office 2010 Blue using the dropdown arrow.

5. Set the Skin Name: to MyFirstCustomSkin and click the OK button. Your new skin project is now loaded within the SkinEditor tool, which contains a list of UI elements called Products. For the remainder of this topic, Products will be referred to as controls.

   

Setting color properties on your new skin

1. The UI elements that ship with Retail POS use only a subset of the controls and properties available in DevExpress SkinEditor. They are listed in the following table:

   UI element	Navigation path	Property
   TabPane background	Tab > TabPane	SolidImageCenterColor
   TabPane font	Tab > TabPane	ForeColor
   Form background	Common > Group Panel	SolidImageCenterColor
   Label font	Common > label	ForeColor
   Group panel font	Common > GroupPanel > NoBorder	ForeColor
   Status bar center	Bars > LinkBorderPainter	SolidImageCenterColor
   Status bar inner	Bars > StatusBar	SolidImageCenterColor
   Status bar border	Bars > StatusBar	BackColor
   Link border	Bars > LinkBorderPainter	<imagefile>
   Form background	Common > GroupPanel	BackColor
   Form header	Common > GroupPanel	ForeColor
   Grid ColumnHeader	Grid > Header	SolidImageCenterColor
   Grid ColumnHeader Left	Grid > Header > Left	SolidImageCenterColor
   Grid ColumnHeader Right	Grid > Header > Right	SolidImageCenterColor
   Grid ColumnHeader font	Grid > Header	ForeColor
   Grid Grid Line	Grid > GridLine	BackColor
   Grid Row Font	Grid > GridRow	ForeColor
   Grid Row Background	Grid > GridRow	BackColor
   Grid EmptyAreaBackground	Grid > GridEmptyArea	BackColor
   Button font	Common > Button	ForeColor
   Button DisabledFont	Common > Button	DisabledText
   Button Background	Common > Button	SolidImageCenterColor
   Grid Row Comment	Grid > GridPreview	ForeColor

2. Set the Common > Control color property to Blue.

3. Set the Common > ControlText color property to White.

4. Click File->Save .

5. You must now convert your project into an assembly that will be used by Retail POS. Click File->Create Assembly. You should see a confirmation dialog similar to the following:

   

   Typically, newly generated skin assemblies are placed in the <root>:\Users\<username>\Documents\My DXSkins\ directory. There will be a folder beneath that directory with the same name as your skin, in this case MyFirstCustomSkin. Inside that folder, you will find a MyFirstCustomSkin.dll.

Launching Retail POS with your new skin

In order for Retail POS to load your new skin, you must place the skin assembly in the Retail POS runtime folder. Copy the MyFirstCustomSkin.dll to the Skins folder underneath the Retail POS runtime directory.

You also need to make Retail POS aware of your new skin.

Using Commerce Data Exchange: Synch Service

1. Open Microsoft Dynamics AX for Retail Headquarters and go to Retail->Setup->POS->Profiles->Visual Profiles.

2. Right-click the Theme dropdown and click View Details.

3. Click the New button and set the POS skin name field to MyFirstCustomSkin.

4. Close the POS skins form and with the POS visual profiles form still open, set the Theme dropdown to MyFirstCustomSkin. Close the form.

5. Go to Retail->Periodic->Data Distribution->Distribution Schedule. Select the N-1090 job and then click the Run directly button. This will synch the new skin to Retail POS. You can run the following query against the AXRetailPOS database to make sure this procedure worked:

   SELECT POSSKINNAME, * from RetailVisualProfile
   

6. Launch Retail POS and your new skin’s visualization effects should display similar to the following image.