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>