!--a11y-->
1.1.7 Creating a Form and Editing the
Layout 
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:

...
1. Perform the Create ISR Scenario IMG activity.
2. Select scenario ZTFS and choose Version from the dialog structure.
3. 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.
4. Choose the Without Template option in the Create Adobe Form dialog box.
5. Save the form as a local object in the Create Object Catalog Entry dialog box.
The Form Builder appears.
6. Choose the Layout tab page.
7. Choose Pallets ® Data Overview.
The tab pages at the left-hand side of the Form Builder are displayed.
...
1. At the right-hand side of the Form Builder, change from the Library tab page to the ISR Controls tab page.
2. Use drag and drop to drag the ISR Form-Wide Scriptselement onto the form and position it at the bottom of the page.
3. Save your entries.
...
1. 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.
2. Enter Relocation as the text for the form title.
3. Save your entries.
...
...
1. 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:
2. 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.
3. 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.
4. Select the desired form field and expand it to the FIELD subelement.
5. Select the FIELD element and use drag and drop to place it exactly on the ISR text element in the form.
6. 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.
7. Enter the text for the form field (see table).
8. Check the correct binding to the form field as required.
a. In the right-hand area, choose the Object tab page and from there the Binding tab page.
b. 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.
9. Repeat steps 1 to 8 until you have created all form fields listed in the table.
10. Save your entries.
...
...
1. At the right-hand side of the Form Builder, change from the Library tab page to the ISR Controls tab page.
2. Use drag and drop to drag the ISR Multiple Line (Edit) element onto the form and position it at the bottom of the page.
3. Enter the text for the form field.
4. Drag the form field on the form to the required size (height and width).
5. Switch to the Data Overview tab page.
a. Select the field HRASR_CURRENT_NOTE and expand it to the FIELD subelement.
b. Select the FIELD element and use drag and drop to move it onto the ISR control element in the form.
c. 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.
6. 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.
7. Save your entries.
...
...
1. At the right-hand side of the Form Builder, change from the Library tab page to the ISR Controls tab page.
2. Use drag and drop to drag the ISR Date Fieldelement onto the form and position it on the page, as represented in the sample form.
3. On the left-hand side of the Form Builder, on the Data Overview tab page, select the EFFECTIVE_DATE form field.
4. Select the FIELD element and use drag and drop to place it exactly on the ISR control element in the form.
5. 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.
6. Enter the text Address Valid from for the date field.
7. If required, check the correct binding to the form field as described in step 8 of the Creating Form Fields with Data Binding section.
8. Save your entries.
...
...
...
...
...
1. At the right-hand side of the Form Builder, change from the Library tab page to the ISR Controls tab page.
2. Use drag and drop to drag the ISR On-Form Event Button element onto the form to the right of the date field.
3. Enter the text Update Data for the pushbutton.
4. Choose Pallets ® Script Editor. In Script Editor, the scripting row relevant for the pushbutton is selected:
$record.CONTROL_PARAM.ISR_EVENT = "CUSTOM_EVENT"
5. Replace CUSTOM_EVENT with USER_EVENT_INITIALIZE
6. Save your entries.
7. Activate the form:
On the following tab page, select the SFPF <Form>form and the SFPI <Interface>interface, and choose Activate.
...
...
...
...
1. 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.
2. Complete the processing in the Form Builder.
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.
