How to access control from the popup fragment by ID

Question

I want my text area to be empty after I press OK button.

I have try this line this.byId("id").setValue("")

onWorkInProgress: function (oEvent) {
  if (!this._oOnWorkInProgressDialog) {
    this._oOnWorkInProgressDialog = sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
    //this.byId("WIP").value = "";
    //this.byId("WIP").setValue();
    this.getView().addDependent(this._oOnWorkInProgressDialog);
  }
  var bindingPath = oEvent.getSource().getBindingContext().getPath();
  this._oOnWorkInProgressDialog.bindElement(bindingPath);
  this._oOnWorkInProgressDialog.open();
},
        
//function when cancel button inside the fragments is triggered
onCancelApproval: function() {
  this._oOnWorkInProgressDialog.close();
},

//function when approval button inside the fragments is triggered
onWIPApproval: function() {
  this._oOnWorkInProgressDialog.close();
  var message = this.getView().getModel("i18n").getResourceBundle().getText("wipSuccess");
  MessageToast.show(message);
},

The text area will be in popup in the fragment. I am expecting the text area to be empty.

score 3 · Answer 1 · edited Jun 24 '20 at 15:25

If you instantiate your fragment like this:

sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);

You can access its controls like this:

Fragment.byId("WIPworklist", "WIP").setValue(""); // Fragment required from "sap/ui/core/Fragment"

Source: How to Access Elements from XML Fragment by ID

The better approach would be to use a view model. The model should have a property textAreaValue or something like that.

Then bind that property to your TextArea (<TextArea value="{view>/textAreaValue}" />). If you change the value using code (e.g. this.getView().getModel("view").setProperty("/textAreaValue", "")), it will automatically show the new value in your popup.

And it works both ways: if a user changes the text, it will be automatically updated in the view model, so you can access the new value using this.getView().getModel("view").getProperty("/textAreaValue");.

score -1 · Accepted Answer · answered May 21 '19 at 11:57

-1

You almost have it, I think. Just put the this.byId("WIP").setValue("") line after the if() block. Since you are adding the fragment as a dependent of your view, this.byId("WIP") will find the control with id "WIP" every time you open the WIP fragment and set its value to blank.

You are likely not achieving it now because A. it is not yet a dependent of your view and B. it is only getting fired on the first go-around.

answered May 21 '19 at 11:57

Matthew C Reddy

322
1
9

I was thinking of your solution, but following your solution, the text would be cleared when opening the popover. In her request she wants to clear the text when pressing 'OK' :) – KristoffDT May 21 '19 at 12:25
Is it not effectively the same thing for a dialog? I actually prefer to do it this way since I have always found it easier to centralize code on opening dialogs rather than on close. Edit: Either way, ```this.byId()``` should work after initial addition as dependent is performed – Matthew C Reddy May 21 '19 at 13:15
It would only work if the fragment was loaded via `sap.ui.xmlfragment(this.getView().getId(), "com.sap.FinalAssestments.view.WorkInProgress", this);`. It has **nothing** to do with `addDependent` (which is mainly necessary to share the models of the view with the fragment). *Source: I just tried it.* – Marc May 21 '19 at 13:37
Ah - thanks for the correction @Marc. I suppose it is a "good practice" guideline that I always use (since model propagation is almost always needed) which I have conflated the benefits. My typical dialog open looks like this: const oView = this.getView(); if (!this._CreditCardDialog) { this._CreditCardDialog = sap.ui.xmlfragment(oView.getId(), "app.view.fragments.CreditCardDialog", this); oView.addDependent(this._CreditCardDialog); } // clear any models/fields necessary this._CreditCardDialog.open(); *sorry about formatting – Matthew C Reddy May 28 '19 at 09:33
1

Seems like good practice to me, but depending on your version you might want to switch. `sap.ui.xmlfragment` is deprecated. – Marc May 28 '19 at 09:34
Thanks for the heads up, I will keep that in mind on newer projects – Matthew C Reddy May 28 '19 at 09:41

How to access control from the popup fragment by ID

2 Answers2