How to reset controls to their initial values in SAPUI5?

Question

I have a form with a lot of controls ( ComboBoxes , TextAreas , RadioButtons ) using OpenUI5. I give the values of the controls on the server side in C++. What I want is to have a reset button, which will clear the choices of the user and revert the controls back with the default choices. Until now, I am able to have the form and the controls as an JS object like this:

this.byId("MainForm").getModel();

The only think I am able to do until now is to totally clear all the controls like this:

this.byId("MainForm").getModel().setData(null);

For example I have a ComboBox and the default value from my model is the second choice. How can I keep this value and set it back to the control?

Answer 1

Use the API of the respective control. sap.m.ComboBox features the method setSelectedKey(sKey) . sap.m.TextArea features the method setValue(sValue) . sap.m.RadioButton features the method setSelected(bSelected) .

Bind a press event to your reset button. in your press event get the form's controls. then reset the form's controls to their initial states with their respective methods.

<!-- in your e.g. xml view -->
<Button type="Reject" text="Reset" press="onPressResetButton"></Button>

// in your js controller
onPressResetButton: function() {
  ...
  var oComboBox = this.byId("your-combo-box-id");
  oComboBox.setSelectedKey("your-initial-item-key");
  ...
}

Get the initial values for the form's controls from your backend or keep them in a local model in the frontend.

Answer 2

I think the best way to achieve this is to have two models. One is your odata model which fetches data from server and second is to have local json model.

1. Fetch data from odata and assign it to local model.
2. Bind the local model to the Form
3. Doesn't matter user changes data on form. Local model will be affected.
4. When user presses reset button. Assign your odata model data to local model again that way the default values will be binded again.

Hope this approach helps.