How to clear dialog/xmlfragment content after close?

Question

My dialog is defined as document:

  onOpenDialog : function () {
     var oView = this.getView();
     var oDialog = oView.byId(\"helloDialog\");
     // create         


        

Answer 1

Dialog XML

<Dialog afterClose="dialogAfterclose" >
    <beginButton>
        <Button text="yes" press="confirmOk"/>
    </beginButton>
    <endButton>
        <Button text="no" press="confirmCancel"/>
    </endButton>
</Dialog>

Create the Dialog

if(!this._oDialog){
    this._oDialog = sap.ui.xmlfragment("idFragment","Path_to_your_Dialog", this);           
}

You need to use destroy() of the sap.ui.core.Element.

dialogAfterclose: function(oEvent) {
    this._oDialog.destroy();
}

As per your code

onOpenDialog : function () {
  var oView = this.getView();
  if (!this._oDialog) {
      this._oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog");
      oView.addDependent(this._oDialog);
  }
  this._oDialog.open();
},     
dialogAfterclose: function(oEvent) {//function called after Dialog is closed
   this._oDialog.destroy();//destroy only the content inside the Dialog
},
confirmOk: function(oEvent) {
    this._oDialog.close();//Just close the Dialog, Dialog afterClose() will be called and destroy the Dialog content.
}

Ref: sap.ui.core.Element - destroy()

Answer 2

I found that my error is caused by two reasons:

1. Forgot to set undefined after destory()

confirmCancel = function() {
   this._oAddAssignDialog.destroy();    
   this._oAddAssignDialog = undefined;
}

2. This dialog is used in table that is reused in different views, the tableview id should set to different.

//view 1
<mvc:XMLView id="modifyTableView" viewName="xxx.view.AssignTable"/>
//view 2
<mvc:XMLView id="detailTableView" viewName="xxx.view.AssignTable"/>

So that oView.getId() won't generate the same id in different controller.

Answer 3

/***********************************/
onOpenAddEmployeeDialog: function () {
    var oView = self.getView()
    var oDialog = oView.byId('addEmployeeFragment');

    if ((oDialog = !null)) {
       var oDialog = sap.ui.xmlfragment(oView.getId(), 'sap.ui.view.AddEmployeeFragment'
       oView.addDependent(oDialog);
    }

    var dialogModel = new JSONModel();
    oDialog.setModel(dialogModel, 'dialog');
    oDialog.open();

},
/***********************************/           


/***********************************/
 dialogAfterClose: function () {
    var oView = self.getView()
    var oDialog = oView.byId('addEmployeeFragment');

    //clear dialog Data
    var oDialogData = oDialog.getModel('dialog').getData();
    Object.getOwnPropertyNames(oDialogData).forEach(function(d) {
         oDialogData[d] = 
     });

   dialogModel.setData(oDialogData);
   oDialog.close();
   oDialog.destroy();
},
/***********************************/

*AddEmployee.fragment.xml

<core:FragmentDefinition
  xmlns:core="sap.ui.core" xmlns:m="sap.m"
  xmlns="sap.ui.layout.form"
  xmlns:l="sap.ui.layout">
  <m:Dialog id="addEmployeeFragment"  afterClose="dialogAfterClose" title="Add Employee" contentWidth="500px" contentHeight="600px">
    <m:content>
      <Form editable="true">
        <FormContainer>
            <FormElement label="Actual Entrance Time">
              <fields>
                <m:TimePicker
                  id="empAEDTP1"
                  value="{dialog>/actualStartTime}"
                  valueFormat="HH:mm"
                  minutesStep="5"
                  displayFormat="HH:mm"
                  change="handleChange"/>
              </fields>
            </FormElement>
            <FormElement label="Actual Exit Time">
              <fields>
                <m:TimePicker
                  id="empAEDTP2"
                  value="{dialog>/actualEndTime}"
                  valueFormat="HH:mm"
                  displayFormat="HH:mm"
                  minutesStep="5"
                  change="handleChange"/>
              </fields>
            </FormElement>
            <FormElement label="Note">
              <fields>
                <m:Input value="{dialog>/note}"></m:Input>
              </fields>
            </FormElement>
          </formElements>
        </FormContainer>
        <layout>
          <ResponsiveGridLayout/>
        </layout>
      </Form>
    </m:content>
    <m:endButton>
      <m:Button type="Accept" text="Save" icon="sap-icon://add" press="onSaveEmployee" />
    </m:endButton>
    <m:beginButton>
      <m:Button type="Reject" text="Cancel" icon="sap-icon://cancel" press="dialogAfterClose" />
    </m:beginButton>
  </m:Dialog>
</core:FragmentDefinition>