In the mean time I did same for my project, so here is my code.
In your controller that is going to manage your fragment add function to open your dialog.
// open dialog when "idoIconFilter" is clicked
var oIconFilter = this.getView().byId("idoIconFilter");
var that = this; oIconFilter.attachPress(function(oEvent) { that._getFilerOptinsDialog().open(); });Add helper method to your controller for creating your dialog
_getFilerOptinsDialog : function () { // helper function is instantiating the fragment by // calling the sap.ui.xmlfragment method with the path to the fragment definition //as an argument. The function returns the instantiated controls for further use in the app // create dialog lazily if (!this._oDialog) { // create dialog via fragment factory // we pass PlansOverviewPieChartController as parameter so the fragment can use it // i.e. this controller has handler functions for the fragment this._oDialog = sap.ui.xmlfragment("path.to.your.fragment.view.FilterOptionsDialog", this); // connect dialog to view (models, lifecycle) this.getView().addDependent(this._oDialog); } return this._oDialog; },
Create your fragment view
<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" > <Dialog title="{i18n>filter.dialog.title}"> <l:VerticalLayout class="sapUiContentPadding" width="100%"> <l:content> <!-- Filter by date range --> <Label text="{i18n>filter.dialog.dateRange}" labelFor="filterDateRangeSelection"/> <DateRangeSelection id="filterDateRangeSelection" class="sapUiSmallMarginBottom" displayFormat="yyyy/MM/dd" /> <!-- Filter by plan name(s) --> <Label text="{i18n>filter.dialog.planNames}" labelFor="filterPlanNames"/> <MultiInput id="filterPlanNames" suggestionItems="{ path: 'plan>/PlansSet', sorter: { path: 'plan>Name' } }" showValueHelp="false" placeholder="{i18n>filter.dialog.planNames.placeHolder}" enableMultiLineMode="true" > <core:Item key="{plan>TestPlanIds}" text="{plan>Name}" /> </MultiInput> </l:content> </l:VerticalLayout> <beginButton> <Button type="Accept" text="{i18n>filter.dialog.button.ok}" press="onCloseFilterOptionsDialogConfirm"/> </beginButton> <endButton> <Button type="Reject" text="{i18n>filter.dialog.button.cancel}" press="onCloseFilterOptionsDialogCancel"/> </endButton> </Dialog></core:FragmentDefinition>
Add further helper functions to your controller for handling logic forthe fragment. In my case this are onCloseFilterOptionsDialogCancel
and onCloseFilterOptionsDialogConfirm
onCloseFilterOptionsDialogConfirm : function () { // do some logic // .... // .... this._getFilerOptinsDialog().close();
},
onCloseFilterOptionsDialogCancel : function () { // do some logic // .... // .... this._getFilerOptinsDialog().close();
}
Kind regards,
Filip