With the Developer Form task type, you can design pure HTML or HTML5 forms, use unfiltered JavaScript, include script libraries and define your own CSS styles. This is useful when you require full control over the look and feel of the form. There are separate data entry and view-only settings that can be configured independently giving you the ability to format the data that is captured as desired. Unlike standard Integrify forms, the Developer form is configured only in the Task Configuration menu. They cannot be re-used across multiple processes.
Please download and import our sample process containing two Developer Forms for reference: Developer_Forms.ipml. You will also want to download this report file to fully implement the Ajax form's functionality: Request_Report_for_DropDowns_w_Parameters.irml.
There are 4 configuration tabs on one for testing your configuration:
Form Code
This setting will accept a HTML/HTML5/Javascript:
- Type or paste in your code
- For a regular form post, simply leave the action attribute out of your FORM element.
- You may also submit the form via AJAX. jQuery and the ajaxForm jQuery plugin will be included in your form automatically.
- Optional: You may place a script tag as follows in your form - <script id="IntegrifyForm"></script>. This will get replaced when the form runs with a script containing some helper code and a variable called task which you can use in your JavaScript code. For an AJAX submit, call the IntegrifyCom.helpers.updateUi() function and pass in the response of your POST. This is only necessary if you a posting the form via AJAX. In addition to the helper functions, the IntegrifyForm object includes a prefills property which is a JSON hash of the key/value pairs specified in the prefills tab.
Note: do not import this entire snippet of code, the only part you need is the script tag mentioned in the previous paragraph.
<script type="text/javascript" id="IntegrifyForm">
var IntegrifyForm = { prefills:{ fullname:"System System" },
helpers:{ updateUi:function (rsp) {
$('body').trigger('integrify-taskcomplete', JSON.parse(rsp));
} },
task:{ reciptask_sid:"7d597347-dd33-44e5-b15b-365628ebd0de",
ptask_sid:"e0eb4260-8220-4bea-b45c-4068eabfd0b4",
instance_sid:"760f406b-6c0f-46e9-b217-345328ebd02e",
status:"Started",
start_date:"2014-01-29T16:43:14.167Z",
end_date:null }
}
</script>
View Only Code
The View Only Code tab allows you to specify the display HTML used when viewing a form that has been submitted from the Request Summary. You will need to use JavaScript to place the values that were submitted into your HTML layout. To accomplish this we use the following conventions:
- Place a script tag as follows in your form - <script id="IntegrifyForm"></script>. This will get replaced when the form runs with a script containing a variable called IntegrifyForm which will have a submittedValues property containing the key/value pairs that were captured when the form was submitted:
<script type="text/javascript" id="IntegrifyForm">
var IntegrifyForm = { helpers:{},
task:{ reciptask_sid:"704fe627-45cc-40d2-8bf1-5d5428ebd0e7",
ptask_sid:"4c12c1b7-1cd2-44ea-8ee3-9062dfbfd079",
instance_sid:"760f406b-6c0f-46e9-b217-345328ebd02e",
status:"Completed",
start_date:"2014-01-29T16:43:11.483Z",
end_date:"2014-01-29T16:43:11.483Z" },
submittedValues:{ sampleform:{ sid:"708f2270-8904-11e3-ab45-1f3b72ad7182",
reciptask_sid:"704fe627-45cc-40d2-8bf1-5d5428ebd0e7",
task_sid:"c720e40b-44dc-4201-b3db-1d5428ebd0b0",
ptask_sid:"4c12c1b7-1cd2-44ea-8ee3-9062dfbfd079",
key:"sampleform",
type:"string",
id:null,
data_sid:null,
dom_id:null,
label:"Sample Form Chosen",
meta_1:null,
meta_2:null,
ordinal:null,
value:"Regular post - with prefill",
long_exists:null,
user_sid:null,
object_sid:null,
object_type:null,
created_date:"2014-01-29T16:43:11.273Z",
created_by:"4e99e0dd-b3b3-4d5d-826d-3d5ae62a16cf",
modified_date:null,
modified_by:null,
deleted_date:null,
deleted_by:null,
long_value:null } } }
</script>
Prefill Mappings
The Prefill Mappings tab allows you to define values from the process that will be inserted into your Form Code (see above.) :
Fields To Capture
The Fields To Capture tab allows you to define which form fields are captured when they are posted. These fields are then exposed to the process for rules and prefills and are also exposed to the Integrify reporting engine.
- Key Name: this should match the name attribute of the field in your HTML (ex: <input name="email" type="text>)
- Label: this is the label that will show in the Task History, Rules, and Reports.
- Data Type: this sets the data type that controls the configuration options for Rules and Reports
Comments