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();
},