Share via

Create and implement a Retail POS skin

  • Article

Important

This content is archived and is not being updated. For the latest documentation, see Microsoft Dynamics 365 product documentation. For the latest release plans, see Dynamics 365 and Microsoft Power Platform release plans.

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. CreatingNewRetailPOSSkinProject

    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.

    NewSkinPropertyOptions

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:

    SkinAssemblyConfirmation

    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.

    NewPOSSkin