Einführung & Zusammenfassung
Im vorherigen Blogbeitrag haben wir eine neue SAPUI5-Anwendung auf unserem SAP SCP WebIDE Full-Stack erstellt und diese so konfiguriert, dass das Ziel für die SAP Netweaver Gateway Demo ES5 verwendet wird .
Was wird in dieser Übung behandelt?
- Was ist ein XML-Metadatenmanifest und was ist darin enthalten?
- So verwenden Sie unser OData-Modell und binden es in unsere Anwendung ein
- Verwenden Sie eine
sap.m.Table mit Elementen und Eigenschaftsbindung - Verwenden Sie
sap.ui.model.type.DateTime um das JavaScript-Datum zu formatieren - So gestalten Sie Spalten so, dass sie auf Mobil- / Tablet- / Desktopgeräten anders funktionieren
Lassen Sie uns codieren
Jetzt ist es Zeit, uns mit etwas Code die Hände schmutzig zu machen. In diesem Schritt zeigen Sie eine Tabelle mit Geschäftspartnern mit einigen nützlichen Informationen an.
Als erstes müssen Sie unsere Service-Metadaten überprüfen. Jeder oData-Dienst stellt eine spezielle XML-Datei mit dem Namen XML Metadata Manifest bereit. Sie können es sehen, indem Sie $metadata an die Service-URL anhängen. Dies ist unsere GWSAMPLE_BASIC-Metadaten-URL . Das Metatada-Manifest ist wirklich wichtig, weil es beschreibt:
- Welcher Modellsatz wird vom Dienst verfügbar gemacht?
- Für jedes Modell, das der Primärschlüssel ist, die Liste der Attribute (mit Typ und Einschränkungen) und ob es eine Navigationseigenschaft hat (wie Sie als Relationen von diesem Modell zu anderen navigieren können)
- Viele andere nützliche Informationen
Schauen Sie sich das BusinessPartner EntitySet an und versuchen Sie zu erraten, welche Eigenschaft ich für das Endergebnis dieses Schritts verwendet habe. Lesen Sie nun die Tabellendokumentation zu SAPUI5 und versuchen Sie, mein Layout mit der richtigen Reihenfolge der Spalten und Elemente zu replizieren. Erstellen Sie für jeden Spaltennamen eine Übersetzung in den i18n.property Dateien und verwenden Sie sie im XML als Bindung. Fügen Sie nun das BusinessPartnerSet an die Tabelle an, fügen Sie die angeforderte Spalte hinzu und formatieren Sie die Spaltenwerte gemäß dem Beispiel.
Bitte beachten Sie Folgendes:
- Bei Erstellt um wird eine bestimmte formatierte DateTime angezeigt
- Spalten verhalten sich anders, wenn die App in einem Telefon, Tablet oder Desktop-Browser geöffnet wird
Nachdem Sie die Übung beendet haben, können Sie das Ergebnis im Quellcode des Verzweigungsschritts 1 überprüfen.