OData V4 Übung 1: OData V4 Service generieren

In dieser Übung wird für die vorhandene Service Definition ZI_UI5_CUSTOMER_SD ein OData V4 Service Binding angelegt.

• Aufgabe 1.1 - Service generieren

OData V4 Übung 1 - Aufgabe 1.2 - Daten

Ein paar Datenzugriffe im Gateway Client?

OData V4 Übung 2 - Aufgabe 2.2 - 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',
							   		    parameters: {
										   $count: true,
										   $$updateGroupId : 'customerGroup'
										} }" 
							   mode="SingleSelectLeft">

							<headerToolbar>
								<OverflowToolbar>
									<Title text="Kunden" level="H2"/>
									<SearchField placeholder="Nachname oder Vorname" liveChange=".onSearch" width="70%" />
									<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" />
									<Button
										id="idOnEdit"
										tooltip="Edit"
										icon="sap-icon://edit"
										press=".onEdit" />
									<Button
										id="idOnDoSomething"
										text="Mach was"
										press=".onDoSomething" />
								</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" highlight="{= ${CountryCode} === 'DE' ? 'Success' : 'None' }"	>
                                <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="{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 V4 Übung 2 - Aufgabe 2.3 - View Controller - onDataChange

Keine Unterschiede zu V2

    onDataChange: function( oEvent ){
        if ( this.getView().getModel().hasPendingChanges() ){
            this.byId("idToolbar").setEnabled( true );  
        } else {
            this.byId("idToolbar").setEnabled( false ); 
        }
    },

OData V4 Übung 2 - Aufgabe 2.4 - View Controller - onPressReset

Hier haben wir nun Unterschiede in OData V4

    onPressReset: function (oEvent){
        if ( this.getView().getModel().hasPendingChanges() ){
            this.byId("idTable").getBinding("items").resetChanges();
            MessageToast.show("Änderungen zurückgesetzt");
            this.onDataChange();
        }
    },

OData V4 Übung 2 - Aufgabe 2.6 - View Controller - OnDelete

Nichts besonderes - nur ein Dialog

        onDelete: function () {

            if (!this.oApproveDialog) {
                this.oApproveDialog = new Dialog({
                    type: DialogType.Message,
                    title: "Löschen",
                    content: new Text({ text: "Sollen die Einträge gelöscht werden?" }),
                    beginButton: new Button({
                        type: ButtonType.Emphasized,
                        text: "Löschen",
                        press: function () {
                            this.processDelete();
                            this.oApproveDialog.close();
                        }.bind(this)
                    }),
                    endButton: new Button({
                        text: "Abbrechen",
                        press: function () {
                            this.oApproveDialog.close();
                        }.bind(this)
                    })
                });
            }

            this.oApproveDialog.open();

        }