Adding HTML template to existing process example.

Introduction

The following example shows the method for adding an HTML template to an existing form process.

If this is the first HTML template be sure that the HTML Master Template and associated files have been uploaded.

Be sure to also review the following documentation:

Use the Form Wizard to Generate an HTML template.

To be able to create the ARP3 form as a HTML form, we need to log into SAP, using transaction 'SPRO' and navigate to 'Form Wizard'. Executing the 'Form Wizard', will start the process of creating a new form, or modifying an existing form.

By clicking on the 'Continue' button the process of creating or modifying a form is continued, by the user either selecting a new 4 digit code or by entering an existing code. In this case we have entered 'ARP3'. As we are modifying an existing form there is no need to enter any other information, however if you are creating a new form, then it is vital that you complete the other input fields. Once you are ready click the 'Continue' button to progress further.

Because there already a form with the 4 digit code 'ARP3' in FLM, an information window is displayed, stating that "This form type, version and template option has already been defined" in FLM.


 
By continuing on the process, the 'Form Data Structure' window is displayed. From here you can either select continue, if you are just requiring to create the HTML code.
 
In our case, it is prudent to see what Subform's, and Form Fields have been defined, so we selected the 'Launch Form Data Designer' button to display the list of Subforms.


 
We can see all the Form Fields that have been declared for the form, and indentify what Subform they belong to.

The 'root' subform cannnot contain any Form Fields for HTML templates and the data schema will need to be changed if this is the case.
 
To make a change to a Form Field, the user just has to double click the Form Field name that is to be changed and then make the required change in the 'Form Detail' panel and the select the Update button.
There are a number of issues that will help.

  • Make sure that you have no fields in the root directory
  • In older FLM systems dropdowns and radio buttons had a field type of char, these have to be changed to their respective field types. If these are not changed, then when FLM generates the HTML code, they will be input fields (text) and not dropdowns or radio buttons. Although this will not fail, it will give you extra work to change these in the HTML code.

Once all changes have been made to the Subform's and Form fields select the 'Save and Return' button, and the user will be returned to the 'Form Data Structure' windows.

We are now ready to continue to specify the location of the Template and Data file.

 

Once you are happy that you have selected the correct directory for both the PDF and HTML files select the 'Continue' button.

You can specify the source template, and declare that you want a HTML template created. By default this option is not set, so remember to select the 'Generate HTML Template' checkbox. From here you can either use the template that has already been uploaded, or if you have not yet uploaded a template, either PDF or HTML you can select the Master Template, which is a very good starting point for the design of either PDF or HTML forms.

By selecting the Continue button, you will now be given the choice to select a number of Form Options.

Once you are happy that you have defined all the options that you require, Selecting Continue will display the 'Transporting Form' window, where you select the Transports that will allow you to move the forms through the landscape.

Once you have selected your Transport Requests, pressing 'Continue' will complete the process and the HTML template and objects will be generated and saved for editing.

Modify HTML template.

We are now ready to make changes to the template itself.

As we are creating the HTML ARP3 Form, we need to locate the HTML code that was generated. Navigate to the directory where the template was to be stored, and open the file in a HTML editor. For the demonstration of this document, we have used Adobe Dreamweaver CS6,  be any HTML editor can be used.

Before we start amending the HTML code, that was generated, the generated code is not laid out in a readable format.
I managed to format the code using Adobe Dreamweaver so that it is more readable. This is not a must, as the code is still valid, but quite hard to understand.


 
As you can see the code is quite easy to read and understand to an HTML programmer.

However, there are a number of changes that is required to the code.

  1. Replace all text from the top before the <html> tag with <!DOCTYPE html>
  2. Search for all text containing "captionreq _invis" and replace with "captionreq_hide"
  3. Change Captions to meaningful names.
  4. Search for all text containing "_tb" and replace with "tb"  
  5. Search for all text containing "_ro" and replace with "ro"

Modify JavaScript and CSS.

Once the basic layout of the form is complete, various functions are written to meet all the requirements of the form.
As the requirements differ from form to form, these are written on the form. There are a number of generic functions that are used and these are contained within the following Javascript files.

  • FLMTools.js
  • CalendarPopup.js
  • jquery.js

As with the look and feel of the form, this can be changed by creating a Stylesheet (css), a generic one has been provided called FLMStyles.css. However, if more styles are required these can be added to the form in the Stylesheet section.

Change Render Control Settings

As you have already created the template as an XPD, the template will be rendered in the portal as a PDF, but as we now have a HTML, we need to change when it is rendered. You are able to change the type of render at different statuses, but for now we need to change how we render the template at the Initial Status.

From the Forms Optimization/Display Options choose ‘Render Control’ and select ARP3 from the Form Types, and then select Render Control for the status that you want the change, as mentioned we want the Initial Status.

Select HTML from the UI Type, which is currently set to PDF, and then save the selection.



When you render a new ARP3 form, you will see the HTML version.

Adjust Render Control based on Device Type.

Besides controlling which template UI type is used based on the forms status it can also be controlled using the Device Characteristics table or in the UI Type form level User-Exit. Both of these options inspect the User Agent string passed by the browser to determine the correct template to use.

Find the Maintain Device Characteristics activity isn SPRO ... Forms Lifecycle Manager -> Initialize Customer Code -> Advanced Settings