Customizing a Form with Images

A business object can use several forms for different purposes and audiences. For instance, by assigning forms to roles, one form can be used for managers and another for technicians. When designing forms, first customize the default panel, the brief panel, and then add new forms if necessary.

Forms employ a tabular layout with rows of cells. Customizing forms involves:

•Adding fields: Clicking and dragging business object fields from the navigator bar to a form cell.

•Editing field position and appearance: Aligning fields and refining their aesthetic properties to enhance form usability.

You can make the following customizations to forms:

•Adding an Icon to a Form Button

•Adding a Conditional Image to a Form

•Adding a Logo to a Form

•Adding a Picture to a Form

Adding an Icon to a Form Button

Buttons that support icons include Address Book, Command, Cancel, Declare Master Incident, Resolve Incident, and URL.

1.From the Configuration console, click Build > Business Objects.

2.Open a business object.

3.Click the Forms tab.

4.Open the form to edit.

5.Under Control Properties, in the Image field, click the function icon .

6.In the Expression Editor, click Image Manager.

7.In the Image Manager, click the icon to use and then click Select.

8.In the Expression Editor, click Save.

9.In the Form Editor, click Save.

10.To verify that the icon appears, do the following:

Refresh the browser.

Select a record associated with the business object from the list.

The icon that you selected now appears on that button in the form.

Adding a Conditional Image to a Form

You can specify expression to show an image that corresponds to the value of a particular field. In this example, we add a status icon. If the incident status is active, the icon is red. For any other status, the icon is green.

1.From the Configuration console, click Build > Business Objects.

2.Open a business object.

3.Click the Forms tab.

4.Open the form to edit.

5.From the Related Objects list, choose Other folder and drag Picture to a cell in the form.

6.Click the Picture field to select it.

7.Under Control Properties, in the Image field, click the function icon .

8.In the Expression Editor, enter an expression to create the desired behavior.

For example, enter the following: $(if Status == "Active" then "red_light.png" else "green_light.png").

9.Click Save.

10.In the Form Editor, click Save.

11.To verify that the image appears, do the following:

Refresh the browser.

Select a record associated with the business object from the list.

An image now appears according to the value set for its field. Since the status of this incident is active, the red_light.png image is displayed.

Adding a Logo to a Form

Before performing this procedure, save the logo.

1.From the Configuration console, click Build > Business Objects.

2.Open a business object.

3.Click the Forms tab.

4.Open the form to edit.

5.From the Related Objects list, choose Other folder and drag Picture to a cell in the form.

6.Click the Picture field to select it.

7.Under Control Properties, in the Image field, click the function icon .

8.In the Expression Editor, click Image Manager.

9.In the Image Manager, click Add.

10.Navigate to the logo to use and double-click the logo.

11.In the Image Manager, click the logo and then click Select.

12.In the Expression Editor, click Save.

13.In the Form Editor, click Save.

14.To verify that the logo appears, do the following:

Refresh the browser.

Select a record associated with the business object from the list.

The logo you added now appears in the form.

Adding a Picture to a Form

•Creating an Image Field

•Adding the Image Field to a Form

•Adding a Picture to a Business Object that Uses the Form

This procedure adds an image field to a form, so that you can add a picture to an incident. This example uses an incident but the procedure applies to other business objects.

Creating an Image Field

1.From the Configuration console, click Build > Business Objects.

2.Open a business object.

3.Click the Forms tab.

4.Click Add new....

5.Click Binary.

6.Under Setting Field Details, enter a field name and a display name.

7.Click Add This Field. The application displays the new field in the list and is marked with "(new)".

8.In the Fields list, click Save.

Adding the Image Field to a Form

1.From the Configuration console, click Build > Business Objects.

2.Open a business object.

3.Click the Forms tab.

4.Open the form to edit.

5.From the Related Objects list, choose Incident > Fields folder, find the field that you just created, and drag it to a cell in the form.

6.Click the field to select it.

7.Under Control Properties, click Control Type and choose Image Uploader/Viewer.

8.Under Control Properties, click Height and input the value appropriate for the picture.

9.Under Control Properties, click Label and input the value appropriate for the picture.

10.Click Save.

Adding a Picture to a Business Object that Uses the Form

1.Perform the procedure in Adding the Image Field to a Form.

2.Log in to the application.

3.Refresh the browser.

4.Select a record from the list.

5.In the record, click the newly added image field. The field displays "No image".

6.Below the image, click Browse.

7.Navigate to the picture file and double-click it. The picture that you selected now appears in the record.

8.Click Save.

9.To delete the picture, click Remove.

10.To change the picture, click Browse and choose the picture file you want. The new picture replaces the previous one.