✒️SAP Fiori La utilización de los controles en la UI
SAP Fiori La utilización de los controles en la UI
Resumen Unidad 3 capitulo 5
1. Ejemplo de generacion de una fuente de datos
Databinding: asociar dos instancias de información, un modelo y una vista de modo tal que queden sincronizados
Ejemplo:
a. Crear un archivo products.json y agregarlo a la carpeta mockdata del proyecto
b. Modificar manifest.json.
2.1 En la sección "dataSources",
agregar "productos": { "uri": "./mockdata/products.json", "type" : "JSON" }
2.1 En la sección "models",
agregar "products_json": { "type": "sap.ui.model.json.JSONModel", "dataSource": "productos" }
c. En return Controller.extend("ns.controles.controller.View1", { .... }
{ onInit: function () { var dataModel = this.getOwnerComponent().getModel("products.json");
this.getView().setModel(dataModel); }
d. Dentro del control table en las columnas hacer el binding referenciado la fuente de datos.
<ColumnListItem id="_IDGenColumnListItem1" type="active" press="showSupplierName" >
<Label id="_IDGenLabel6" text="{products_json>ProductId}" />
</ColumnListItem>
1. Otros controles
a) control Input ... (sap.m.Input) sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Input
cuando lleva el atributo showSuggestion = "true" indica que irá acompañado de una lista de referencia. El tag <suggestionItems> permitirá referenciar una lista con su binding, p.ej
<Input id="inputProductos" value="{products_json>/Description}" class="sapUISmallMarginEnd">
<suggestionItems><core:Item id="_IDGenItem1" text="{products_json>Description}" /></suggestionItems>
<Input/>
b) control Select ... (sap.m.Input) sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Select
<Select id="slCurrencyCode" selectedKey="{products_json>/CurrencyCode}" items="{products_json>/ListCurrencyCode}">
<Items><core:Item id="_IDGenItem2" key="{products_json>key}" text="{products_json>text}" /></Items>
<Select/>
c) control Label ... (sap.m.Label) sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Label
d) control Button ... (sap.m.Button) sapui5.hana.ondemand.com/sdk/#/entity/sap.m.Button
ejemplo
<Button id="btnFilter" text="{btnFilter}" icon="sap-icon://search" press="onfilter" class="sapUISmallMarginEnd"/>
Referencia sobre los controles en:
https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html
Sobre el autor
Publicación académica de Cristian Cash, en su ámbito de estudios para la Carrera Consultor en SAP Fiori.
SAP SemiSenior
Cristian Cash
Profesión: Consultor Tecnológico - Argentina - Legajo: GX99J
✒️Autor de: 23 Publicaciones Académicas
🎓Egresado del módulo:
Presentación:
Amplia experiencia en el ambito tecnologico y corporativo en labores de consultoria técnica y funcional en forma individual y coordinando equipos.
Certificación Académica de Cristian Cash
Disponibilidad Laboral: FullTime
