OData V2 Übung 1 - Aufgabe 1.1 - Service generieren

Wir verwenden hier kein Fiori Elements, daher verwenden wir als Binding Type OData V2 - Web API. Dabei werden mögliche UI Annotations nicht berücksichtigt.

• Service Binding Name: ZI_UI5_CUSTOMER_WAPI_V2_##
• Binding Type: OData V2 - Web API

OData V2 Übung 1 - Aufgabe 1.3 - Daten

Als nächstes sehen wir uns die Daten / Customer näher an.

• Wie viele Customer sind in Summe vorhanden? Customer/$count
• Wie viele Einträge gibt es mit der City „Roma“ $filter=City eq 'Roma'&$inlinecount=allpages
• Welcher „Roma“ Eintrag ist laut alph. Sortierung der erste Eintrag? $orderby=LastName asc
• Wieviele Einträge aus Deutschland – ungleich der Stadt „Berlin“ sind vorhanden?
  • $filter=City ne 'Berlin' and CountryCode eq 'DE'&$inlinecount=allpages
• Probieren Sie ruhig weitere Varianten aus:
  • $filter, $count, $orderby, $inlinecount, $top, $skip
  • $filter=CustomerId gt '200'
  • $filter=startswith(FirstName, 'Si')
  • https://www.odata.org/documentation/odata-version-2-0/uri-conventions

OData V2 Übung 2 - Aufgabe 2.1 - Generieren der UI5 Freestyle Applikation

In dieser Übung wird nun die UI5 Freestyle Anwendung mit dem BAS erstellt.

• Starten Template Wizard mit STRG + SHIFT + P
• Generator SAP Fiori application auswählen
• Template Basic auswählen
• Data Source, System (K1X) entsprechend auswählen
• Generiertes OData V2 Service aus Übung 1 suchen/auswählen
• Module: demov2##
• Application namespace: de.ui5ws.demos
• Keine Deployment Config, kein FLP, kein Advanced Options
• Starten -> Warten -> Testen

OData V2 Übung 2 - Aufgabe 2.3 - View Anpassungen

Der View soll ein Suchfeld, eine Tabelle und ein paar Buttons enthalten. Bitte ersetzen sie das Page Tag im View mit nachfolgendem Shell Tag. Keine Sorge, man muss es hier nicht lesen können. ;-)

<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="Kunden OData V2">
					<content>
						<Table id="idTable"
						       inset="false"
							   growing="true"
							   growingThreshold="18"
						       items="{ path: '/Customer',
						                sorter: { path: 'CustomerId' } }">

							<headerToolbar>
								<OverflowToolbar>
									<Title text="Kunden" level="H2"/>
									<SearchField placeholder="Nachname oder Vorname" liveChange=".onSearch" width="80%" />
									<ToolbarSpacer/>
									<Button
										id="idOnSort"
										tooltip="Sort"
										icon="sap-icon://sort"
										press=".onSort" />
									<Button
										id="idOnCreate"
										tooltip="Create"
										icon="sap-icon://create"
										press=".onCreate" />
									<Button
										id="idOnDelete"
										tooltip="Delete"
										icon="sap-icon://delete"
										press=".onDelete" />

								</OverflowToolbar>
							</headerToolbar>

							<columns>
								<Column width="8em">
									<Text text="ID" />
								</Column>
								<Column width="10em">
									<Text text="Nachname" />
								</Column>
								<Column>
									<Text text="Vorname" />
								</Column>
								<Column>
									<Text text="Ort/Stadt" />
								</Column>
								<Column width="5em">
									<Text text="Land" />
								</Column>
								<Column width="22em">
									<Text text="eMail" />
								</Column>
								<Column width="12em">
									<Text text="Telefon" />
								</Column>
								<Column>
									<Text text="Ersteller" />
								</Column>
							</columns>
							<items>
							   <ColumnListItem vAlign="Middle">
							      <cells>
                                    <Text text="{CustomerId} " />
                                    <Text text="{LastName}" />
                                    <Text text="{FirstName}" />
                                    <Text text="{City}" />
                                    <Text text="{CountryCode}" />
                                    <Text text="{EmailAddress}" />
                                    <Link
                                        text="{PhoneNumber}"
                                        press="onPressPhoneNumber" />
                                    <Text text="{LocalCreatedBy} " />

								  </cells>
								</ColumnListItem>
							</items>
						</Table>
					</content>
				
					<footer>
						<OverflowToolbar id="idToolbar" enabled="false">
							<ToolbarSpacer/>
							<Button type="Accept" text="Sichern" press="onPressSave" enabled="true"/>
							<Button type="Reject" text="Zurücksetzen" press="onPressReset" enabled="true" />
						</OverflowToolbar>
					</footer>
				</Page>
			</pages>
		</App>
	</Shell>

OData V2 Übung 2 - Aufgabe 2.4 - Suchfeld implementieren

Im oberen Bereich des Views gibt es ein Suchfeld. Wir wollen nun die notwendige Implementierung dafür vornehmen.

Zuerst müssen wir dafür ein paar Module im View Controller aufnehmen:

    "sap/ui/model/Sorter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/FilterType"

Nicht vergessen, die neuen Module in der Funktions-Signatur aufzunehmen:

function (Controller, Sorter, Filter, FilterOperator, FilterType ) {

Und nun noch die Methode onSearch wie folgt implementieren:

onSearch: function ( oEvent ) {
    var sQuery = oEvent.getSource().getValue();
    if (sQuery && sQuery.length > 0) {
        var oFilter = new Filter("LastName", FilterOperator.Contains, sQuery);
        this.byId("idTable").getBinding("items").filter( oFilter, FilterType.Server );
    } else {
        this.byId("idTable").getBinding("items").filter( );
    }
}

OData V2 Übung 2 - Aufgabe 2.6 - Breitenangaben

Jetzt wollen wir die Breite der eMail Adresse etwas vergrößern. Im Zuge dessen probieren wir verschiedene Breiten.

• eMail Adresse soll 25em sein
• Telefonnummer soll auf 12em angepasst werden

OData V2 Übung 3 - Aufgabe 3.1 - Eingabefelder

Wir beginnen im View und tauschen die aktuellen Anzeigefelder durch Inputfelder aus.

<ColumnListItem vAlign="Middle">
    <cells>
    <Text text="{CustomerId} " />
    <Input id="idInputLastName" value="{LastName}" liveChange="onDataChange" change="onDataChange" required="true" />
    <Input value="{FirstName}" liveChange="onDataChange" change="onDataChange"/>
    <Input value="{City}" liveChange="onDataChange" change="onDataChange"/>
    <Input value="{CountryCode}" liveChange="onDataChange" change="onDataChange"/>
    <Input value="{EmailAddress}" liveChange="onDataChange" change="onDataChange"/>
    <Input value="{PhoneNumber}" liveChange="onDataChange" change="onDataChange"/>
    <Text text="{CreatedBy} " />
    </cells>
</ColumnListItem>

Hinweise

• liveChange reagiert in Echtzeit auf Eingaben, change wird erst bei "enter" ausgelöst

Fragestellungen

• Wie sieht das Ergebnis aus?
• Können die Einträge geändert werden?
• Funktioniert der Filter nach wie vor?ui5

OData V2 Übung 3 - Aufgabe 3.3 - Zurücksetzen implementieren

Wenn ein Anwender nicht gesicherte Änderungen zurücksetzen will, kann dies mit dem Button „Zurücksetzen“ vorgenommen werden. Im Coding wird geprüft, ob es offene Änderungen gibt, und wenn ja werden die Änderungen des OData Models zurückgesetzt.

Dafür ist die Methode onPressReset zu implementieren:

onPressReset: function (oEvent){
    if ( this.getView().getModel().hasPendingChanges() ){
        this.getView().getModel().resetChanges();
        MessageToast.show( "Alle offenene Änderungen wurden zurückgesetzt", { width: "25em" } ); 
    } else {
        MessageToast.show( "Keine offenen Änderungen", { width: "25em" } );     
    };
},

Hinweise

• Wir verwenden hier erstmals MessageToast. Das Module sap/m/MessageToast muss natürlich oben aufgenommen werden. Auch das MessageToast in der Signatur ganz oben nicht vergessen.

Fragestellungen

• Können gemachte Änderungen zurückgesetzt werden?

OData V2 Übung 3 - Aufgabe 3.5 - Save implementieren

Jetzt wird es spannend - jetzt müssen wir die Methode onPressSave implementieren. Dann sollten die Änderungen auch ins Backend gesichert werden.

onPressSave: function (oEvent){
    if ( this.getView().getModel().hasPendingChanges( ) ){      
        this.getView().getModel().submitChanges( { 
                                    success: function( oEvent ){ alert( "Erfolgreich" ) },
                                    error: function( oEvent ){ alert( "Fehlerhaft" ) } } );
    } else {
        MessageToast.show( "Keine offenen Änderungen", { width: "25em" } );     
    };          
},

Hinweise

• Modeländerungen werden mit submitChanges übertragen
• success und error können implementiert werden
• Fürs erste reicht uns die Ausgabe mit Alert

Fragestellungen

• Funktioniert das Sichern der Änderungen?
  • Kontrolle durch Refresh

OData V2 Übung 3 - Aufgabe 3.7 - Save - Fehler im SAVE behandeln

Die Verarbeitung der Daten erfolgt als OData Batch. Das heißt – die Übermittlung des Batches kann erfolgreich sein, die Verbuchung einer der enthaltenen Entitäten kann jedoch fehlerhaft sein.

Dies muss separat im onSuccessUpdate geprüft und behandelt werden. In etwa wie folgt:

	try {
		if (oEvent.__batchResponses[0].response.statusCode >= 400) {
			MessageToast.show( "Fehler beim Sichern" );
		}   

	} catch (err) {
	};

	try {
		if (oEvent.__batchResponses[0].__changeResponses[0].statusCode = 201 ) {
			MessageToast.show( "Änderung erfolgreich gesichert" );
			this.onDataChange();
		}
	} catch (err) {
	}

OData V2 Übung 3 - Aufgabe 3.9 - Bestehende Einträge löschen

Wir wollen auch Einträge löschen. Dafür müssen wir im View zuerst einmal im Tabel Contol die Eigenschaft mode auf SingleSelectLeft setzen. Wir könnten auch MultiSelect verwenden:

<Table id="idTable"
		inset="false"
		growing="true"
		growingThreshold="18"
		items="{ path: '/Customer',
				sorter: { path: 'CustomerId' } }"
		mode="SingleSelectLeft">

Für das Löschen ist folgende Methode zu implemenieren:

onDelete: function() {
	var oSelectedItems = this.byId("idTable").getSelectedItems();

	if ( oSelectedItems ) {
		for (var i = 0; i < oSelectedItems.length; i++) {
			var sPath = oSelectedItems[ i ].getBindingContext().getPath();
			this.getView().getModel( ).remove( sPath );
		}
		this.onDataChange();
	}
},

OData V2 Übung 3 - Aufgabe 3.10 - Sortierung nach Nachnamen

Jetzt wollen wir noch den Sort-Button implementieren und eine Sortierung nach Nachnamen erreichen. Wir verwenden hier einen Trick. – Zuerst „unbinden“ wir die Daten, dann binden wir diese neu - mit neuer Sortierung.

onSort: function( oEvent ) {
                var oTable = this.byId("idTable");
                var oSorter = [];
                var oTemplate = oTable.getBindingInfo("items").template;
                oSorter.push(new Sorter('LastName',false));
                oTable.unbindItems();
                oTable.bindItems( { path: "/Customer", template: oTemplate,
                                                       sorter: oSorter } ); 
            },

Hinweise

• Die Implementierung ist nicht perfekt, sie soll nur zeigen wir man Bindings dynamisch ändern kann.
  • z.B. wird hier ein bestehender Filter nicht berücksichtigt

OData V2 Übung 3 - Aufgabe 3.12 - Update eines Elements - direkt Call

• Variante 2 - OData direkt ändern

	var oUpdateData = {};
	oUpdateData.PhoneNumber='+49 888';
	that.getView().getModel( ).update( sPath, oUpdateData );

OData V2 Übung 4 - Aufgabe 4.2 - Expression Binding

Alle Zeilen aus Deutschland sollen vom Status her grün eingefärbt werden. Dafür wird die Eigenschaft highlight des ColumnListItem verwendet. Mögliche Werte sind z.B. Success, None, Error, ..

Mit Expression-Binding lassen sich in der View bestimmte Funktionen direkt im Binding ausführen. Expression-Binding sieht folgendermaßen aus: {= <expression>}

Auf Models kann per ${..} zugegriffen werden.

<ColumnListItem vAlign="Middle" highlight="{= ${CountryCode} === 'DE' ? 'Success' : 'None' }"	>

Weitere Beispiele:

editable="{= ${CountryCode} === 'DE' ? true : false }"
editable="{= ${CountryCode} === 'DE'}"