ASP.Net Core mit OpenUI5 - OData V4 Model

Es klingt schon nach einer sehr seltsamen Mischung, die aktuellste Version von ASP.Net Core mit OpenUI5 zu kombinieren. Doch genau mit dem Thema möchte ich mich momentan intensiver beschäftigen. Für diejenigen, die es nicht kennen: OpenUI5 ist die OpenSource-Variante des Frameworks SAPUI5. Es handelt sich dabei um ein JavaScript-Framework zur Erstellung von Business-Anwendungen primär für den Einsatz zusammen mit einem SAP-System. OpenUI5 enthält einen Großteil des Funktionsumfangs von SAPUI5, steht dagegen aber frei zur Verfügung.

Warum OpenUI5?

Bevor ich in die tatsächlichen technischen Details gehe zunächst eine ganze andere Frage: Warum überhaupt? Derzeit wird im Verbund mit ASP.Net Core meistens von Angular oder React gesprochen. Der Grund liegt für nicht darin, weil ich ein Framework besser als das andere halte, ganz im Gegenteil. Ich bin zwar kein Experte im Web-Bereich, ich gehe aber nicht davon aus, dass OpenUI5 die Crème de la Crème unter den Web-Frameworks ist. Der wesentliche Grund für mich ist die Tatsache, dass ich im beruflichen Umfeld stets sehr nah am SAP-Umfeld unterwegs bin – ohne selbst ein ABAP- oder UI5-Entwickler zu sein. OpenUI5 hat für mich das Potential, hier zwei Fliegen mit einer Klappe zu schlagen. Zum einen ein Web-Framework für eigene Web-Anwendungen benutzen zu können, zum anderen wichtiges Know-How im SAP-Umfeld aufzubauen.

Erste Schritte mit OpenUI5

Dieser Artikel ist kein OpenUI5 Tutorial, für weitere Informationen zu OpenUI5 sei an der Stelle auf die Website des OpenUI5 Projekts verwiesen [1]. Auch sehr interessant sind das GitHub-Projekt zu OpenUI5 [2] und das Walkthough Tutorial [3].

OpenUI5 App mit OData V4 Service

Mein erstes kleines Testprogramm in der Kombination von ASP.Net Core und OpenUI5 ist ein in ASP.Net Core gehosteter OData V4 Service mit zugehöriger Web-Oberfläche. Die Web-Oberfläche ist dabei eine Tabelle, welche beliebig sortiert und gefiltert werden kann (Siehe nachfolgende Abbildung). Das Projekt befindet sich in einem Github-Projekt [4] im Unterordner App_01. Es ist als normale ASP.Net Core Webanwendung umgesetzt. Die OpenUI5-App befindet sich mit allen notwendigen Dateien im wwwroot-Ordner. Der OData V4 Service wird über die PersonController-Klasse bereitgestellt.

Die kleinen und großen Probleme…

Nun gab es abseits der Abarbeitung von Tutorials natürlich auch ein paar kleine und große Stolpersteine, auf die ich hier kurz eingehen möchte. Ein Thema war etwa der zusätzlich notwendige Mime-Typ für die Übersetzungsdateien von OpenUI5. Es werden Dateien mit der Endung .properties verwendet, welche ASP.Net Core zunächst nicht kennt. Das folgende Code-Snippet kann zur Lösung dieses Problems in die Configure-Methode von ASP.Net Core eingefügt werden.

// Support mime-type for i18n.properties
// see https://stackoverflow.com/questions/51770084/how-to-add-mime-types-in-asp-net-core
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".properties"] = "text/plain";
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")),
    RequestPath = "",
    ContentTypeProvider = provider
});

Weiterhin erfordert OpenUI5 bei der Verwendung von OData V4, dass der Service Batching unterstützt. Das kann relativ einfach mit nachfolgenden Code-Snippet aktiviert werden.

// Support Mvc and odata queries
// see https://devblogs.microsoft.com/odata/asp-net-core-odata-now-available/
//
// Support batching
// see https://github.com/OData/WebApi/issues/1313
app.UseODataBatching();
app.UseMvc(routeBuilder =>
{
    routeBuilder.Select().Expand().Filter().OrderBy().MaxTop(100).Count();
    routeBuilder.MapODataServiceRoute("odata", "odata", GetEdmModel(), new DefaultODataBatchHandler());
});

Was insgesamt aber sehr gut geholfen hat bei der Erstellung des OData Dienstes war ein Blog-Eintrag von Sam Xu [5].

Auf der OpenUI5 Seite muss man darauf achten, dass explizit OData in der Version 4 verwendet wird. Hier hing ich anfangs relativ lange, weil standardmäßig Version 2 genutzt wird und damit die Datenabfrage zwischen OpenUI5 und ASP.Net Core nicht funktioniert hat. Nachfolgendes Code-Snippet zeigt den zugehörigen JavaScript-Code.

onInit: function() {
	// Adding service to the odata model
	var oModel = new sap.ui.model.odata.v4.ODataModel({
		serviceUrl: "/odata/",
		synchronizationMode: "None",
		operationMode: "Server"
	});

	var oView = this.getView();
	oView.setModel(oModel);
},

Interesse geweckt?

Wie weiter oben geschrieben befindet sich der vollständige Code dieses Testprogramms in dem Github-Projekt unter [4] im Unterordner App_01. Es ist eine C#-Solution für Visual Studio 2019 und hat alles dabei, was zum Ausprobieren benötigt wird.

Verweise

Ebenfalls interessant

ASP.Net Core mit OpenUI5 – DataBinding
https://www.rolandk.de/wp-posts/2019/06/asp-net-core-mit-openui5-databinding/

ASP.Net Core mit OpenUI5 – OData V4 Model