Introduction et récapitulation
Dans le billet de blog précédent , nous avons créé une nouvelle application SAPUI5 sur notre pile SAP SCP WebIDE Full et nous l'avons configurée pour utiliser la destination vers SAP Netweaver Gateway Demo ES5 .
Que couvrira cet exercice
- Qu'est-ce qu'un manifeste de métadonnées XML et que contient-il?
- Comment utiliser notre modèle OData et le lier à notre application
- Utiliser une
sap.m.Table avec des éléments et une liaison de propriété - Utilisez
sap.ui.model.type.DateTime pour formater la date JavaScript - Comment styliser les colonnes pour agir différemment sur les appareils mobiles / tablettes / ordinateurs de bureau
Codons
Il est maintenant temps de se salir les mains avec du code. Dans cette étape, vous allez afficher un tableau des partenaires commerciaux avec des informations utiles.
La première chose à faire est de consulter nos métadonnées de service. Chaque service oData expose un fichier XML spécial appelé manifeste de métadonnées XML. Vous pouvez le voir en ajoutant $metadata à l'URL du service. Il s'agit de notre URL de métadonnées GWSAMPLE_BASIC . Le manifeste Metatada est vraiment important car il décrit:
- Quel jeu de modèles exposé par le service
- Pour chaque modèle qui est la clé primaire, la liste des attributs (avec le type et les contraintes) et s'il a une propriété de navigation (comment vous pouvez naviguer de ce modèle à d'autres en tant que relations)
- Beaucoup d'autres informations utiles
Jetez un œil au BusinessPartner EntitySet et essayez de deviner quelle propriété j'ai utilisée pour le résultat final de cette étape. Maintenant, consultez la documentation du tableau sur SAPUI5 et essayez de répliquer ma mise en page avec l'ordre correct des colonnes et des éléments. Pour chaque nom de colonne, créez une traduction dans les fichiers i18n.property et utilisez-la dans le XML comme liaison. Maintenant, attachez BusinessPartnerSet à la table, ajoutez la colonne demandée et stylisez les valeurs de colonne selon l'exemple.
Veuillez noter que:
- Créé à affiche un format DateTime spécifique affiché
- La colonne agit différemment si l'application est ouverte dans un téléphone, une tablette ou un navigateur de bureau
Une fois l'exercice terminé, vous pouvez consulter le résultat sur le code source de l'étape 1 de la branche .