...
| Warning |
|---|
|
When using Hash Variable that uses URL parameter or user-inputted value in your custom JS scripts, ensure that these hash variable(s) are escaped! Make use of hash variable escape keywords, see Hash Variable - Escaping the Resultant Hash Variable. Use ?javascript hash variable escape. Example: #requestParam.id?javascript#
|
Introduction
| English |
|---|
| Custom HTML in Form Builder can be used to achieve advanced form design. |
Get Started
The easiest way to see how the Custom HTML works is to use the existing built-in App Expenses Claims. Here are the steps:
...
Edit Custom HTML
| Name | Description |
|---|
| ID | Element ID (By declaring as "html", a corresponding database table column "c_html" will be created)ID will not be automatically be reflected in the database unless you toggled the Auto populate saved value and use the <input> element in the custom HTML. | Info |
|---|
| Any <input> element in the custom HTML will automatically create a database table column based on the name attribute. To retrieve the value back, you can enable Auto Populate Saved Value? under Advanced Options below. |
Please see Form Element for more information about defining the ID and the list of reserved IDs. | Info |
|---|
| You can name the ID as "hidden" and the content will be hidden away in the runtime/actual userview. |
|
| Custom HTML | Custom HTML in Form Builder can be used to achieve advanced form design by putting in any valid - HTML | Code Block |
|---|
| <b>this text is in bold</b> |
| Code Block |
|---|
| <input type="text" id="fname" name="fname" value=""> |
| Info |
|---|
| Any <input> element in the custom HTML will automatically create a database table column based on the name attribute. To retrieve the value back, you can enable Auto populate saved value? under Advanced Options below. |
JavaScript (jQuery is supported)
Don’t forget to put in <script type="text/javascript"></script> block | Code Block |
|---|
| <script type="text/javascript">
alert("hello world");
</script> |
CSS
Don’t forget to put in <style type="text/css"></style> block | Code Block |
|---|
| <style type="text/css">
body{
font-size: 100%;
}
</style> |
|
Advanced Options
Image Removed
Image Added
| Name | Description |
|---|
| Label | Element Label to be displayed to the end-user. |
| Auto populate saved value? | Toggle to the auto-populate saved value. | Info |
|---|
| Any <input> element in the custom HTML will be automatically retrieved so long as the name attribute is the same as the database table column |
| Info |
|---|
Does not support the following input types: file, button, submit, reset & image |
|
| Sanitize Input Value? | Checking the box will sanitize the input value before storing input data to database. Please see Form Input Sanitization |
Related Tutorials: