Fragment Open on Button Click

Fragment simple code 

.xml :

<Button icon="sap-icon://add" press="onAdd" visible="true" tooltip="Add Item"></Button>



add.fragment.xml :

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">

    <Dialog title = "Add " >

    <f:SimpleForm id="SimpleFormToolbar"
editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="4"
labelSpanL="4"
labelSpanM="12"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="2"
columnsM="2"
maxContainerCols = "3"
singleContainerFullSize="false"
ariaLabelledBy="Title1" >
<f:content>

<core:Title text="" />

<Label text="Product : "> </Label>
<Input id="product1" type="Text" showValueHelp="true" class="sapUiSmallMarginBottom" width="15rem"/>

<Label text="Material : "> </Label>
<Input id="material1" type="Text" showValueHelp="true" class="sapUiSmallMarginBottom" width="15rem"/>

<Label text="Packaging Cost:"> </Label>
<Text text="100 INR "></Text>
<Input id="cost2" placeholder="Revised" type="Text" description = "INR" showValueHelp="true" class="sapUiSmallMarginBottom" width="15rem"/>

<core:Title text="" />
<Label text="Valid Form : "> </Label>
<DatePicker width ="50%" id="DP8" placeholder="Enter Date ..." change="handleChange" class="sapUiSmallMarginBottom"/>

<Label text="Attachment"></Label>
<UploadCollection></UploadCollection>

</f:content>
</f:SimpleForm>
<beginButton>
<Button text="Save" type="Accept" press="onSave"/>
</beginButton>
<endButton>
<Button text="CANCEL" type="Accept" press="onCancel"/>
</endButton>

</Dialog>
</core:FragmentDefinition>




.controller.js :

onAdd : function(oEvent) {
var oFilterFrag;
if(!this.oFilterFrag)
this.oFilterFrag = sap.ui.xmlfragment("canDemo.view.add",this);
this.oFilterFrag.open();
}

onCancel:function(){
this.oFilterFrag.close();
},