CL_DEMO_OUTPUT
Familiar with CL_DEMO_OUTPUT from classic ABAP? You can show its HTML output inside an abap2UI5 app too. This is handy for quick data visualization or when porting existing demos.
The approach: build the HTML with cl_demo_output=>get( ), inject CSS styles via _cc_plain_xml (which inserts raw XML/HTML into the view), and render the result with the UI5 html control. The CSS block is needed because CL_DEMO_OUTPUT produces HTML with specific class names (e.g., heading1, header, body) that need matching style definitions to render correctly.
TIP
This technique fits prototyping or porting existing demo programs. For production apps, build proper UI5 views instead.
abap
METHOD z2ui5_if_app~main.
DATA(lv_style) = `<html:style type="text/css">body {` && |\n| &&
` font-family: Arial;` && |\n| &&
` font-size: 90%;` && |\n| &&
`}` && |\n| &&
`table {` && |\n| &&
` font-family: Arial;` && |\n| &&
` font-size: 90%;` && |\n| &&
`}` && |\n| &&
`caption {` && |\n| &&
` font-family: Arial;` && |\n| &&
` font-size: 90%;` && |\n| &&
` font-weight:bold;` && |\n| &&
` text-align:left;` && |\n| &&
`}` && |\n| &&
`span.heading1 {` && |\n| &&
` font-size: 150%;` && |\n| &&
` color:#000080;` && |\n| &&
` font-weight:bold;` && |\n| &&
`}` && |\n| &&
`span.heading2 {` && |\n| &&
` font-size: 135%;` && |\n| &&
` color:#000080;` && |\n| &&
` font-weight:bold;` && |\n| &&
`}` && |\n| &&
`span.heading3 {` && |\n| &&
` font-size: 120%;` && |\n| &&
` color:#000080;` && |\n| &&
` font-weight:bold;` && |\n| &&
`}` && |\n| &&
`span.heading4 {` && |\n| &&
` font-size: 105%;` && |\n| &&
` color:#000080;` && |\n| &&
` font-weight:bold;` && |\n| &&
`}` && |\n| &&
`span.normal {` && |\n| &&
` font-size: 100%;` && |\n| &&
` color:#000000;` && |\n| &&
` font-weight:normal;` && |\n| &&
`}` && |\n| &&
`span.nonprop {` && |\n| &&
` font-family: Courier New;` && |\n| &&
` font-size: 100%;` && |\n| &&
` color:#000000;` && |\n| &&
` font-weight:400;` && |\n| &&
`}` && |\n| &&
`span.nowrap {` && |\n| &&
` white-space:nowrap;` && |\n| &&
`}` && |\n| &&
`span.nprpnwrp {` && |\n| &&
` font-family: Courier New;` && |\n| &&
` font-size: 100%;` && |\n| &&
` color:#000000;` && |\n| &&
` font-weight:400;` && |\n| &&
` white-space:nowrap;` && |\n| &&
`}` && |\n| &&
`tr.header {` && |\n| &&
` background-color:#D3D3D3;` && |\n| &&
`}` && |\n| &&
`tr.body {` && |\n| &&
` background-color:#EFEFEF;` && |\n| &&
`}` && |\n| &&
`</html:style>`.
"generate HTML output, e.g. from a database query:
"SELECT * FROM scarr INTO TABLE @DATA(carriers).
"DATA(lv_html) = cl_demo_output=>get( carriers ).
DATA(lv_html) = `<h2 title="I'm a header">The title Attribute</h2>` && |\n| &&
`<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>`.
DATA(view) = z2ui5_cl_xml_view=>factory( ).
view->shell(
)->page(
)->button( text = `test`
)->_cc_plain_xml( lv_style
)->html( lv_html ).
client->view_display( view->stringify( ) ).
ENDMETHOD.