SAPUI5 Fragment als Dialog öffnen
In SAPUI5 dient ein Fragement der Kapselung und Erhöhung der Wiederverwendbarkeit von Sourcecode. Die Fragment Klasse liegt im sap.ui.core Namespace. Daher muss dieser in der FragmentDefinition deklariert werden. Das Fragment wird in eine eigene Datei mit der Endung .fragment.xml gepackt.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:smartTable="sap.ui.comp.smarttable" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<Dialog id="employeeDialog" title="{i18n>employee.fragment.title}" contentWidth="100%" contentHeight="100%">
<content>
<smartTable:SmartTable id="LineItemsSmartTable" entitySet="Employee" smartFilterId="smartFilterBar" tableType="ResponsiveTable"
useExportToExcel="false" useVariantManagement="false" useTablePersonalisation="true" showRowCount="true"
persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" app:useSmartField="true" vclass="sapUiResponsiveContentPadding"></smartTable:SmartTable>
</content>
<endButton>
<Button text="{i18n>employee.fragment.btnClose}" press="onCloseDialog"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
Das Fragment kann im JavaScript, wie in folgendem Code Snippet dargestellt, im Dialog per lazy-loading geladen und anschließend geöffnet werden.
1. Variante
onOpenDialog: function(){
var oView = this.getView();
if (!this.byId("employeeDialog")) {
sap.ui.core.Fragment.load({
id: oView.getId(),
name: "at.clouddna.demo.DemoApp.view.EmployeeFragment",
controller: this
}).then(function (oDialog) {
jQuery.sap.syncStyleClass(oView.getController().getContentDensityClass(), oView, oDialog);
oView.addDependent(oDialog);
oDialog.open();
}.bind(this));
} else {
this.byId("employeeDialog").open();
}
}
onCloseDialog: function () {
this.byId("employeeDialog").close();
//this.byId("employeeDialog").destroy();
}
2. Variante
_getDialog: function () {
// create dialog lazily
if (!this._oDialog) {
// create dialog via fragment factory
this._oDialog = sap.ui.xmlfragment("dlgEmployee", "at.clouddna.demo.DemoApp.view.EmployeeFragment", this);
// connect dialog to view (models, lifecycle)
this.getView().addDependent(this._oDialog);
}
return this._oDialog;
},
onOpenDialog: function () {
this._getDialog().open();
},
onCloseDialog: function () {
this._getDialog().close();
}