El control cl_gui_html_viewer es un objeto de SAP orientado a objetos que nos permite mostrar paginas HTML dentro de SAP. No es un navegador es un visor, esta herramienta no te va a cargar un sitio completo sin embargo si puede ayudar a darle otra vista a tus reportes o pantallas de SAP.
No es muy complicado de usar.
Antes de iniciar el desarrollo ABAP tenemos que tener nuestra pagina WEB para el ejemplo voy a cargar un HTML.
- Iniciamos creando nuestro programa en la se38
- Declaramos un objeto de la clase cl_gui_html_viewer
*** cl_gui_html_viewer instance
DATA : go_viewer TYPE REF TO cl_gui_html_viewer.
- Instanciamos el objeto
Al momento de instanciarlo nosotros podemos definir si queremos que nuestro visor se muestre en un control de dynpro o en pantalla completa. Para nuestro ejemplo lo voy a mostrar en pantalla completa.
* ** Create Instance Using Default Screen As Parent
CREATE OBJECT go_viewer
EXPORTING
parent = cl_gui_container=>screen0.
- En este paso tenemos que llenar una tabla con el código html de nuestra pagina. Para este ejemplo yo uso una tabla CHAR255 por lo que tengo que dividir el codigo html en secciones de 255.
DATA : ls_html LIKE LINE OF lt_html.
CONCATENATE
`<!DOCTYPE html><html lang="en"><head>`
`<meta charset="UTF-8">`
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
`<title>`
CC_leyenda1
`</title>` INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
CONCATENATE
`<style> body { font-family: Arial, sans-serif; margin: 20px; }`
`table { border-collapse: collapse; width: 100%; }`
`th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }`
`th { background-color: #666; color: white; font-weight: bold; }`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
concatenate
`.highlight { background-color: #d9534f; color: white; }`
`.sub-row { background-color: #f4f6f8; color: #333; } `
`.footer { font-weight: bold; background-color: #ddd; } .small-text { font-size: 12px; }`
`.align-left { text-align: left; } </style></head>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
DATA:
lv_nxml TYPE char30,
lv_total TYPE char30,
lv_docsconciliados TYPE char30,
lv_totalconsiliados TYPE char30,
lv_cancelados TYPE char30,
lv_totalcancelados TYPE char30,
lv_n_ingresos TYPE char30,
lv_total_ingresos TYPE char30,
lv_ingconciliados TYPE char30,
lv_ingcancelados TYPE char30,
lv_n_ncred TYPE char30,
lv_t_ncred TYPE char30,
lv_ncredconciliados TYPE char30,
lv_ncredcancelados TYPE char30,
lv_n_pagos TYPE char30,
lv_t_pagos TYPE char30,
lv_n_pagosconciliados TYPE char30,
lv_npagos_cancelados TYPE char30,
lv_efos TYPE char30,
lv_xml_x_ligar TYPE char30,
lv_amarre TYPE char30.
write: is_header-nxml to lv_nxml,
is_header-total to lv_total,
is_header-docsconciliados to lv_docsconciliados,
is_header-totalconsiliados to lv_totalconsiliados,
is_header-cancelados to lv_cancelados,
is_header-totalcancelados to lv_totalcancelados.
CONCATENATE
`<body><table><thead><tr><th>`
cc_leyenda2 "Total XML
`</th><th>`
lv_nxml
`</th><th>`
lv_total
`</th><th>`
CC_Leyenda3 "XML C/Docto"
`</th><th>`
lv_docsconciliados
`</th><th>`
lv_totalconsiliados
`</th><th>`
cc_leyenda4 "XML Cancelados
`</th><th>`
lv_cancelados
`</th><th>`
lv_totalcancelados
`</th></tr></thead>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
CONCATENATE
`<tbody><tr class="sub-row"><td class="align-left">`
cc_leyenda5 "XML Ingresos
`</td><td>`
lv_n_ingresos
`</td><td>`
lv_total_ingresos
`</td><td class="align-left">`
cc_leyenda5 "XML Ingresos
`</td><td>`
lv_ingconciliados
`</td>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
CONCATENATE
`<td class="align-left">`
cc_leyenda5 "XML Ingresos
`</td><td>`
lv_ingcancelados
`</td><td></td></tr>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
Write:
is_ncredito-n_ncred to lv_n_ncred,
is_ncredito-t_ncred to lv_t_ncred,
is_ncredito-ncredconciliados to lv_ncredconciliados,
is_ncredito-ncredcancelados to lv_ncredcancelados.
CONCATENATE
`<tr class="sub-row"><td class="align-left">`
cc_leyenda6 "XML N. C.
`</td><td>`
lv_n_ncred
`</td><td>`
lv_t_ncred
`</td><td class="align-left">`
cc_leyenda6 "XML N. C.
`</td><td>`
lv_ncredconciliados
`</td>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
CONCATENATE
`<td class="align-left">`
cc_leyenda6 "XML N. C.
`</td><td>`
lv_ncredcancelados
`</td><td></td></tr><tr class="sub-row">`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
write:
is_pagos-n_pagos to lv_n_pagos,
is_pagos-t_pagos to lv_t_pagos,
is_pagos-n_pagosconciliados to lv_n_pagosconciliados,
is_pagos-npagos_cancelados to lv_npagos_cancelados.
CONCATENATE
`<td class="align-left">`
cc_leyenda7 " Pagos
`</td><td>`
lv_n_pagos
`</td><td>`
lv_t_pagos
`</td><td class="align-left">`
cc_leyenda7 "Pagos
`</td><td>`
lv_n_pagosconciliados
`</td>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
CONCATENATE
`<td class="align-left">`
cc_leyenda7 "Pagos
`XML pagos</td><td>`
lv_npagos_cancelados
`</td><td></td></tr>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
write:
is_footer-efos to lv_efos,
is_footer-xml_x_ligar to lv_xml_x_ligar,
is_footer-amarre to lv_amarre.
CONCATENATE
`<tr><td colspan="1" class="footer">`
cc_leyenda8 "Efos :
lv_efos
`</th><td colspan="3" class="footer">`
CC_leyenda9 " XMl por ligar
lv_xml_x_ligar
`</th>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
CONCATENATE
`<td colspan="3" class="footer">`
cc_leyenda10 "Amarre
lv_amarre
`</td><td colspan="1" class="footer"></td></tr>`
INTO ls_html SEPARATED BY space.
APPEND ls_html to lt_html.
clear: ls_html.
ls_html = `</tbody></table></body></html>`.
APPEND ls_html to lt_html.
clear: ls_html.
- Una vez llena la tabla con la pagina html
Llamamos al metodo para mostrar el visor.
* ** Show Url
CALL METHOD go_viewer->show_url
EXPORTING
url = lv_url.
CALL METHOD cl_gui_html_viewer=>set_focus
EXPORTING
control = go_viewer
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
OTHERS = 3.
