icon-arrow icon-check icon-mail icon-phone icon-facebook icon-linkedin icon-youtube icon-twitter icon-cheveron icon-download icon-instagram play close close icon-arrow-uturn icon-calendar icon-clock icon-search icon-chevron-process icon-skills icon-knowledge icon-kite icon-education icon-languages icon-tools icon-experience icon-coffee-cup
Werken bij Integration & Application Talents
Blog 21/01/2016

Create an input form with Oracle JET

Oracle website

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.

Table input 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 input form.
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:

code for 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:

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 input form. For validating the zipcode I use a regular expression. When the input doesn’t match the regular expression the messageDetail is shown:

Zipcode error


This is the code for the radioset.

Code for 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:

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:

Check database

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

Overzicht blogs

Geen reacties

Geef jouw mening

Reactie plaatsen

Reactie toevoegen

Jouw e-mailadres wordt niet openbaar gemaakt.


  • Geen HTML toegestaan.
  • Regels en alinea's worden automatisch gesplitst.
  • Web- en e-mailadressen worden automatisch naar links omgezet.

Wil je deel uitmaken van een groep gedreven en ambitieuze experts? Stuur ons jouw cv!