From 080dddca13917747f26b99eb80c1fda8bf748bef Mon Sep 17 00:00:00 2001 From: abapsheep <135960093+abapsheep@users.noreply.github.com> Date: Mon, 20 Apr 2026 13:20:28 +0200 Subject: [PATCH 1/2] feat: color whole columns instead of individual cells in demo app 305 --- src/z2ui5_cl_demo_app_305.clas.abap | 94 +++++++++++++---------------- 1 file changed, 43 insertions(+), 51 deletions(-) diff --git a/src/z2ui5_cl_demo_app_305.clas.abap b/src/z2ui5_cl_demo_app_305.clas.abap index a6c2fcad..5d82df15 100644 --- a/src/z2ui5_cl_demo_app_305.clas.abap +++ b/src/z2ui5_cl_demo_app_305.clas.abap @@ -5,12 +5,19 @@ CLASS z2ui5_cl_demo_app_305 DEFINITION PUBLIC SECTION. INTERFACES z2ui5_if_app. + TYPES: + BEGIN OF ty_col, + header TYPE string, + color TYPE string, + END OF ty_col. TYPES: BEGIN OF ty_row, - title TYPE string, - value TYPE string, + col1 TYPE string, + col2 TYPE string, + col3 TYPE string, END OF ty_row. - DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY. + DATA t_columns TYPE STANDARD TABLE OF ty_col WITH EMPTY KEY. + DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY. PROTECTED SECTION. DATA client TYPE REF TO z2ui5_if_client. @@ -26,64 +33,44 @@ CLASS z2ui5_cl_demo_app_305 IMPLEMENTATION. DATA(view) = z2ui5_cl_xml_view=>factory( ). DATA(page) = view->shell( )->page( - title = 'abap2UI5 - Tables and cell colors' + title = 'abap2UI5 - Tables and column colors' navbuttonpress = client->_event_nav_app_leave( ) shownavbutton = client->check_app_prev_stack( ) ). + DATA(lv_css) = ``. + DATA(lv_idx) = 1. + LOOP AT t_columns INTO DATA(ls_col). + lv_css = lv_css + && `td:nth-child(` && lv_idx && `),` + && `th:nth-child(` && lv_idx && `){` + && `background-color:` && ls_col-color && `;` + && `}`. + lv_idx = lv_idx + 1. + ENDLOOP. + page->_generic( name = `style` ns = `html` - )->_cc_plain_xml( - `td:has([data-color="red"]){ ` - && ` background-color: red;` - && `}` - && `` - && `td:has([data-color="green"]){` - && ` background-color: green;` - && `}` - && `` - && `td:has([data-color="blue"]){` - && ` background-color: blue;` - && `}` - && `` - && `td:has([data-color="orange"]){` - && ` background-color: orange;` - && `}` - && `` - && `td:has([data-color="grey"]){` - && ` background-color: grey;` - && `}` - && `` - && `td:has([data-color="yellow"]){` - && ` background-color: yellow;` - && `}` ). + )->_cc_plain_xml( lv_css ). DATA(tab) = page->table( items = client->_bind_edit( t_tab ) - mode = 'MultiSelect' + mode = 'None' )->header_toolbar( )->overflow_toolbar( - )->title( 'change cell color' + )->title( 'change column color' )->get_parent( )->get_parent( ). - tab->columns( - )->column( - )->text( 'Title' )->get_parent( - )->column( - )->text( 'Color' )->get_parent( ). + DATA(cols) = tab->columns( ). + LOOP AT t_columns INTO ls_col. + cols->column( )->text( ls_col-header ). + ENDLOOP. tab->items( )->column_list_item( )->cells( - )->text( '{TITLE}' - )->get( - )->custom_data( - )->core_custom_data( key = 'color' - value = '{VALUE}' - writetodom = abap_true - )->get_parent( - )->get_parent( - )->input( value = '{VALUE}' - enabled = abap_true ). + )->text( '{COL1}' + )->text( '{COL2}' + )->text( '{COL3}' ). client->view_display( view->stringify( ) ). @@ -95,13 +82,18 @@ CLASS z2ui5_cl_demo_app_305 IMPLEMENTATION. me->client = client. IF client->check_on_init( ). + t_columns = VALUE #( + ( header = 'Title' color = 'red' ) + ( header = 'Value 1' color = 'blue' ) + ( header = 'Value 2' color = 'green' ) ). + t_tab = VALUE #( - ( title = 'entry 01' value = 'red' ) - ( title = 'entry 02' value = 'blue' ) - ( title = 'entry 03' value = 'green' ) - ( title = 'entry 04' value = 'yellow' ) - ( title = 'entry 05' value = 'orange' ) - ( title = 'entry 06' value = 'grey' ) ). + ( col1 = 'entry 01' col2 = 'alpha' col3 = 'A' ) + ( col1 = 'entry 02' col2 = 'beta' col3 = 'B' ) + ( col1 = 'entry 03' col2 = 'gamma' col3 = 'C' ) + ( col1 = 'entry 04' col2 = 'delta' col3 = 'D' ) + ( col1 = 'entry 05' col2 = 'eps' col3 = 'E' ) + ( col1 = 'entry 06' col2 = 'zeta' col3 = 'F' ) ). set_view( ). ENDIF. From 683185c32a9e202e58fa89fddb9960d1854f9a21 Mon Sep 17 00:00:00 2001 From: abapsheep <135960093+abapsheep@users.noreply.github.com> Date: Mon, 20 Apr 2026 13:25:01 +0200 Subject: [PATCH 2/2] feat: color whole rows instead of individual cells in demo app 305 --- src/z2ui5_cl_demo_app_305.clas.abap | 95 ++++++++++++++++------------- 1 file changed, 52 insertions(+), 43 deletions(-) diff --git a/src/z2ui5_cl_demo_app_305.clas.abap b/src/z2ui5_cl_demo_app_305.clas.abap index 5d82df15..ff89286b 100644 --- a/src/z2ui5_cl_demo_app_305.clas.abap +++ b/src/z2ui5_cl_demo_app_305.clas.abap @@ -5,19 +5,12 @@ CLASS z2ui5_cl_demo_app_305 DEFINITION PUBLIC SECTION. INTERFACES z2ui5_if_app. - TYPES: - BEGIN OF ty_col, - header TYPE string, - color TYPE string, - END OF ty_col. TYPES: BEGIN OF ty_row, - col1 TYPE string, - col2 TYPE string, - col3 TYPE string, + title TYPE string, + value TYPE string, END OF ty_row. - DATA t_columns TYPE STANDARD TABLE OF ty_col WITH EMPTY KEY. - DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY. + DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY. PROTECTED SECTION. DATA client TYPE REF TO z2ui5_if_client. @@ -33,44 +26,65 @@ CLASS z2ui5_cl_demo_app_305 IMPLEMENTATION. DATA(view) = z2ui5_cl_xml_view=>factory( ). DATA(page) = view->shell( )->page( - title = 'abap2UI5 - Tables and column colors' + title = 'abap2UI5 - Tables and row colors' navbuttonpress = client->_event_nav_app_leave( ) shownavbutton = client->check_app_prev_stack( ) ). - DATA(lv_css) = ``. - DATA(lv_idx) = 1. - LOOP AT t_columns INTO DATA(ls_col). - lv_css = lv_css - && `td:nth-child(` && lv_idx && `),` - && `th:nth-child(` && lv_idx && `){` - && `background-color:` && ls_col-color && `;` - && `}`. - lv_idx = lv_idx + 1. - ENDLOOP. - page->_generic( name = `style` ns = `html` - )->_cc_plain_xml( lv_css ). + )->_cc_plain_xml( + `tr:has([data-color="red"]){ ` + && ` background-color: red;` + && `}` + && `` + && `tr:has([data-color="green"]){` + && ` background-color: green;` + && `}` + && `` + && `tr:has([data-color="blue"]){` + && ` background-color: blue;` + && `}` + && `` + && `tr:has([data-color="orange"]){` + && ` background-color: orange;` + && `}` + && `` + && `tr:has([data-color="grey"]){` + && ` background-color: grey;` + && `}` + && `` + && `tr:has([data-color="yellow"]){` + && ` background-color: yellow;` + && `}` ). DATA(tab) = page->table( items = client->_bind_edit( t_tab ) - mode = 'None' + mode = 'MultiSelect' )->header_toolbar( )->overflow_toolbar( - )->title( 'change column color' + )->title( 'change row color' )->get_parent( )->get_parent( ). - DATA(cols) = tab->columns( ). - LOOP AT t_columns INTO ls_col. - cols->column( )->text( ls_col-header ). - ENDLOOP. + tab->columns( + )->column( + )->text( 'Title' )->get_parent( + )->column( + )->text( 'Color' )->get_parent( ). tab->items( )->column_list_item( )->cells( - )->text( '{COL1}' - )->text( '{COL2}' - )->text( '{COL3}' ). + )->text( '{TITLE}' + )->get( + )->custom_data( + )->core_custom_data( key = 'color' + value = '{VALUE}' + writetodom = abap_true + )->get_parent( + )->get_parent( + )->get_parent( + )->input( value = '{VALUE}' + enabled = abap_true ). client->view_display( view->stringify( ) ). @@ -82,18 +96,13 @@ CLASS z2ui5_cl_demo_app_305 IMPLEMENTATION. me->client = client. IF client->check_on_init( ). - t_columns = VALUE #( - ( header = 'Title' color = 'red' ) - ( header = 'Value 1' color = 'blue' ) - ( header = 'Value 2' color = 'green' ) ). - t_tab = VALUE #( - ( col1 = 'entry 01' col2 = 'alpha' col3 = 'A' ) - ( col1 = 'entry 02' col2 = 'beta' col3 = 'B' ) - ( col1 = 'entry 03' col2 = 'gamma' col3 = 'C' ) - ( col1 = 'entry 04' col2 = 'delta' col3 = 'D' ) - ( col1 = 'entry 05' col2 = 'eps' col3 = 'E' ) - ( col1 = 'entry 06' col2 = 'zeta' col3 = 'F' ) ). + ( title = 'entry 01' value = 'red' ) + ( title = 'entry 02' value = 'blue' ) + ( title = 'entry 03' value = 'green' ) + ( title = 'entry 04' value = 'yellow' ) + ( title = 'entry 05' value = 'orange' ) + ( title = 'entry 06' value = 'grey' ) ). set_view( ). ENDIF.