Follow Us on Twitter

Create an input form with Oracle JET

by Herman Brunnekreef on January 21, 2016 · 3 comments

After creating my first JET-application I want to know more of Oracle JET.

I want to create a web form that saves the input in the database through a REST-service.

First let’s create the table for the input of the data.
The data for this table must be inserted through a REST-service. So I create an ADF web application with an entity-object for the table I just mentioned.

This entity-object will be then exposed as a REST-service.

So now it’s time for creating the input-form. This form uses the default ALTA-CSS style.

I chose some special inputfields which I will use in the inputform.
These are the inputfields:

  • Title and Nationality are “Single select”
  • Birthdate is an “InputDate” field
  • Zipcode is “Validation” field
  • Gender is a “Radioset”

Let’s look a bit closer to these special inputfields:

Single select:

This is the code for the single select:

The first option in the option value list is the default value shown in the input form. Don’t forget to initialise the single select item:



This is the code for the inputdate:

In the object datePicker there is the possibility to specify a yearrange. Default this is plus 10 years and minus 10 years. This is not enough for a birthdate. So you can specify your own yearrange as you can see in the next image. See for more information the API documentation: datePicker.

To set a default date for the inputdate field, you can use the following code:

self.birthdatedateTimeValue = ko.observable(oj.IntlConverterUtils.dateToLocalIso(new Date(2015, 1, 1)));


This is the code for the validation field. The zipcode what the user entered must be validated.

Placeholder is the hinttext for the user as you can see in the screenprint of the inputform. For validating the zipcode I use a regular expression. When the input doesn’t match the regular expression the messageDetail is shown:


This is the code for the radioset.

The first input item is the default item of the radioset. Also don’t forget to initialise this item:


At the end there are two buttons; Save and  Clear. When the Save button is pressed the inputdata will be send to the database using the REST-service.

When the button Clear is pressed, all inputfields will be cleared and the default values are set.

So let’s enter a person:
Below the buttons there is a textfield. In this textfield I show the user if the data succesfull is saved. Otherwise the user see’s an error.
When the button Save is pressed the user see’s a message that the input is saved.

After that let’s check the database :

This is a simple example for creating an inputform with Oracle JET. With the use of the API documentation there are a lot of possibilities for the different type of inputfields.

Create an input form with Oracle JET, 3.0 out of 5 based on 1 rating
VN:D [1.9.22_1171]
Rating: 3.0/5 (1 vote cast)

{ 3 comments… read them below or add one }

jetNewbie February 10, 2016 at 6:42 pm

Do you know how to make the form read only after saving and show the newly saved record?


Herman Brunnekreef February 11, 2016 at 11:06 am


The data that just is saved, is stored in array. You must use an array to pass the input via JSON to the database. The values in this array you can use to show it in your inputform.
Regarding readonly; There is an option to set an inputtext-field to read-only. How it’s dynamically done, here is an example


tonl March 14, 2018 at 7:58 am



Leave a Comment


Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS