How To Display Images on Workflow Forms

Today we will demonstrate how to add an image to your workflow forms. Let us edit the “TestFormFile” workflow form definition created in our last blog. Select the Forms->Form Definitions menu option.
Workflow Forms Definition

Select the “TestFormFile” row in the definition list and click the “Design” toolbar button to open the workflow form designer.

Workflow Forms Designer

Note: If you do not have a “TestFormFile” form definition, you can instead click the “Create” toolbar button to create one here.
Once your workflow form is open in the designer, drag and drop an Image control from the toolbox to the designer workspace.

Workflow Forms Drag and Drop

Next double-click on the image control to configure its properties:

Workflow Forms Image Control

Click the properties dialog “Select Image” button to choose an image from storage or upload a new one.

Workflow Forms Select Image

Images can be uploaded and stored within the workflow forms themselves or in the cDevWorkflow “Common” storage area. If an image, such a logo, will be used in multiple workflow forms, upload the logo image to the “Common” storage area. If the image is specific to this form ONLY, upload to the “Form” storage area.
Click the “Choose Files” button to open the file selection dialog:

Workflow Forms Choose File

Select an image or images and click the “Open” button to upload to the cDevWorkflow Form or Common storage area.

Workflow Forms Select

Now click the uploaded image thumbnail and click the “Select” button to select that image for display. The popup window will close and the control’s Image URL property will update to reflect the storage path of the selected image.
The image properties dialog will render as follows:

Workflow Forms Image Profile

In order to render the image at a different size, provide the desired width and height of the image. Click the “Save” button to save the changes. Form definition will now include your selected image.

Workflow Forms Save File

You may also be interested in reading more on the subject of Configuring a Custom Workflow Step.

A small sampling of the Workflow Technology for BPM Solutions contained within our cDevWorkflow product offering can be found here: Workflow Technology That Works.

Learn more about our Process Automation & IT, QA Services or Software Development products and solutions on the Web!  Visit us at: Innovative Process Solutions