Saturday, 14 July 2012

Add an Image/Icon to an Action Pane Button [AX 2012]

Let start with the result. Below is a screenshot of Super Mario replacing the Customer icon.

MarioIcon2012-07-03_1432

This is becoming a common question with AX 2012 using Action panes and all the buttons having images associated to them. It definitely adds to the usability.

Follow the below steps and you’ll be alright.

Get your icon file

You can purchase your icon file on line or create them. To create them, create a png file with transparent background. Use either Photoshop or equivalent Gimp (free). Just Google on how to make an image transparent (I am very inexperienced and I got by – most people should be fine).

Then go to http://www.convertico.com/ and load up your png to convert to an ico file. From here on it is all standard AX.

To add an image resource to the AOT

  1. In the AOT, right-click Resources, and then click Create from File. The Select file window opens.

  2. Navigate to the location of the image file that you want to use for a button. Click the file, and then click Open. The image file is imported as a resource.

  3. By default, the resource name is set to the file name that you imported. You might want to change the name that appears in the Resources list. To change the name, click the resource, enter a value in the Name property, right-click the resource, and then click Save.

To specify an AOT resource
  1. In the AOT, expand Forms, and then click the form you want to update.

  2. To view the action pane, expand the form node, expand Designs, and then expand the Design node.

  3. Expand the action pane, expand the action pane tab, and then expand the button group that contains the button.

  4. Right-click the button, and then click Properties. The button properties window opens.

  5. In the ImageLocation property, click AOTResource.

  6. Enter the name of the resource into the NormalImage property of the button.

  7. Right-click the form, and then click Save. To find and view the button, right-click the form and then click Open.

Resource:

http://msdn.microsoft.com/en-us/library/cc621437.aspx