Tiles - Configuración y Navegación

SAP Fiori – Administración de aplicaciones
Tiles - Configuración y Navegación
Solución – Laboratorio
1
Contenido
1. Tile estático ...................................................................................................................... 3
2. ICF – Servicio proveedor de noticias ................................................................................. 5
3. Tile de noticias ................................................................................................................ 17
4. Rol de navegación para tiles de noticias ......................................................................... 20
5. Tile dinámico .................................................................................................................. 20
7. Aplicaciones Fiori con LPD_CUST .................................................................................... 28
8. Asignar tiles al grupo personalizado ............................................................................... 34
2
1. Tile estático
En el sistema SAP Front-End ejecutamos el código de transacción

/UI2/FLPD_CUST que abre en el navegador la aplicación Fiori Launchpad
Designer.
En la pestaña “Catalogs” filtramos por el catálogo personalizado creado en
el anterior laboratorio con el nombre Z_TILES_BC_MFA199. Con la opción
“+ (Add Tile) creamos un nuevo Tile.
En el siguiente paso, seleccionamos la plantilla para el Tile estático.
3
En la pantalla de configuración completamos la información de los

siguientes campos con sus correspondientes valores y guardamos las
modificaciones:
Campo Valor
Title Fiori Library
Icon sap-icon://Fiori2/F0251
Information Fiori Apps Library Repository
Use semantic object Flag desactivado
navigation
Target URL https://fioriappslibrary.hana.ondemand.com/sap/fix/extern
alViewer/
4
Al guardar, visualizamos el nuevo tile en el catálogo.
2. ICF – Servicio proveedor de noticias
En la transacción SICF creamos un subelemento en el virtual host por

defecto, cuyo nombre será el mismo que el código de usuario SAP (en este
caso MFA199). Utilizando el menú contextual (que se activa al pulsar el
botón derecho del ratón sobre el “VIRTUAL DEFAULT HOST”) seleccionamos
la opción “New Sub-Element”.
5
En la siguiente ventana, indicamos la descripción y guardamos las

modificaciones.
6
Asignamos el paquete de desarrollo.
7
En la siguiente ventana indicamos la orden de transporte de tipo

Workbench.
Volvemos a la pantalla anterior y repetimos la acción que permite crear un

subelemento, que cuelga del anterior subelemento creado.
8
Le asignamos el nombre “news” y continuamos.
9
En la siguiente ventana, indicamos la descripción y guardamos. Por tener el

nodo padre bloqueado en la orden de transporte, el sistema indicará que
bloqueará este elemento en la misma orden de transporte y paquete que
el elemento superior. Aceptamos la propuesta del sistema.
En una nueva ventana accedemos a la transacción SE24 (Class Builder) para

crear una clase ABAP llamada ZCL_MFA199 (reemplace MFA199 con el
código de su usuario SAP).
10
Indicamos la descripción y dejamos las demás configuraciones propuestas

por el sistema de clase ABAP usual.
En los siguientes pasos asignamos el paquete de desarrollo y la orden de

transporte de tipo Workbench. En la pestaña “Interfaces” implementamos
la interfaz estándar con el nombre IF_HTTP_EXTENSION.
11
En la pestaña “Methods” pulsamos doble clic sobre el nombre del método

“IF_HTTP_EXTENSION~HANDLE_REQUEST” para implementar la lógica de
programación.
Implementamos el siguiente código fuente, que se encarga de consumir el

servicio RSS de la URL indicada:
METHOD if_http_extension~handle_request.
CONSTANTS lc_url TYPE string VALUE 'http://ep00.epimg.net/rss/elpa

is/portada.xml'.
cl_http_client=>create_by_url(
EXPORTING
url = lc_url " URL
IMPORTING
client = DATA(lo_http_client) " HTTP Client Abs
traction
EXCEPTIONS
argument_not_found = 1
plugin_not_active = 2
internal_error = 3
OTHERS = 4
).
IF sy-subrc EQ 0.
" Petición al servidor

lo_http_client->send(
EXCEPTIONS
http_communication_failure = 1
http_invalid_state = 2
http_processing_failed = 3
http_invalid_timeout = 4
OTHERS = 5
12
).
" Lectura de la respuesta

lo_http_client->receive(
EXCEPTIONS
http_communication_failure = 1
http_invalid_state = 2
http_processing_failed = 3
OTHERS = 4
).
IF sy-subrc EQ 0.
" Status
server->response-
>set_status( code = 200 " HTTP Status Code
reason = 'OK' ). " HTTP status
description
" Content Type
server->response-
>set_content_type( content_type = 'application/xml; charset=utf-8' ).
" Respuesta
server->response->set_data( lo_http_client->response-
>get_data( ) ).
ELSE.
lo_http_client-
>get_last_error( IMPORTING code = DATA(lv_code) " Return Value,
Return Value After ABAP Statements
message = DATA(lv_me
ssage) ). " Error Message
" Error Status

server->response-
>set_status( code = lv_code " HTTP Status Code
reason = lv_message ). " HTTP st
atus description
ENDIF.
ELSE.
" Error Status

server->response-
>set_status( code = 500 " HTTP Status Code
reason = 'HTTP_INTERNAL_SERVER_ERR
OR' ). " HTTP status description
ENDIF.
ENDMETHOD.
13
Activamos la clase ABAP y volvemos a la ventana donde tenemos el

subelemento “news” del nodo ICF. En la pestaña “Handler List” añadimos
el nombre de la clase ABAP y guardamos las modificaciones.
Volvemos a la pantalla anterior y activamos el servicio, utilizando la opción

“Activate Service” del menú contextual.
14
Confirmamos la activación con la opción “Yes”.
15
Por último, utilizamos de nuevo el menú contextual para realizar una

prueba del servicio.
En el navegador visualizamos la respuesta del servicio.
16
3. Tile de noticias
En la aplicación Fiori Launchpad Designer, en el mismo catálogo

Z_TILES_BC_MFA199, creamos un tile de noticias seleccionando la plantilla
correspondiente para este tipo de tile.
17
En la configuración del tile, en el marco “Article Feeds”, añadimos la fuente

de los artículos (la URL del servicio ICF implementado en el paso anterior) y
guardamos las modificaciones.
18
Al guardar, visualizamos el nuevo tile de noticias disponible en el catálogo

personalizado.
19
4. Rol de navegación para tiles de noticias
Utilizando la transacción PFCG, copiamos el rol estándar

SAP_UI2_NEWS_TILE al rol con el nombre ZSAP_UI2_NEWS_TILE y lo
asignamos al usuario de negocio.
Si el role existe en el sistema, saltamos el paso de creación a través de la

copia y procedemos con la asignación del rol al usuario de negocio.
5. Tile dinámico
En el catálogo de los servicios OData (tr. /IWFND/MAINT_SERVICE)

comprobamos si el servicio OData a utilizar en el tile dinámico está activo.
Filtramos por el valor “*SD_CUSTOMER_INVOICES_CREATE” en el campo
“Technical Service Name” del filtro disponible en el menú superior.
20
Con la opción “Call Browser” realizamos una petición al servicio OData.
En la respuesta del servicio buscamos la colección con el nombre

I_SalesOrganization.
21
Construimos la URL del servicio OData, realizando una petición de nuevo al

servicio OData desde el navegador:
/sap/opu/odata/sap/SD_CUSTOMER_INVOICES_CREATE/I_SalesOrganizat
ion/$count

Z_TILES_BC_MFA199, creamos un tile dinámico seleccionando la plantilla
correspondiente para este tipo de tile.
22

modificaciones:
Campo Valor
Title Invoices
Information Sales Organizations
Service URL /sap/opu/odata/sap/SD_CUSTOMER_INVOICES_CREATE/I_S
alesOrganization/$count
Refresh Interval in 5
Seconds
Use semantic object Flag desactivado
navigation
Target URL https://fioriappslibrary.hana.ondemand.com/sap/fix/extern
alViewer/
23
Al guardar las modificaciones, visualizamos el nuevo tile disponible en el

catálogo personalizado.
6. Target Mapping

Z_TILES_BC_MFA199, creamos un nuevo tile estático.
24

modificaciones:
Campo Valor
Title Billing Documents
Use semantic object Flag activo
navigation
Semantic Object BillingDocument
Action create
Al guardar, visualizamos el nuevo tile en el catálogo personalizado.
25
En la transacción SICF, comprobamos que el servicio disponible en la ruta

“/sap/bc/ui5_ui5/sap/sd_cusinv_cres1” está activo.
Volvemos de nuevo al catálogo personalizado y creamos el Target Mapping.

En la pestaña “Target Mappings”, pulsamos sobre la opción “Create Target
Mapping” disponible en la parte inferior.
26

modificaciones:
Campo Valor
Semantic Object BillingDocument
Action create
Application Type SAPUI5 Fiori App
Title Create Billing Documents
URL /sap/bc/ui5_ui5/sap/sd_cusinv_cres1
ID cus.sd.customerinvoices.create.s1
Device Types Desktop / Tablet / Phone
Al guardar, visualizamos el Target Mapping creado en el catálogo.
27
7. Aplicaciones Fiori con LPD_CUST
En el servidor SAP Front-End ejecutamos el código de transacción

LPD_CUST (Overview of Launchpads). Con la opción “New Launchpad”
creamos un nuevo Launchpad.
Asignamos los valores para el nuevo Launchpad:
➢ Role = Z_USUARIOSAP (reemplace USUARIOSAP con el código de su

usuario SAP)
➢ Instance = TRANSACTIONAL
➢ Description = Launchpad USUARIOSAP (reemplace USUARIOSAP con
el código de su usuario SAP)
➢ Namespace = Z
28
En la siguiente ventana creamos una nueva carpeta llamada

“Authorizations”, utilizando la opción “New Folder”.
En la carpeta creada, creamos una nueva aplicación con la opción “New

Application”. Informamos el texto, el tipo de aplicación “Transaction”, el
código de transacción “PFCG” y el sistema alias local. Continuamos por la
opción “Show Advanced (Optional) Parameters”.
29
En las opciones avanzadas, editamos el nombre alias de la aplicación.
Para el nombre alias utilizamos PFCG_USUARIOSAP (reemplaza

USUARIOSAP con el código de su usuario SAP). Terminamos guardando las
modificaciones.
30
En una ventana nueva ejecutamos el código de transacción /UI2/SEMOBJ

(Semantic Objects – Customer View). Con la opción editar, añadimos una
nueva entrada y guardamos las modificaciones:
➢ Semantic Object = Z_USUARIOSAP (reemplace USUARIOSAP con el

código de su usuario SAP)
➢ Semantic Object Name = Z_USUARIOSAP (reemplace USUARIOSAP
con el código de su usuario SAP)
➢ Semantic Object Description = Semantic object for USUARIOSAP
(reemplace USUARIOSAP con el código de su usuario SAP)
31
En el catálogo personalizado, creamos un nuevo tile estático. En la pantalla

de configuración completamos la información de los siguientes campos con
sus correspondientes valores y guardamos las modificaciones:
Campo Valor
Title Role Maintenance
Use semantic object Flag activo
navigation
Semantic Object Z_MFA199
Action manage
Al guardar, visualizamos el nuevo tile en el catálogo.
32
Seguimos con la creación del Target Mapping, completando la información

de los siguientes campos con sus correspondientes valores y guardamos las
modificaciones:
Campo Valor
Semantic Object Z_MFA199
Action manage
Application Type SAP Fiori App using LPD_CUST
Launchpad Role Z_MFA199
Launchpad Instance TRANSACTIONAL
Application Alias PFCG_MFA199
Device Types Desktop
33
Al guardar, visualizamos el Target Mapping en la pestaña “Target

Mappings” del catálogo.
8. Asignar tiles al grupo personalizado
En la aplicación Fiori Launchpad Designer, filtramos en la pestaña “Groups”

por el grupo con el nombre Z_TILES_BCG_MFA199. Con la opción “+ Add
Tile” añadimos los nuevos tiles del catálogo Z_TILES_BC_MFA199.
34
Seleccionamos todos los tiles del catálogo para incorporarlos al grupo.
35
En el Launchpad del usuario final se visualizan los tiles creados.
36

Tiles - Configuración y Navegación

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tiles - Configuración y Navegación

Cargado por

Copyright:

Formatos disponibles

SAP Fiori – Administración de aplicaciones

Tiles - Configuración y Navegación

En el sistema SAP Front-End ejecutamos el código de transacción

En el siguiente paso, seleccionamos la plantilla para el Tile estático.

En la pantalla de configuración completamos la información de los

Al guardar, visualizamos el nuevo tile en el catálogo.

2. ICF – Servicio proveedor de noticias

En la transacción SICF creamos un subelemento en el virtual host por

En la siguiente ventana, indicamos la descripción y guardamos las

Asignamos el paquete de desarrollo.

En la siguiente ventana indicamos la orden de transporte de tipo

Volvemos a la pantalla anterior y repetimos la acción que permite crear un

Le asignamos el nombre “news” y continuamos.

En la siguiente ventana, indicamos la descripción y guardamos. Por tener el

En una nueva ventana accedemos a la transacción SE24 (Class Builder) para

Indicamos la descripción y dejamos las demás configuraciones propuestas

En los siguientes pasos asignamos el paquete de desarrollo y la orden de

En la pestaña “Methods” pulsamos doble clic sobre el nombre del método

Implementamos el siguiente código fuente, que se encarga de consumir el

CONSTANTS lc_url TYPE string VALUE 'http://ep00.epimg.net/rss/elpa

" Petición al servidor

" Lectura de la respuesta

" Error Status

" Error Status

Activamos la clase ABAP y volvemos a la ventana donde tenemos el

Volvemos a la pantalla anterior y activamos el servicio, utilizando la opción

Confirmamos la activación con la opción “Yes”.

Por último, utilizamos de nuevo el menú contextual para realizar una

En el navegador visualizamos la respuesta del servicio.

En la aplicación Fiori Launchpad Designer, en el mismo catálogo

En la configuración del tile, en el marco “Article Feeds”, añadimos la fuente

Al guardar, visualizamos el nuevo tile de noticias disponible en el catálogo

4. Rol de navegación para tiles de noticias

Utilizando la transacción PFCG, copiamos el rol estándar

Si el role existe en el sistema, saltamos el paso de creación a través de la

En el catálogo de los servicios OData (tr. /IWFND/MAINT_SERVICE)

Con la opción “Call Browser” realizamos una petición al servicio OData.

En la respuesta del servicio buscamos la colección con el nombre

Construimos la URL del servicio OData, realizando una petición de nuevo al

En la aplicación Fiori Launchpad Designer, en el mismo catálogo

En la pantalla de configuración completamos la información de los

Al guardar las modificaciones, visualizamos el nuevo tile disponible en el

En la aplicación Fiori Launchpad Designer, en el mismo catálogo

En la pantalla de configuración completamos la información de los

Al guardar, visualizamos el nuevo tile en el catálogo personalizado.

En la transacción SICF, comprobamos que el servicio disponible en la ruta

Volvemos de nuevo al catálogo personalizado y creamos el Target Mapping.

En la pantalla de configuración completamos la información de los

Al guardar, visualizamos el Target Mapping creado en el catálogo.

7. Aplicaciones Fiori con LPD_CUST

En el servidor SAP Front-End ejecutamos el código de transacción

Asignamos los valores para el nuevo Launchpad:

➢ Role = Z_USUARIOSAP (reemplace USUARIOSAP con el código de su

En la siguiente ventana creamos una nueva carpeta llamada

En la carpeta creada, creamos una nueva aplicación con la opción “New

En las opciones avanzadas, editamos el nombre alias de la aplicación.

Para el nombre alias utilizamos PFCG_USUARIOSAP (reemplaza

En una ventana nueva ejecutamos el código de transacción /UI2/SEMOBJ

➢ Semantic Object = Z_USUARIOSAP (reemplace USUARIOSAP con el

En el catálogo personalizado, creamos un nuevo tile estático. En la pantalla

Al guardar, visualizamos el nuevo tile en el catálogo.

Seguimos con la creación del Target Mapping, completando la información

Al guardar, visualizamos el Target Mapping en la pestaña “Target

8. Asignar tiles al grupo personalizado