TAPM50 Workload Analysis

Workshop A9 Tcnicas de Webreporting Avanzado

Philipp Nell Gerente BI, Realtech Espaa
2005 REALTECH

Copyright

Copyright 2005 Realtech Espaa. Reservados todos los derechos. Prohibida la distribucin, reproduccin o traduccin de este manual o de parte del mismo, sea cual sea el fin y la forma, sin la autorizacin expresa por escrito de Realtech Espaa. La informacin contenida en este manual puede modificarse o complementarse sin previo aviso. Reservados todos los derechos.

2005 REALTECH

Resumen del curso

Este workshop quiere introducir al asistente en las tcnicas de

La utilizacin de comandos para la manipulacin de objetos de webreporting de SAP BW La utilizacin de tcnologas de web para personalizar el UI de informes basados en Webreporting

Adicionalmente se presentan las nuevas funcionalidades de Bex Web de la version NW 2004s. Al final de la introduccin terica se realizarn practicas para profundizar lo presentado.

2005 REALTECH

Objetivos del curso

Una vez terminado este curso, podr: Explicar los conceptos tecnolgicos del Webreporting de SAP BW. Ampliar la funcionalidad estndar del Webreporting. Utilizar otras tecnologas Web para mejorar la funcionalidad del Webreporting.

2005 REALTECH

Antes de empezar

Requisitos previos:
BW 305 Reporting & Analysis Conocimientos bsicos de tecnologas Web (HTML, Javascript, HTTP, etc)

A quien va dirigido:
SAP BI Consultants SAP BI Power Users SAP BI Design Specialists

Duracin: 3 Horas

2005 REALTECH

Contenidos

Resumen Cap. 1 Cap. 2 Cap. 3 Cap. 4 Cap. 5 Arquitectura de BW y Webreporting Modelizacin de templates URLs de commando & Web-API Elementos de web reporting y Javascript Preview NW 2004s Practicas

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas

2005 REALTECH

Arquitectura SAP BW

2005 REALTECH

Herramientas Bex 3.5

2005 REALTECH

Habilitar el acceso desde Web

HowTo-Guide: How to Enable SAP BW Web Functionality after a new SAP BW installation
Disponible en http://service .sap.com/bi -> How To Guides Incluye un paso-a-paso de las configuraciones necesarias a nivel de WAS y BW. La mayora de los pasos a realizar se pueden acceder va la TX SPRO

2005 REALTECH

Servicios del WAS 6.40

TX SICF Parametrizacin de los servicios del WAS

2005 REALTECH

Internet Graphics Server (IGS)

Un servicio, no especifico de BW, para generar grficos para su visualizacin en los Internet Browsers

2005 REALTECH

Flujo de datos al IGS y al cliente

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas

2005 REALTECH

El proceso de publicacin en Web

BEx Analyzer BEx Web Application Designer Web Browser Herr. Diseo

BEx Query Designer

http Crear Queries

OLAP Processor
Data Base

BW Web Service BW Charting Engine

HTML Templates

2005 REALTECH

El Web Application Designer (WAD)

La herramienta principal para el desarrollo de aplicaciones web de SAP BW. Carga y descarga de los templates web que forman la base de los informes y cuadros de mando basados en el web reporting. Genera los tags especficos del Webreporting. Genera el marco de la pagina HTML del template. Herramienta para parametrizar objetos de un template y el template mismo.
DataProviders, Apariencia, Comportamientos, etc.

2005 REALTECH

Tres reas de trabajo

Componentes

Template Preview

Propiedades

2005 REALTECH

El proceso de diseo

Drag & Drop

2005 REALTECH

Asignacin de queries y vistas

2005 REALTECH

Un template en el WAD

2005 REALTECH

Un template en HTML plano

2005 REALTECH

El cdigo en detalle
Comienzo Pagina HTML El dataprovider Tag de parmetros de la plantilla Informacin de la cabecera de pagina Cuerpo HTML Tag de objeto Table1.

2005 REALTECH

Modelo de objetos (I)

Web Template
Controlador de la aplicacin Propiedades Configuracin de la pantalla de variables Configuracin de la personalizacin Configuracin del men de contexto

Web Data Provider

Representa la fuente de datos para los web items Incluye las instrucciones para su inicializacin Tiene propio nombre lgico Se puede manipular con comandos

Web Item Renderers

Basado en HTML, visualizando los datos entregados por el data provider asociado Incluye las instrucciones para su inicializacin Se puede manipular con comandos Tiene propio nombre lgico

2005 REALTECH

Modelo de objetos (II)

2005 REALTECH

Manipulacin del template fuera del WAD

Cualquier editor HTML es posible, incluido el Notepad de Windows. Se utiliza el editor registrado como editor por defecto para editar HTML.

2005 REALTECH

Actualizar el template en el servidor

2005 REALTECH

Tecnologas bsicas de Webreporting

Protocolo HTTP y URLs

El protocolo HTTP (Hypertext transfer protocoll) es la base de la comunicacin entre el cliente (Internet Browser) y el servidor web. URL (Uniform Resource Locator): Identificador univoco de un recurso en Internet.
<protocolo>://<servidor>:<puerto>/<path>/<documento o servicio><params>

Hypertext Markup Language (HTML)

HTML es la sintaxis bsica para describir el diseo de una pagina web interpretada por un Internet Browser.

Javascript
Un idioma de programacin para aadir dinamismo a paginas web.

Cascading Style Sheets

Cascading Style Sheets (CSS) es una tecnologa para facilitar la gestin de estilos y apariencia de un sitio web.
2005 REALTECH

HTML

Todos los documentos tienen una estructura base:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>El titulo del documento </title> </head> <body> </body> </html>

Reference Guide: http://www.w3.org/MarkUp/

2005 REALTECH

Javascript
Cdigo ejemplar:
<html> <head> <title>Test</title> <script type="text/javascript"> <!-function Quadrat() { var resultado= document.Form.Entrada.value * document.Formular. Entrada.value; alert(El cuadrado de " + document.Formular. Entrada.value + " es " + resultado); } //--> </script> </head> <body> <form name="Form" action=""> <input type="text" name=Entrada" size="3"> <input type="button" value=Calcular cuadrado" onClick="Quadrat()"> </form> </body> </html>

2005 REALTECH

Javascript

Reference:
http://www.w3schools.com/jsref/default.asp

Syntax muy parecido a Java. Existen

Funciones (x = CalcularCuadrado(int a)). Eventos (p.e. onLoad(), AfterLoad(), onSubmit(), onClick()). Acceso a los elementos (tags) de una pagina web va el DOM (Document Object Model).

2005 REALTECH

Resumen

Ahora puede:
Configurar el acceso va Web a informes de BW. Crear templates WEB. Incluir componentes en ellos. Asignar queries y vistas a los componentes. Descargar el template a un fichero local. Manipular el fichero en un editor HTML. Actualizar el template en el servidor BW.

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas

2005 REALTECH

Web API
Con la WEB API se pueden manipular los siguentes objetos
Web Templates Object tags Command URLs Textos Web Items Tabla, Grafico, Mapa ... Data provider, query views Filter, Sort, Drilldown ... Stylesheets

Web API documentation

2005 REALTECH

Ejecutando commandos

Comandos se utilizan para:

Cambiar el estado de un web item o de un data provider, como p.e. Ocultar y visualizar un web item. Aadir un desglose al data provider. Ejecutar una accin on el web template, como p.e. Visualizar la entrada de variables. Crear el bookmark para el estado actual del template.

2005 REALTECH

Ejecutando comandos

Comandos se ejecutan va:

Enlaces HTML o formularios HTML utilizando el tag de <SAP_BW_URL [CMD]> Ejemplo para generar un bookmark
<a href= <SAP_BW_URL cmd=BOOKMARK>>Bookmark</a>

Durante el rendering de la pagina, BW sustituye este tag por la URL real:

<a href="http://myServer:port/SAP/BW/BEx?pageno=1&request_no=8&cmd=bookmark"> Bookmark</a>

Funciones de Javascript de SAP BW: SAPBWOpenURL(SAP_BW_URL_Get() + "&CMD=BOOKMARK"); Parametrizacin de URL: http://myServer:port/SAP/BW/BEx?cmd=ldoc&template_id=myTemplate&filt er_iobjnm=0COUNTRY&filter_value=DE Un comando consiste en el nombre de comando y opcionalmente de pares de parametros: <SAP_BW_URL CMD=[CMD_NAME] Parameter1=Value1 Parameter2=Value2 ...>

2005 REALTECH

Manipulacin de web items

Web items are completamente descritos por sus atributos.
Attributes of Web Items:
Atributos generales: Comn para todos los web items. Ejemplos: GENERATE_LINKS, HIDDEN, GENERATE_CAPTION y CAPTION. Atributos especificos: Son atributos solamente relevante para un cierto tipo de web items: Ejemplos: SWITCHMATRIX para graficos y MODIFY_TABLE, SHOW_PAGING_AREA_BOTTOM y SHOW_PAGING_AREA_TOP para tablas. Todos los atributos estan descritos en la documentacin.

Los atributos pueden ser modificados con comandos. El comando tiene que especificar el web item. Ejemplo para ocultar un web item con el nombre ABC:
<a href=<SAP_BW_URL ITEM=ABC HIDDEN=X>>Ocultar item ABC</a>

2005 REALTECH

Manipulacin de vistas

Vistas son data providers derivados de queries que representan un estado de navegacin. El estado de una vista es complejo e incluye entre otra la siguiente informacin:
Que caracteristicas y estructuras son visibles. Que filtros estan activos. Que jerarquas, condiciones y excepciones estan asctivas. El estado de desglose de una jerarqua. El estado de cada uno de los atributos de presentacin.

Cualquier accin que se puede ejecutar via menu de contexto o navegaccin se puede ejecutar va un comando. La documentacin incluye mas que 30 comandos diferentes para la manipulacin de vistas.

2005 REALTECH

Ejemplos de comandos
Filtrar Data Provider ABC por Alemania (Clave DE):
<SAP_BW_URL DATA_PROVIDER='ABC' FILTER_IOBJNM='0COUNTRY' FILTER_VALUE='DE'>

Filtrar a todos los data providers por el mes actual (Variable 0CMONTH):
<SAP_BW_URL DATA_PROVIDER='*' MULTI='X' FILTER_IOBJNM='0CALMONTH' FILTER_VALUE='0CMONTH' FILTER_VALUE_TYPE='VARIABLE_EXIT'>

Drilldown por paises en el data provider ABC:

<SAP_BW_URL DATA_PROVIDER='ABC' CMD='Expand' IOBJNM='0COUNTRY' AXIS='Y'>

Drilldown por paises paises pero no por ao en el data provider ABC:

<SAP_BW_URL DATA_PROVIDER='ABC' CMD='SET_NAV_STATE' IOBJNM_1='0COUNTRY' AXIS_1='Y' IOBJNM_2='0CALYEAR' AXIS_2= ' '>

2005 REALTECH

Ejemplos de comandos

Ordenar por nombre de clientes de forma ascendiente en el data provider ABC:

<SAP_BW_URL DATA_PROVIDER='ABC' CMD='SORT' IOBJNM='0CUSTOMER' SORT_TYPE='T SORT_DIRECTION='A'>

Visualizar los datos de datos del data provider ABC en la moneda de la base de datos:
<SAP_BW_URL DATA_PROVIDER='ABC' CMD='CURRENCY_CONVERSION ' CUR_CONV_TYPE ='0'>

Visualizar centros de coste por su jerarqua en el data provider ABC:

<SAP_BW_URL DATA_PROVIDER='ABC' CMD='Set_Hierarchy_State IOBJNM='0COSTCENTER' ACTIVE='X'>

2005 REALTECH

Secuencias de comandos
Secuencias de comandos se utilizan para ejecutar un conjunto de acciones en un solo paso. Se pueden ejecutar cualquier conjunto de comandos. Se pueden utilizar en enlaces, Javascript o parametros. Sintaxis:
El primer comando se compone de forma normal. Todos los siguientes se aaden con CMD_2=<comando string>. <SAP_BW_URL cmd=cmd1 parameter1=value2 cmd_1=cmd=cmd2&parameter2=value2 cmd_2=<cmd_string>

En URLs y Javascript, se sustituyen = por %3D y & por %26.

2005 REALTECH

Secuencia de comandos Ejemplos

Drilldown por cliente y ordenarles por clave de forma ascendiente:
<SAP_BW_URL CMD='EXPAND' DATA_PROVIDER='ABC' IOBJNM='0COUNTRY' AXIS='Y' CMD_1='CMD=SORT&DATA_PROVIDER=ABC& IOBJNM=0CUSTOMER&SORT_TYPE=K&SORT_DIRECTION=A'>

En Javascript:
SAPBWOpenURL(SAP_BW_URL_Get() + "CMD=EXPAND&DATA_PROVIDER=ABC&IOBJNM=0COUNTRY&AXIS=Y&CMD_1=CM D%3DSORT%26DATA_PROVIDER%3DABC%26IOBJNM %3D0CUSTOMER%26 SORT_TYPE%3DK%26SORT_DIRECTION%3DA");

Como URL:
http://myServer:port/SAP/BW/BEx?cmd=ldoc &template_id=myTemplate &CMD_1=CMD%3DEXPAND%26DATA_PROVIDER%3DABC%26IOBJNM%3D0COUNT RY%26AXIS%3DY&CMD_2=CMD%3DSORT%26DATA_PROVIDER%3DABC%26IOBJN M%3D0CUSTOMER%26SORT_TYPE%3DK%26SORT_DIRECTION%3DA

2005 REALTECH

Bookmarking

Bookmarking en AP BW es crear una referencia a un estado de navegacin que se puede guardar en el cliente (Browser). Se representa una URL de bookmark en el campo de URL del browser. Crear una URL de referencia que representa el estado completo de la aplicacin Web:
<SAP_BW_URL CMD='BOOKMARK'>

Si se quiere guardar el contenido del informe (los datos en su estado actual), se utiliza el anexo BOOKMARK_DATA.
<SAP_BW_URL CMD='BOOKMARK' BOOKMARK_DATA='X'>

Nota 647458 para casos especiales.

2005 REALTECH

Exportar datos

Export a CSV (comma separated values):

Se exporta a un fichero plano. No se incluye ningun formato. <SAP_BW_URL DATA_PROVIDER='ABC' CMD='EXPORT' FORMAT='CSV'>

Export a Excel 200x:

Los datos se exportan a un documento XML soportado por Excel 200x. Se incluye alguna informacin de formato. Se peude seguir navegando si el BexAnalyzer esta instalado. <SAP_BW_URL DATA_PROVIDER='ABC' CMD='EXPORT' FORMAT='XLS'>

2005 REALTECH

Textos dinamicos (I)

Utilizacin de elementos de texto en informes web

BW ofrece la posibilidad de utilizar textos dinmicos determinados durante la ejecucin. Soporte a entornos de multi-idioma. Procedimiento: 1. Crear un report ABAP con TX SE38. 2. Crear elemento de texto. 3. Utilizar el elemento de texto con el siguiente comando:
<SAP_BW_TEXT PROGRAM=Z_BW353_TEXTS KEY=0001>

2005 REALTECH

Textos dinamicos (II)

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas

2005 REALTECH

Elementos adicionales de CSS

2005 REALTECH

Elementos adicionales (Botones)

<body>
<table><tr> <td class="SAPBEXBtnStd"> <A href= <SAP_BW_URL FILTER_IOBJNM='0D_COUNTRY' FILTER_VALUE='DE' DATA_PROVIDER='*' MULTI='X' CMD='REMOVE_FILTER' IOBJNM='0D_SALE_ORG'> >Germany</A> </td> </tr></table>

</body>

2005 REALTECH

Ejemplo
.SAPBEXBtnStd {
text-align: center; padding: 0 2px 0 2px; height: 18px; font-weight: normal; font-style:normal; white-space: nowrap; font-family: arial, sans-serif; font-size: x-small; background-color: #C1D3E0; text-decoration: none; cursor: hand; color: #021C3B; border: 1px solid; border-color: #BAE3FE #3474B5 #3474B5 #BAE3FE;

}
De /sap/bw/Mime/BEx/StyleSheets/BWReports.css
2005 REALTECH

Funciones de Javascript
SAP_BW_Get_Language() devuelve el idioma de logon. Funciones para ejecutar comandos:
SAP_BW_URL_Get() devuelve la URL de la aplicacin. SAPBWOpenURL(URL) ejecuta la URL en la misma ventana. SAPBWOpenWindow(URL, windowName, width, height) abre una nueva ventana con las dimensiones indicadas y ejecuta la URL. SAPBWSetOpenerUrl(URL, close) ejecuta la URL en la ventana desde donde se abri la ventana actual y cierra esta si esta indicado.

SAPBWGetItemProp(itemName) devuelve un array de los atributos del web item:

new array(itemName, new Array(name1,value1), new Array(name2, value2), )

2005 REALTECH

Manipulacin de men de contexto

El men de contexto se puede modificar:
La visibilidad de entradas se puede modificar en la propiedades del template. Aadir nuevas entradas con Javascript o propiedades del template: SAPBWAddToMenu(label, handlerFunction, ...)
Label: Texto de la entrada en el men handlerFunction: la funcin Javascript que ejecuta el comando. handlerFunctionParameter: parametros para la funcin Cell type: Contexto de celdas en cual aparezca la entrada, p.e. ' '=todos los contextos, 'CHARACTERISTIC' 'CHARACTERISTIC_VALUE''STRUCTURE', 'STRUCTURE_VALUE', 'DATA', etc. filter: Filter on the cell type, e. g., filter only on characteristic 0CUSTOMER visibility: 'X' for simple menu, 'E' for enhanced menu, or ' ' for no display at all position: At the 'BOTTOM' or 'TOP' of the menu data_provider: Only on cells filled by Data_provider item: Only on the specified item

Example: Call the company help desk web page SAPBWAddToMenu(Help Desk,MyJSHandler,,,,X, BOTTOM,,);
2005 REALTECH

Manipulacin del men de contexto

Define JavaScript handler function for the new menu entries:
MyHandlerFunction(handlerFunctionParameter, cell_type, filter,...,x,y) handlerFunctionParameter: Value set in SAPBWAddToMenu for the handler cell_type: Cell type of the current context filter: Context of the cell, e. g., 'CHARACTERISTIC' parameter1: Context of the cell, e. g., '0COUNTRY ... X: Data column coordinate (needed for RRI Report-To-Report Interface) Y: Data row coordinate (needed for RRI) Example: Handler function for the Help Desk menu entry
<SCRIPT language=JavaScript> function myJSHandler(p,cell_type,filter,p1,p2,item,data_provider,x,y){ // Call the help page

SAPBWOpenWindow("http:///it/help.htm","Help",600,400); } </SCRIPT>

2005 REALTECH

Ejemplo

Antes

Despues

2005 REALTECH

Ejemplo

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

Componentes de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas
2005 REALTECH

 2005 REALTECH

Business Explorer Suite

Enterprise Portal

Business Explorer Suite (BEx) Information Broadcasting BEx Web

BI Pattern Web Analyzer Web Application Designer BI Consumer Services Report Designer MS Excel Add-in

BEx Analyzer

3rd Party BI SAP BI Info Provider

BEx Query Designer

2005 REALTECH

Diseo de aplicaciones web

BEx Web Application Designer en NW04s Nuevas posibiliades para la modelizacin reducen la necesidad de scripts y pogramacin

2005 REALTECH

Nuevas funcionalidades
Nuevas posibilidades
Creacin de aplicaciones basado en eventos Model-driven BI application building Wizards para comandos y componentes de visualizacin (p.e. Botones) Ayuda para desarrolladores que utilizan el Web API. Integracin simplificada de elementos nativos de HTML Desarrollo de aplicaciones que incluyen funcionalidad de BPS. Nuevos elementos de BI y de layout (Pestaas, Botones, etc). Componentes reutilizables se guardan ahora en roles y favoritos. Nuevos graficos: GANTT, mapa calor y analsis de milestones Soporte total de entornos Unicode

2005 REALTECH

Web Application Designer: Command Wizard (1)

Command Wizard:
Utilizacin del Web API de forma sencilla e intuitiva Menos javascript necesario

2005 REALTECH

Web Application Designer: Command Wizard (2)

El wizard ofrece ayuda en la busqueda de los comandos relevantes para la accin que se quiere implantar.

2005 REALTECH

Web Application Designer: Command Wizard (3)

Parametrizar el comando para finalizar la programacin.

2005 REALTECH

Grupo de Botones

Button Group
Visualiza un grupo de botones en cual a cada uno se puede asignar un comando especifico.

Aadir Borrar Grupo de botones ejemplar Iniciar Command Wizard

2005 REALTECH

Item Pestaas

Tab Pages Item

Cada pagina esta exactamente asignada a un web item. Si se quiere presentar mas que una componente, se utiliza la componente Container.
Tab1 Tab2 Item/Container/Container Layout

2005 REALTECH

Web Item Container

Container
Coleccin de web items o propio cdigo HTML P.e. dentro de una pagina incluido en pestaas.

Insert your HTML code into the Container

2005 REALTECH

Web Application Designer: Editor (1)

Nuevas funcionalidades del Editor Verificacin de plantillas en local para una sintaxis correcta
Intellisense syntax (autorelleno de comandos) Teclar <bi: abre un popup con todos los comandos disponibles. Continuar teclando reduce la lista de comandos disponibles.

2005 REALTECH

Web Application Designer: Editor (2)

Nuevo formato basado en XML Navegacin directa a los componentes via dropdown box cuando el desarrollador se encuentra en el modo XHTML. Direct navigation to web items via a dropdown box when in XHTML editor mode Resulta en posicionar el cursor en el elemento y hacer su primera linea de codigo la primera linea en el editor.

2005 REALTECH

Web Application Designer: Editor (3)

Modo Layout
Simplificacin en la creacin de contenido HTML utilizando la opcin Insertar... en el menu de contexto. Mayor flexibilidad y control ofreciendo un acceso directo a los tags de HTML y CSS.

2005 REALTECH

Ad hoc Analysis con Drag & Drop

Mayor posibilidades para filtrar =>ayuda a los usuarios trabajar de forma mas eficiente.

Drag & Drop

Drag & Drop de caracteristicas, o ratios para eliminarlos de la tabla Drag & Drop al area de filtracin

Drag & Drop en el bloque de navegacin

2005 REALTECH

BEx Web Printing

Impresin de informes directamente a PDF
Cualquier salida de web reporting se puede imprimir directamente a PDF Integrado con Adobe Document Service Solamente se requiere el Adobe Acrobat Reader Opciones de impresin se pueden mantener de forma global o local.

Conversin a PDF

2005 REALTECH

BEx Web Printing

Impresion de informes Web a PDF
Ajustar al ancho de la pagina Repetir cabeceras Ajustar a una sola pagina Margenes de pagina Alienacin y format Cabeceras y pies de pagina adicionales Impresin en fondo con el Broadcaster

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas

2005 REALTECH

Bibliografa

Documentacin Online SAP Developer Network Service Marketplace

2005 REALTECH

Roadmap
Arquitectura BW Web

Modelizacin de templates

URLs de commando & Web-API

Elementos y Javascript

Preview BI NW2004s

Practicas

2005 REALTECH

Muchas gracias !
Email: philipp.nell@realtech.com

2005 REALTECH