What's the best practice to have a UI5 form for new data?

[former_member359079]

Hi Gurus

I am writing a page which has two parts, a form on the top (for new data) and a list on the bottom (for existing data).

The form is for user to enter new data, when a button is pressed, entered data should be shown in the list.

I did research on internet but people only talk about how to show existing data.

I tried three ways to do this:

1) Bind the form to an existing entry. I can consider it as a new entry at the server side when the button is pressed, but it looks weird;

2) Bind the form to unexisting data (e.g., wrong path) and keep the form editable. I can enter data in the input fields, but when the cursor leave, data gone automatically;

3) Leave the form un-binded but submit the data explicitly. The list is not getting refreshed automatically.

Here I am using XML view with oData. Since I am new on UI5, I don't know what's the best practice of such scenario, any suggestion is helpful and appreciated.

[Former Member]

I had the same trouble

[Former Member · Accepted solution]

If you want to use the form for changing existing entries in the list below then bind the path of selected element in the list to the form. If you want to use the form to create new entries you can do the following e.g.:

var oNewEntry = this.getOwnerComponent().getModel().createEntry("/Products");
this.getView().setBindingContext(oNewEntry);

The above will create a specific entity set and returns a context object that points to the newly created entity (this is not created in the database yet). Then the context is then bound to the view.

In your form bind properties of the entity into input fields e.g.

<Label text="Product Description" required="true"/>
<Input value="{ProductDescription}"/>

So the form can register changes to the newly created entity.

Then on button press just execute:

this.getOwnerComponent().getModel().submitChanges();

The above will post your entry into the backend.

If all goes well your list should now show the newly created entity.

[former_member359079]

Thanks for all replies.

I got the point, actually the list will be refreshed automatically without any extra code under option 3.

Previously it's not working because I used an internal table to store data, but the server creates one more instant of the class XXXX_DPC_EXT for the list, so my data lost.

Sorry for the confusing.

John

[junwu]

bind the form to existing data. it will be used to display and update existing data.

if you want to create new, click a button, show a popup to fill the new data.

[junwu]

what is "it looks weird"?

[former_member359079]

Hi Jun

In option 1, I tried to bind existing data on the form, and then user can change, when user click the button, I call a function in the controller, in that function I submit the data in the form to the back-end server on which runs my oData service, over there I treat the data as new data. Maybe it works, but I feel this way is weird.

Thanks

John

[former_member203031]

Hello John

How you are displaying the data in the second part i.e., list

Are you using a model?

If YES,

Then when clicking a button on all the input values need to be binded to the model and the model need to be refreshed and the refreshed model should be binded to the list where you are displaying the send part of the page.

Kindly let me know if you have any doubts.

Thanks,

Deepak Raj.

[former_member359079]

Thank you Deepak for the quick reply.

Yes I am using oData model for the List.

I try to make things more clear since I am quite new on UI5:

a) Initially leave the form un-binded?

b) When user click the button, bind the form to to a model? If yes, how to do this explicitly in the controller?

c) How to refresh the model? Or it will be done automatically?

Thanks

John