First Form Tutorial

Table of Contents

  1. First Form Tutorial
  2. Creating the Data Definition of a Form in SAPGUI
  3. Designing the layout in Adobe Designer
  4. Adding Business Logic
  5. Form Routing
  6. Launching the form in the portal 

1      First Form Tutorial

This section is aimed towards a beginner designing his first form. Although it is helpful for you to be familiar with SAP and Adobe Designer, it should be possible for anyone to follow the step-by-step instructions given here and create your first FLM form and get a feel for the processes involved. Further information on the functions referred to in this section are contained in the later sections of this document.

The aims of this exercise are to:

  • Create a new form data definition using the FLM form wizard
  • Combine the data definition with the form template to create a working Interactive Form
  • Enter the required UserExit code to prepopulate, create a dropdown menu, and validate fields on the form
  • Launch the finished form in the FLM portal and test it.

Exercise Prerequisites:

  • FLM installed on the system
  • Customer code initialised
  • Form Status, Action and Category codes created.
  • Message 996 set up
  • Message ‘Form submitted for approval’ set up e.g. as number 100
  • Users 1 and 2 configured 

 

2      Creating the Data Definition of a Form in SAPGUI

The form data definition is done in the SAP IMG.

Go to Cross-Application Components> General Application Functions> Forms Lifecycle Manager> Interactive Forms> Setup Forms> Form Wizard.

The Form Wizard will open:

1.    Click Continue.

2.    Enter a 4-character form character code (e.g. TEST),

Leave version number as 00, language and form description and Continue. N.B. the form description can only contain letters, numbers and spaces; no special characters.

3.    Launch the Form Data Designer.

a.    Begin by creating a subform in the region shown. Call it ‘subform_1’ with a MaxOccurs of 1 with ROOT as the parent. Click ‘add subform’ and it will appear in the table on the right.

MaxOccurs facility allows you to set the maximum number of times items on a subform can be repeated using the + and – buttons on the form.

b.    Repeat this process for two more subforms: subform_2 with MaxOccurs: 10 and Parent: ROOT and subform_3 with MaxOccurs: 1 and Parent: ROOT

4.    Now go to the Form Fields Tab.

a.    The first field, for the sake of this example, will be called ‘prepop’, of type ‘numc’ and parent ‘subform_1’. Check the tickbox to ‘add prepopulation routine’. Finally click ‘Add’ and it will appear in the field table.

b.    Next, create two more fields, called ‘Dropdown_1’ and ‘Dropdown_2’, type: ‘CHAR’ and with parent: ‘Subform_2’. Check the box to add an F4 values routine to both.

c.    Create a fourth field, called ‘validation’, type = NUMC and parent = subform_3

d.    Finally, Return to FLM Wizard.


 5.    FLM automatically creates a directory on your computer in which to store the finished form file. Continue.

6.    We will be using the standard FLM template for this exercise, so Continue.

7.    Check Online transport and select a Category from the dropdown and Continue.

8.    Continue to begin form code generation.

9.    Click the Check to complete the process or create a new customizing requrest. E.g. "John's First Form".
 

3      Designing the layout in Adobe Designer

Once the form’s data definition has been created, open your form template in Adobe Designer. It will be in the C:/FLM/Form Templates folder and have the format: FLM _[3-digit customer code]_[4-digit form code]_E_[version number]. E.g. FLM_ZZZ_TEST_E_00

1.    Go to File> New Data Connection

2.    Select ‘get data connection from XML schema’ and Next.

3.    Open the directory and select the FLM form. It will have a file name of FLM_FORM_DATA_[3-digit customer code]_[4-digit form code]_E_[version number]

4.    Check ‘embed XML schema’ and Finish

The Data View tab now contains the schema you defined in the FLM wizard. Subform_1 will correspond to the ‘Header’ field on the template, Subform_2 corresponds to ‘Items’ and Subform_3 corresponds to ‘Footer’. ‘FLM_Action’ and ‘FLM_Return’ are required by the system so are generated automatically.

 

5.    The next step is to drag-and-drop the fields in the Data View onto the corresponding form fields. Do not drag-and-drop the subforms.

a.    Drag ‘Prepop’ onto the subform marked ‘Header Fields’

b.    Drag ‘Dropdown_1’ and ‘Dropdown_2’ onto the ‘Item Fields’ subform

c.    Drag ‘Validation’ onto the ‘Footer Fields’ subform

When the fields are successfully bound, the connection icon will appear next to that item in the Data View.

6.    FLM_ACTION should be dragged and dropped onto the dropdown field next to the ‘Send’ button. FLM_RETURN corresponds to the blank box on the left of the ACTION field as shown.

7.    You will need to create a drop-down chevron for both the dropdown fields on the form. To do this, select the required fields and click on the field type on the right-hand side. Select ‘drop down list’ from the options.

8.    Click in the text boxes denoting the field names. Rename ‘Prepop’ to ‘Prepopulated’ and replace the underscores in the dropdown field names with spaces.

The names of the fields in the data view and in the FLM system do not change when you change the field descriptions on the form, so your field descriptions are not limited by the character and length restrictions in the data designer. It is advisable to keep the data designer names and field descriptions similar or have a system for field nomenclature when working with long forms.

 

9.    In order to ensure that the form functions correctly, you will need to bind the subforms on the template to the subforms you created in the Form Wizard. To do this, return to the Hierarchy tab and under ‘DataFlow’, select the Header field. In the Object> Binding menu on the right, select the default binding to SUBFORM_1 by clicking on the dropdown list under the default binding and going to DataConnection> SUBFORM_1 as shown.

10. Repeat the process for the ‘Items’ and ‘Footer’ subforms.

11. Save the form and exit Adobe Designer.

 

4      Adding Business Logic

After working on the form in Adobe Designer we need to upload it back into FLM so we can add the business logic.

Return to SAP transaction SPRO IMG>Cross Application Components> General Application Functions> Forms Lifecycle Manager and go to ‘Upload Form Template’

Select the .XDP file you have just been working with. Click the ‘Execute’ icon on the top-left of the page. Confirm the following prompts with Yes.Now that the form is back in we do the following.

1.    Go into Field UserExits under business logic from the IMG menu.

2.    You will receive a prompt to enter the form type code you are working with. Enter ‘TEST’ and click ‘Continue’

3.    The screen shows a list of the fields that were assigned UserExits in the data designer, by category in the Form Wizard.

    To summarise:

‘Dropdown_1’ and ‘Dropdown_2’ were assigned an F4 values routine

‘Prepop’ was assigned a prepopulation routine

‘Validation’ was assigned a validation routine. 

To edit the UserExit code Preopoluates the form.  Click on the PrePopulation tab, select the required field and then click the Pre-population button. 

Enter the following code into the space denoted by

<<<< Start of Customer code >>>> and <<<< End of Customer Code >>>>

as before:

ex_value = '12345'.

This code will prepopulate the field with the value ’12,345’. As with the F4 code, any ABAP code can be entered here to prepopulate the field.

Click Save icon and then confirm.

Activate the code using the Activate icon. tool as before and then exit

4.    Follow the same procedure for the Dropdown boxes and for Validation. The UserExits contain code you can uncomment. The Form will still run even if the UserExits are left blank.

 

5      Form Routing

Here we will setup a simple routing for the form:


This routing can be represented by a table of actions:

User


Form Status


Action


New User


New Status


Initial user (User 1)


Initial


Submit


Approver (User 2)


Submitted


Approver (User2)

Submitted

Approve

System


Approved


Approver (User 2)


Submitted


Reject


Initial user (User 1)


Rejected


Initial user (User 1)


Rejected


Submit


Approver (User 2)


Submitted


Initial user (User 1)


Rejected

Cancel


System


Cancelled


 To configure this workflow into FLM, first go into Interactive Forms > Setup Form Routing > Form Status Determination from the IMG menu

1.    Select the name of the form you are working with from the list and double-click on ‘Workflow Status’ at the top-left of the screen.

2.    From the second, third and fifth columns of the routing table above we can derive the following other actions: 

Submitted -> Approve = End of life

Submitted -> Reject = Rejected

Rejected -> Submit = Submitted

Rejected -> Cancel = Cancelled

Go to ‘New Entries’ and enter the above status processes into the table as shown below. When you have fininshed click the ‘Save’ and Save the data into the correct Customizing Request for that form. 

This table can be used for more advanced routing configurations, e.g. email reminders and version variations, so it has a number of options that we won’t use for the sake of this example.

3.    Next, go into ‘Routing Status Table’ from the IMG menu.

4.    Select the form type you want to work with from the table and open its routing table from the menu on the left to configure the form user routing by entering the information as follows, substituting in the corrent Customer Code, Ftype, User, etc... for your form. Click the Save icon and attach it to the correct request.


 

SYSTEM’ is not a configured user, however it is used here to transfer ownership of the form from the user who submitted it and hence remove it from their inbox. The form will be stored in the system without an ‘owner’, ready for any subsequent actions, such as data posting, to be applied to it.
 

6      Launching the form in the portal 

Launch the FLM portal in a browser using the URL:

http://yourserver:port/webdynpro/dispatcher/flm.com/flmgui/FLMPortal

The port for your server may be different.(e.g. 50300).

1.    Login as the first user in the routing (USER1).

2.    Go to Tasks and then New Form

3.    Click on the form category ‘TEST’ to which the form was assigned, scroll down through the list using the down button to the form you created and click on it. It will launch in the browser.

4.    When the form launches, the ‘Prepopulated’ field should contain the value ’12,345’, as determined by the UserExit code you entered

5.     Select ‘Submit’ and click ‘Send’ to send the form to the next user in the routing.

6. The form will be submitted, and a confirmation message will appear on the screen

7. If you have the login details of the next user in the routing, you can check that the form was routed successfully to them, as specified in the routing table. To do this, first Logout , then enter the login details of the next user

8. Go to Tasks> Inbox and the form you have just submitted  should appear in the listing, with status ‘Submitted’, created by USER1 with today’s date on it. Click on the form to open it.

9. You can decide whether to approve or reject the form. Rejecting it will return it to User 1; approving it will change its status to ‘Approved’, which can then be input as a valid status for posting to SAP by the Forms Posting Engine.

 

Congratulations! You have just successfully created and tested your first FLM form.  For a more complete example see the FLM Forms Tutorial.