Introduction

In this article, we will guide you through the process of creating a custom input field using HTML. In Joget, you can create an input field in HTML and save the value directly into the database without configuring the connection. In this demonstration, we will create 3 different input fields:

  • Text Field
  • Date Field
  • Checkbox Field


Do note that we are not limited to only these fields and that there are various other fields you can implement into the form.

Implementation

Here is what the JavaScript code looks like for each field:

Text Field
<input type="text" name="name" value=""><br>


Date Field
<input type="date" id="dob" name="dob" value="">


Checkbox
<input type="checkbox" id="agreement" name="agreement" value="agree">
<label for="agreement">I agree to the terms and conditions</a></label><br><br>


Here is what it would look like inside a Custom HTML field:

Figure 1: Custom HTML Field


Please ensure that the "Auto Populate Saved Value?" setting is enabled. This setting ensures the field is automatically populated whenever the form is loaded.

Runtime

Once you have implemented the fields, here is what it would look like in runtime:

Figure 2: Published Form


Figure 3: Published List

Download the Sample App

KB_APP_custom_field_sample_app.jwa


  • No labels