Uncaught TypeError: this._getDialog(...).open is not a function

[Former Member]

Hello! I am getting this error in the browser. Uncaught TypeError: this._getDialog(...).open is not a function

The code is below

index.html

<script>

  sap.ui.localResources("controller");

  sap.ui.localResources("view");

  sap.ui.localResources("model");

  sap.ui.localResources("fragment");

  var app = new sap.m.App();

  var page = sap.ui.view({

  viewName:"view.DialogBox",

  type:sap.ui.core.mvc.ViewType.XML

  });

  app.addPage(page);

  app.placeAt("content");

  </script>

view

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

  controllerName="controller.DialogBox" xmlns:html="http://www.w3.org/1999/xhtml">

  <Page title="Employees">

  <content>

  <Table items="{/company/employee/element}" mode="SingleSelectLeft" id="empTable">

  <columns>

  <Column>

  <header>

  <Text text="{i18n>EMPLOYEE_NAME}"/>

  </header>

  </Column>

  <Column>

  <header>

  <Text text="{i18n>DEPARTMENT}"/>

  </header>

  </Column>

  <Column>

  <header>

  <Text text="{i18n>ROLE}"/>

  </header>

  </Column>

  <Column>

  <header>

  <Text text="{i18n>EMAIL}"/>

  </header>

  </Column>

  <Column>

  <header>

  <Text text="{i18n>COUNTRY}"/>

  </header>

  </Column>

  <Column>

  <header>

  <Text text="{i18n>ZIPCODE}"/>

  </header>

  </Column>

  <Column>

  <header>

  <Text text="{i18n>PAN}"/>

  </header>

  </Column>

  </columns>

  <items>

  <ColumnListItem>

  <cells>

  <Text text="{employeeName}"/>

  <Text text="{department}"/>

  <Text text="{role}"/>

  <Text text="{email}"/>

  <Text text="{country}"/>

  <Text text="{zip}"/>

  <Text text="{PAN}"/>

  </cells>

  </ColumnListItem>

  </items>

  </Table>

  <Button text="Get" press="getRowdata"/>

  </content>

  </Page>

</core:View>

controller

sap.ui.controller("controller.DialogBox", {

  onInit: function() {

  var oModel = new sap.ui.model.xml.XMLModel();

  oModel.loadData("model/empModel.xml");

  this.getView().setModel(oModel);

  },

  getRowdata: function(oEvent){

  var oTable = this.getView().byId("empTable");

  console.log(oTable.getSelectedItem().getBindingContext().getProperty("employeeName"));

  var oName = oTable.getSelectedItem().getBindingContext().getProperty("employeeName");

  this._getDialog().open();

  sap.ui.core.Fragment.byId("idFragment","idName").setValue(oName);

  },

  _getDialog: function(){

  console.log("get");

  if(!this.dialog)

  this.dialog = sap.ui.xmlfragment("idFragment","fragment.RowData",this);

  return this.dialog;

  }

});

fragment

<core:FragmentDefinition

  xmlns="sap.m"

  xmlns:l="sap.ui.layout"

  xmlns:f="sap.ui.layout.form"

  xmlns:core="sap.ui.core">

  <Dialog>

  <VBox class="sapUiSmallMargin" id="idFragment">

  <f:SimpleForm id="SimpleFormDisplay354"

  minWidth="1024"

  maxContainerCols="2"

  editable="false"

  layout="ResponsiveGridLayout"

  title="Address"

  labelSpanL="3"

  labelSpanM="3"

  emptySpanL="4"

  emptySpanM="4"

  columnsL="1"

  columnsM="1">

  <f:content>

  <Label text="Name" />

  <Input id="idName"/>

  </f:content>

  </f:SimpleForm>

  </VBox>

  </Dialog>

</core:FragmentDefinition>

[Former Member]

Hi!

I tried running this project on another computer with run as "Web app preview". It runs fine. I am running it on Server since i am having some issues with eclipse.

[maheshgonda]

Hi

try this

onOpenDialog : function () {

          this._getDialog().open();

}

_getDialog : function () {

      // create dialog lazily

           if (!this._oDialog) {

           // create dialog via fragment factory

                     this._oDialog = sap.ui.xmlfragment("fragment.RowData");//hear

                     // connect dialog to view (models, lifecycle)

                     this.getView().addDependent(this._oDialog);

           }

return this._oDialog;

},

see this example : at OpenUI5 Explored

[Former Member]

Hi Aishwarya ,

Can you check this.dialog is having the dialog object ...while debugging ..

And instead of returning ...this.dialog why not you open it in the function only ...

this.dialog.open()

thanks

Viplove

[Former Member]

Hello Viplove! Thank you for your response.

I consoled the dialog object on the console

CODE:

console.log("get");

  if(!this.dialog)

  this.dialog = sap.ui.xmlfragment("idFragment","fragment.RowData",this);

  console.log("Dialog:: ", this.dialog);

  this.dialog.open();

it returned

f {bAllowTextSelection: true, mEventRegistry: Object, sId: "idFragment--idFragment", mProperties: d, mAggregations: Object…}

i.e the dialog object is not null.

i also tried to open it in the function itself but itz the same error :

Uncaught TypeError: this.dialog.open is not a function

[Former Member]

Hi Aishwarya ,

Actually this.dialog object which you mentioned above is not the dialog object it is fragment object .. dont know how come its returning the fragment , not the dialog .. if you check the sId its the fragment id ... can you check the aggregation of the object .. is it containing the dialog ?

thanks

Viplove

[b_punith]

Hi Aishwarya.

In your code,

Can U try below and see the result,

-----------------------

  this.dialog = sap.ui.xmlfragment("idFragment",this);

Regards,

Puntih

[Former Member]

Hello Punith!

Thank you for your response!

I tried what you suggested. It gives 'file not found error'

[Former Member]

Hello Viplove!

Yes i checked the aggregation. It dosen't contain dialog object

[Former Member]

Hi Aishwarya ,

its bit weird .. ok can you try to add the the dependent command , without that also it should work but try it this might help : this.getView().addDependent(this.dialog);

and also can you check your file name is RowData.fragment.xml in fragment folder

thanks

Viplove

[b_punith]

Aishwarya,

Its very clear that you are specifying wrong "idFragment",

Ensure "idFragment" should be asolute path of your Fragment in  your UI5 project.

Regards,

Punith

[francesco_alborghetti]

The original fragment instantiation I can see into the provided code is:

this.dialog = sap.ui.xmlfragment("idFragment","fragment.RowData",this);

So I think Aishwarya is already using the right fragment name that can be loaded by the module system (fragment.RowData).

What it looks strange to me is that the same id is used for the fragment and for the dialog VBOX:

<VBox class="sapUiSmallMargin" id="idFragment">

I would try to change the VBOX id in something different, but I am not sure if this is the issue.

Francesco

[Former Member]

Hi Francesco ,

If you check one of the comments of her above , this.dialog is returning Vbox not the dialog .. thats strange ...

thanks

Viplove