The Master Template


Introduction

The FLM Master Template provides a starting point for any new form type.   A version for XDP and HTML form is supplied with FLM and is updated on a regular basis and can be downloaded from this article.

The Master Template can also be modified with corporate branding and customizations or an alternative form can be used when the new form type is created.

Uploading Master Templates:

The Master Template can be uploaded like any other form type using the "Manage Form Resources" IMG activity.

When uploading the template will be recognized as a Master Template due to the FTYPE variable being set to 'XXXX' which will overwrite the existing Master Template.

The HTML Master Template has a file structure rather than a single file like the XDP Master Template. This includes the HTML file JavaScript files, a CSS file and a collection of stock images. All of which must be uploaded to the appropriate folder in "FLM Form Resources". This can be done by right clicking on the folder selecting "Import MIME Object".

The XDP and HTML files are stored in the Content Repository while the rest of the objects are stored in the SAP MIME Repository.

File Type Folder
XDP Form Templates -> PDF
HTML Form Templates -> HTML
PNG Images
JPG / JPEG Images
GIF Images
CSS Stylesheets
JS JavaScripts

 

 

FLM XDP Master Templates:

XDP Master Template FLM Version
Varo_Master_Template_300_01.xdp (ALD 10.4 version) Varo (FLM) 300
FLM_Master_Template_295SP4_v02.xdp (ALD 10.4 version) FLM 295 SP4 & SP5
FLM_Master_Template_295SP4_v01.xdp FLM 295 SP4
FLM_Master_Template_295SP3_v15.xdp FLM 295 SP3
FLM_Master_Template_295SP2_v24.xdp FLM 295 SP2
FLM_Master_Template_295_v64.xdp FLM 295 SP1
FLM_FLM_XDP_X_XX.xdp FLM 290 SP4

 

FLM HTML Master Templates:

HTML Master Template FLM Version Release Notes
Varo HTML_Master_Structure_v35_4.zip Varo (FLM) 300 - Latest Release v35 Release Notes
FLM_HTM_Master_Structure_295SP4_v3.2.zip FLM 295 SP4 & SP5  
FLM HTML Master Structure 295SP4_v2-v03.zip FLM 295 SP3 & SP4  
FLM HTML Master Structure 295SP3_v1.zip FLM 295 SP3 - Initial Release  

Download the Master Structure zip file above for the installed FLM release and extract before uploading the files.

When uploading new versions of the HTML template any changes will be indicated by the files version number and forms based on old versions of the HTML template will not be automatically updated which is consistent with XDP template behavior.   To use new versions of the JavaScirpt files the reference must be updated in the forms HTML template to the new file.

Th provided JavaScript (.js) and (.css) files provided by Arch should not be customized. Customizations can be added by creating and uploading new files and adding references to them in the HTML template.

The initial release of the HTML Master Template contains the following components required for generating HTML forms.

  • FLM_Master_Template:  Master Generation File that is used by the wizard to create generated forms.  Contains all Header and Linked Content paths to JS and CSS files
  • FLMStyles: FLM Master Template Style Sheet
  • Java Scripts Libraries:
    • autoNumeric: A jQuery plugin simplify numeric inputs.
    • fieldDefn: Debug file used to check naming convention, this is a sample file clients and change and use their own standardss
    • formMethods: Standard FLM library of functions. See the file for more detail.
    • formMSG: This contains messages being displayed back to end user.  Custom versions of this JavaScript can be used to provide custom messages or multi-language support.
    • formPatterns: Helper file which supplies hooks for date, numeric formats and currency input type. A custom version of this file be be used by modifing the settings in the quotes, and again file can be copied and setup for multi regional sites where different formats are needed.
    • formTools:  JavaScript Library used by both the generator and when designing forms.  Contains functions for common features, including Check Cycles and Submission.
    • jquery:  jQuery External JavaScript Library used in several functions via FLMTools.
    • jquery-ui:  jQuery UI (User Interactions) External JavaScript Library used in several functions via FLMTools and used for touch devices.
    • soapclient:  Web Service SOAP Client JavaScript.
  • Images
    • The following helper images are also included:
      • calendar.png - Calendar Symbol
      • checkbox_cross.png - Red Cross
      • delete_t.png – Trash Can
      • dollar.png – Dollar Sign ($)
      • edit_row.png – Edit Symbol
      •  max.png – Max Screen Symbol (Box)
      • min.png – Min Screen Symbol (Line)
      • percent.png – Percentage (%) Sign
      • pound.png – Pound (£) Sign

 

HTML Master Template Customization

Function calls to formTools.js are added to the html template input fields when generated by the Form Wizard:

flm.onloadBody()

  • calls the onloadBody event in FormTools.js which translates dates and numeric data from internal SAP format to a readable format, as defined in the Form Patterns File.
  • call the onloadBodyMethod in FormMethods where client code may be added.
  • calls the onloadEvent in FormTools which calls the onChangeMethod in FormTools for check boxes and selects.
  • calls onloadMethod in FormMethods on all objects.

flm.onfocusEvent(this)

  • calls the onfocusEvent in FormTools and runs a number of standard tasks, such as clear error border.
  • invokes onfocusMethod in FormMethods where client code is added.

flm.onblurEvent(this)

  • calls the onblurEvent in FormTools and runs a validation on the field to identify missing mandatory fields. 
  • invokes onblurMethod and validateMethod in FormMethods where client code may be added.

flm.<event>Event(this)

Other events below are available which follow the same routine of calling the named event in FormTools and then invoking the on<event>Method in FormMethods. Client code may be added to each event in FormMethods.

  • flm.onkeydownEvent(this)
  • flm.onkeypressEvent(this)
  • flm.onclickEvent(this)
  • flm.ondblclickEvent(this)
  • flm.onchangeEvent(this)