- Whitehorses - http://blog.whitehorses.nl -

Create an input form with Oracle JET

Tweet [1]

After creating my first JET-application [2] 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.
img1
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.
img2

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

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

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

Single select:

This is the code for the single select:
img4

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:

self.SelectTitleValue("MR");

Birthdate:

This is the code for the inputdate:
img5

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 [3].
img6

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)));

Zipcode:

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

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:
img8

Gender:

This is the code for the radioset.
img9

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

self.radiosetGenderValue("MALE");

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:
img10
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 :
img11

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.