Sunday, August 29, 2010

Press Edit Button to make Table Row Editable.

It seems very logical to have a button in a table row that will change the state of the row from read only to editable.
ADF supports this in a diferent way, The table has a property called EditingMode.

If you set the value clickToEdit, then, each time you click a record, it will become editable.

Here is  way of doing the same thing but with a button.
So instead of clicking on the row to edit, we ll have to click on the button and make the row editable.

Download the sample application.

This is what we want to have as functionality:

First we will create a transient attribute in our Entity Object
This attribute will be called editable and will have type of Boolean
We will add this attribute in the VO.

In the VO Row Impl java class, we will override the isAttributeUpdatable method.

Now, if the editable transient attribute has value true, we will return the super method, else we will return false.

Well, this means that every time we fetch data from the View Object, cached or not, this check will be done and according the value, the attribute will be updatable or not.

How to set value to this attribute:
We want this to happen when we press the button.
So, first we create another column,

add a button with partialSubmit=true,
 Inside the button we add a setPropertyListener (Recomended instead of setActionListener)

Type: action
From: #{true}
To: #{binding.editable.inputValue} <--- we have to add the binding on our pageDef

This will represent the editable value on the current record.

Last, place partialTrigger on the table from the Button

The other partialTrigger you see on the screenshot is from create insert button.
So, if you run your application you will see that when you press edit button on a row it will become editable.

Infact, you can make more than one row editable, simply by clicking the corresponding button...

But what happens when we commit??
We need to set the value back to false..
Back in the EntityObject impl java class, override The doDML method, and before super, set the attribute to false.

This will post the false attribute and after the commit it will have value false.
So all the rows will be read Only.

As far as the createInsert operation:
We could do the same on the createInsert button, as the edit button.
Just for the difference, we can do it somwhere else in the model.

In VORowImpl java class, Override the create method and set value true to the editable attribute.

Thats about it...

So now, we have a table we readOnly behavior and an edit button that enables that row.
After commit, the row(s) become readOnly again.

Download the Sample Application.


Column button in a read only table. Edit in a Popup and return values.

Here a simple example of how to add a button in a read only af:table and show a popup with an editable form of the current row.

Download Sample Application.

The first page can be done rather easy.
Simply drag and drop the iterator from the Data Control into the page and choose read only table.
Then, in the table add a column.
Inside the column add a commandButton.

This commandButton will show the popup.

Create a popup that will include a Dialog inside. The Dialog type will be ok/cancel.
Inside the dialog drag and drop the same iterator as previously but this time choose form.
The submit button is not necessary in our case.

Here is the generated code from JDeveloper

We are not just done yet.
In the button we have to add a showPopupBehavior and point the id of popup.
When the button will be pressed the popup will be shown with the current record ready to be edited.
Here is the code of the button:

 At this point, if you test it, you will find that no matter which edit button you ll press, you ll still see the first record in the popup.

This is simply because the popup by default caches it's results.
To change that, just change the contentDelivery to lazyUncached:

With this way, the data are always refresh upon the show of the popup.

In order to  refresh the data of the table in the back ground, we need to add a partialtrigger to the table.
The partialtrigger will be the id of the dialog which is inside the popup.
So when the user presses the ok button the table will be refreshed and show the new data.

At this point we are good to go..

after ok pressed.

Download Sample Application.


Related Posts Plugin for WordPress, Blogger...