Show TOC

 1.1.7 Creating a Form and Editing the Layout

Use

In this lesson you create the interactive form for the Relocation process with all the fields in which the employee can enter his or her changed address details. You create this interactive form in the Form Builder Adobe LiveCycle Designer software (provided by Adobe Systems Inc.) is integrated into the SAP environment and is available as the Form Builder

For basic information about working with Adobe LiveCycle Designer , see the Layout tab page in the menu, under Help → Adobe Designer Help

For specific information about creating an interactive form, see Creating and Editing Interactive Forms .

You perform the following activities:

You include the ISR Form-Wide Scripts control element in the form.

The element hides Adobe menu bars and sets the form fields so that they cannot be edited if the form is checked after processing.

You create a header row for the form.

You create the form fields with data binding.

You create the form fields for displaying and processing agent notes.

You create the date field.

You create the Update Data pushbutton, which updates the data in the form according to the selected date.

You display a preview of the form.

Use the following template to create the form:

Creating a Form

Perform the Create ISR Scenario IMG activity.

Select scenario ZTFS and choose Version from the dialog structure.

Choose Generate

Leave the Form field empty. The form name is automatically created according to the model Z_ISR_FORM_<ISR scenario>, therefore Z_ISR_FORM_ZTFS.

If you assign your own name to your forms outside of the tutorial, ensure that it exists in the customer namespace.

Choose the Without Template option in the Create Adobe Form dialog box.

Save the form as a local object in the Create Object Catalog Entry dialog box.

The Form Builder appears.

Choose the Layout tab page.

Choose Pallets → Data Overview

The tab pages at the left-hand side of the Form Builder are displayed.

Including the ISR Form-Wide Scripts Control Element

At the right-hand side of the Form Builder , change from the Library tab page to the ISR Controls tab page.

Use drag and drop to drag the ISR Form-Wide Scripts element onto the form and position it at the bottom of the page.

Save your entries.

Creating the Title Row

Select the ISR Header element on the ISR Controls tab page and use drag and drop to drag it to the top of the form.

Enter Relocation as the text for the form title.

Save your entries.

Creating Form Fields with Data Binding

Create the following form fields:

Form Fields and Related ISR Control Element

Form Field

Name

ISR Control Element

PERNR

Personnel Number

ISR Text Edit – Display Only

EMPLOYEE_NAME

Name

ISR Text Edit – Display Only

POSITION

Position

ISR Text Edit – Display Only

PERSA_TEXT

Personnel Area

ISR Text Edit – Display Only

STREET

Street and House Number

ISR Text Edit

POST_CODE

Postal Code

ISR Text Edit

CITY

City

ISR Text Edit

COUNTRY

Country

ISR Text Edit – Display Only

Proceed as follows for each form field:

In the right-hand side of the Library tab page under ISR Controls , choose the appropriate ISR control element (see table) and use drag and drop to drag it onto the form.

In the left-hand area of the Form Builder , choose the Data Overview tab page.

At the end of the structure all form fields created in the form scenario are displayed for you.

Select the desired form field and expand it to the FIELD subelement.

Select the FIELD element and use drag and drop to place it exactly on the ISR text element in the form.

In the Binding Properties dialog box, select the Do Not Update Related Properties option.

In this way, the UI element is automatically linked to the form field and is filled with data automatically at the process runtime.

Enter the text for the form field (see table).

Check the correct binding to the form field as required.

In the right-hand area, choose the Object tab page and from there the Binding tab page.

Check the value entered for the standard binding. This value must have the format $record.<Field Name>.DATA[*].FIELD, where <Field Name> is the name of the form field.

Repeat steps 1 to 8 until you have created all form fields listed in the table.

Save your entries.

Creating Form Fields for Agent Notes

At the right-hand side of the Form Builder , change from the Library tab page to the ISR Controls tab page.

Use drag and drop to drag the ISR Multiple Line (Edit) element onto the form and position it at the bottom of the page.

Enter the text for the form field.

Drag the form field on the form to the required size (height and width).

Switch to the Data Overview tab page.

Select the field HRASR_CURRENT_NOTE and expand it to the FIELD subelement.

Select the FIELD element and use drag and drop to move it onto the ISR control element in the form.

In the Binding Properties dialog box, select the Do Not Update Related Properties option.

In this way, the text area is linked to the field HRASR_CURRENT_NOTE and the notes entered are automatically processed correctly at runtime.

Perform steps 1 to 5 in the same way for the field HRASR_PREVIOUS_NOTES.

The system automatically sets this field so that it cannot be edited.

Save your entries.

Creating a Date Field

At the right-hand side of the Form Builder , change from the Library tab page to the ISR Controls tab page.

Use drag and drop to drag the ISR Date Field element onto the form and position it on the page, as represented in the sample form.

On the left-hand side of the Form Builder , on the Data Overview tab page, select the EFFECTIVE_DATE form field.

Select the FIELD element and use drag and drop to place it exactly on the ISR control element in the form.

In the Binding Properties dialog box, select the Do Not Update Related Properties option.

In this way, the UI element is automatically linked to the form field and is filled with data automatically at the process runtime.

Enter the text Address Valid from for the date field.

If required, check the correct binding to the form field as described in step 8 of the Creating Form Fields with Data Binding section.

Save your entries.

Creating Pushbutton for Updating Data

At the right-hand side of the Form Builder , change from the Library tab page to the ISR Controls tab page.

Use drag and drop to drag the ISR On-Form Event Button element onto the form to the right of the date field.

Enter the text Update Data for the pushbutton.

Choose Pallets → Script Editor . In Script Editor , the scripting row relevant for the pushbutton is selected:

$record.CONTROL_PARAM.ISR_EVENT = "CUSTOM_EVENT"

Replace CUSTOM_EVENT with USER_EVENT_INITIALIZE

Save your entries.

Activate the form:

On the following tab page, select the SFPF <Form> form and the SFPI <Interface> interface, and choose Activate

Displaying a Form Preview

Choose the PDF Preview tab page .

You see a preview of the form in which you can see, for example, whether the display and processing fields were correctly defined.

Complete the processing in the Form Builder

Result

You have created the form with all the necessary fields for entering the change of address. After you have activated the form and the interface, the form can be processed further.