SAPUI5 Fragment als Dialog öffnen

You are here:
← All Topics

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

Schlagwörter: