CRM and CX Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Showing results for 
Search instead for 
Did you mean: 
dmitry_sharshatkin
Active Participant



I have already briefly mentioned asynchronous rendering of the tables here:


Parallelization in Web UI - Part 2


Since then I have simplified a solution to a certain extent, but I forgot to make a post about it :smile: . A new solution does not require you to use createFastRowsCallback function (which, in fact, should receive a kind of crazy input, that you have to create on your own).


Instead we will build a normal HTML-based response. It can be doe for ANY Tajax area, including the tables.


So, what is the difference?


And the changes are:


1.       When building a view, we start it from our own TAJAX area (<tajax:areaid="myTajaxArea" >).


2.       Moreover, we need to store its name in the controller class (controller->gr_ajax_area = page_context->element_at_top_of_stack( ).).


3.       As a callback function, we are using our own one. (function UpdateMyTable(reqObj)).














<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<%@extension name="tajax" prefix="tajax" %>
<script language=
"javascript" type="text/javascript">
function UpdateMyTable(reqObj)
{
var responseText = reqObj.request.responseText;
var obj = JSON.parse(responseText);
var fnum = obj.TEXT.length;
for (var i = 0; i < fnum; i++) {
var elem = document.getElementById(obj.TEXT[i].NAME);
if (elem){
elem.innerHTML = obj.TEXT[i].VALUE;
}
}
}
</script>
<tajax:area id=
"myTajaxArea" >
</br>
<b>Here the
area begins!</b>
</br>
<%
" Save Top AJAX Area Reference
controller
->gr_ajax_area = page_context->element_at_top_of_stack( ) .

"
Conversion Cnode SelectionMode to Tag
data: lv_cellerator_selectionmode type string,
lv_cellerator_editmode  type
string,
lv_cellerator_selectioncolumn
type string.
cl_thtmlb_util
=>translate_selection_mode(
exporting
iv_selection_mode   
= SOMEDATA->SELECTION_MODE
iv_all_rows_editable
= space
importing
ev_selection_mode  
= lv_cellerator_selectionmode
ev_edit_mode       
= lv_cellerator_editmode
ev_selection_column
= lv_cellerator_selectioncolumn ).


data: lv_table_bee type ref to cl_chtmlb_config_cellerator.

if controller->gv_config_table is initial
or 1 = 1.

" Create Table
call method cl_chtmlb_config_cellerator=>factory
exporting
id                    = controller->gc_table_id
downloadToExcel      
= 'TRUE'
editMode             
= 'NONE' "lv_cellerator_editmode
onRowSelection       
= 'select'
personalizable       
= 'TRUE'
selectedRowIndex     
= somedata->selected_index
selectedRowIndexTable
= somedata->selection_tab
selectionColumn      
= lv_cellerator_selectioncolumn
selectionMode        
= lv_cellerator_selectionmode
table                 = somedata->table
_table               
= '//SOMEDATA/Table'
usage                
= 'EDITLIST'
visibleFirstRow      
= somedata->visible_first_row_index
visibleRowCount      
= '6'
width                
= '100%'
xml                  
= controller->configuration_descr->get_config_data( )
receiving
element      
= lv_table_bee.

"
Store the link
controller
->gv_config_table ?= lv_table_bee.

"   Post AJAX call to update content  %>


      <script type="text/javascript">
thtmlbAJAXCall.callBackend(
"<%= controller->create_ajax_url( ) %>",UpdateMyTable);
</script>
<%
"
lv_table_bee
->emptytabletext =


                 cl_wd_utilities=>get_otr_text_by_alias( 'CRM_BSP_UI_FRAME_RECOBJ/LOADING' ).

endif.

" Get the link
lv_table_bee ?= controller
->gv_config_table.

" Render html element
lv_table_bee
->if_bsp_bee~render( _m_page_context ).
%>
</br>
<b>Here the
area ends!</b>
</br>
</tajax:area>




4.       In IF_CRM_WEB_CALLBACK~HANDLE_REQUEST method we are using a new method CREATE_TABLE_VIEW_HTML_NEW, which returns an inner HTML of our TAJAX Area.










method create_table_view_html_new.


 

" Variables

data: lv_attribute_path type string,

lv_model_name     type string.

 

" Strucures

data: ls_area_content type crms_tajax_area_content.

 

" References

data: lo_page            type ref to cl_bsp_ctrl_adapter,

lo_view_manager    type ref to cl_bsp_wd_view_manager,

lo_view_controller type ref to cl_bsp_wd_view_controller,

lo_model           type ref to if_bsp_model_binding,

lo_context_node_tv type ref to cl_bsp_wd_context_node_tv.

 

" Field symbols

field-symbols: <fs_page>  type bsprtip.

 

" Create page instance

read table cl_bsp_context=>c_page_instances

with key page_name = cl_bsp_wd_appl_controller=>appl_controller_name

assigning <fs_page>.

 

" Rendering

if sy-subrc is initial and <fs_page>-instance is bound.

lo_page            ?= <fs_page>-instance.

lo_view_manager    ?= lo_page->m_adaptee.

lo_view_controller ?= ir_controller.

lo_view_manager->render( iv_root_view = lo_view_controller ).

endif.

 

" Get model

call method cl_bsp_model=>if_bsp_model_util~split_binding_expression

exporting

binding_expression = iv_binding_string

importing

attribute_path     = lv_attribute_path

model_name         = lv_model_name.

try.

lo_model ?= ir_controller->get_model( lv_model_name ).

lo_context_node_tv ?= lo_model.

catch: cx_root.

exit.

endtry.

 

"Build table

lo_context_node_tv->build_table( ).

 

" Get AJAX Area Content By ID

call method lo_view_controller->retrieve_ajax_area_content

exporting

iv_page_id         = ir_controller->component_id

iv_area_id         = iv_ajax_area_id

importing

es_content_info    = ls_area_content

er_used_controller = lo_view_controller.

 

ev_html = ls_area_content-area_content.

 

 

endmethod.

 


 




5.       We send back this inner HTML code as a part of JSON response. (Here we use a table, as probably several areas or individual fields can be processed in one request).











call method create_table_view_html_new
exporting
ir_server        
= ir_server
ir_controller    
= ir_controller
iv_binding_string
= '//SOMEDATA/TABLE'
iv_ajax_area_id  
= lr_controller->gr_ajax_area->id
importing
ev_html          
= lv_html.

if lv_html is not initial.
ls_field_list
-name  = lr_controller->gr_ajax_area->id.
ls_field_list
-value = lv_html.
append ls_field_list to lt_field_list.
endif.

"ABAP to JSON
lr_writer
= cl_sxml_string_writer=>create( type = if_sxml=>co_xt_json ).
call transformation id source text = lt_field_list[] result xml lr_writer.
lv_json
= lr_writer->get_output( ).


" Set Response
ir_server
->response->set_data( lv_json ).
ir_server
->response->set_header_field( name  = 'content-type'
value = 'text/xml' ).




And the picture to prove that this is working.





Run simple! No crazy concatenated HTML strings!



P.S. Sorry, standard SAP's formatting is lost again. Do not know how to keep it.



BR, Dima




6 Comments