Custom HTML

Custom HTML in Joget's Form Builder can be used to achieve advanced form design. It allows you to include custom HTML, JavaScript, and CSS for more complex and tailored form elements.

#requestParam.id?javascript#

How does it work?

You can use the existing built-in App Expenses Claims to see how Custom HTML works. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click Expense Finance Form, and you will be directed to the  Form Builder. 
   
4. Click the Custom HTML element on the canvas to open the Configure Custom HTML properties.
   
5. This Custom HTML redirects to another page in the App when the user clicks Setup Category.
   

   <a href="setupCategory">click here</a>

   

6. To see it working, head to the App Composer and click the Launch button in the UI column.
7. Click on Create a New Expense Claim on the Dashboard, fill in the necessary details, and click Continue Next Screen.
8. Here, you will find the link. Click it to see if it redirects you to the Setup Category page.
9. Head to the App Composer and open the Expenses Claims Apps under the UI column. In the UI Builder, look at the properties of Setup Category. Note that the <a> href attribute used in the Custom HTML element used the Menu ID to specify the page the link goes to.
   

Configure custom HTML

Configuring Custom HTML in Joget's Form Builder allows you to include advanced form designs using HTML, JavaScript, and CSS. This flexibility enables you to create highly customized and interactive forms. By setting up properties like ID and custom HTML content, you can control the behavior and appearance of your form elements.

Fill in the following fields:

• ID: Element ID.
  • This ID will not automatically be reflected in the database unless you toggle the Auto Populate Saved Value and use the <input> element in the custom HTML.
  • Any <input> element in the custom HTML will automatically create a database table column based on the name attribute.
  • You can name the ID as hidden, and the content will be hidden in the runtime/actual UI.
• Custom HTML: Custom HTML can achieve advanced form design by including valid HTML, JavaScript, and CSS.

  • HTML example:
    

    <b>this text is in bold</b>
    <input type="text" id="fname" name="fname" value="">

  • JavaScript example (jQuery is supported):

    <script type="text/javascript">
    alert("hello world");
    </script>

  • CSS example:
    

    <style type="text/css">
    body {
      font-size: 100%;
    }
    </style>

Advanced options

Advanced options for the Custom HTML element include settings for auto-populating saved values and sanitizing input values.

Fill in the following fields:

• Label: The element label is to be displayed to the end-user.

• Auto Populate Saved Value?: Toggle to auto-populate saved values. Any <input> element in the custom HTML will create a database table column based on the name attribute. Enable this option to ensure the value is stored and fetched in the form and database. The auto-populate is based on the value attribute. Example:

  <input type="text" id="myhtml" name="myhtml" value="">

  Note: This does not support input types: file, button, submit, reset, and image.
• Sanitize Input Value?: Checking this box will sanitize the input value before storing input data in the database. 
  For more information, see the tutorial on Form Input Sanitization.