Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

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:

Code Block
languagexml
titleText Field
<input type="text" name="name" value=""><br>


Code Block
languagexml
titleDate Field
<input type="date" id="dob" name="dob" value="">


Code Block
languagexml
titleCheckbox
<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

View file
nameKB_APP_custom_field_sample_app.jwa
height250