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

  • 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:
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.
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.

Create an input form with Oracle JET, 3.0 out of 5 based on 1 rating
Ratings:
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?

Reply

Herman Brunnekreef February 11, 2016 at 11:06 am

Hi,

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 http://www.oracle.com/webfolder/technetwork/jet/uiComponents-dynamicform-dynamicSample.html

Reply

tonl March 14, 2018 at 7:58 am

rrft

Reply

Leave a Comment

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter