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 docid\ uhy5xs2tmjqqmaerjfr5gadding a conditional image to a form docid\ uhy5xs2tmjqqmaerjfr5gadding a logo to a form docid\ uhy5xs2tmjqqmaerjfr5gadding a picture to a form docid\ uhy5xs2tmjqqmaerjfr5g adding an icon to a form button buttons that support icons include address book , command , cancel , declare master incident , resolve incident , and url from the configuration console, click build > business objects open a business object click the forms tab open the form to edit under control properties , in the image field, click the function icon in the expression editor , click image manager in the image manager , click the icon to use and then click select in the expression editor , click save in the form editor , click save to verify that the icon appears, do the following a log in to the application b refresh the browser c 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 from the configuration console, click build > business objects open a business object click the forms tab open the form to edit from the related objects list, choose other folder and drag picture to a cell in the form click the picture field to select it under control properties , in the image field, click the function icon 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") click save in the form editor , click save to verify that the image appears, do the following a log in to the application b refresh the browser c 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 from the configuration console, click build > business objects open a business object click the forms tab open the form to edit from the related objects list, choose other folder and drag picture to a cell in the form click the picture field to select it under control properties, in the image field, click the function icon in the expression editor, click image manager in the image manager, click add navigate to the logo to use and double click the logo in the image manager, click the logo and then click select in the expression editor, click save in the form editor, click save to verify that the logo appears, do the following a log in to the application b refresh the browser c 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 docid\ uhy5xs2tmjqqmaerjfr5gadding the image field to a form docid\ uhy5xs2tmjqqmaerjfr5gadding a picture to a business object that uses the form docid\ uhy5xs2tmjqqmaerjfr5g 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 from the configuration console, click build > business objects open a business object click the forms tab click add new\ click binary under setting field details , enter a field name and a display name click add this field the application displays the new field in the list and is marked with "(new)" in the fields list, click save adding the image field to a form from the configuration console, click build > business objects open a business object click the forms tab open the form to edit 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 click the field to select it under control properties, click control type and choose image uploader/viewer under control properties, click height and input the value appropriate for the picture under control properties, click label and input the value appropriate for the picture click save adding a picture to a business object that uses the form perform the procedure in adding the image field to a form docid\ uhy5xs2tmjqqmaerjfr5g log in to the application refresh the browser select a record from the list in the record, click the newly added image field the field displays "no image" below the image, click browse navigate to the picture file and double click it the picture that you selected now appears in the record click save to delete the picture, click remove to change the picture, click browse and choose the picture file you want the new picture replaces the previous one