#WebClientUI for S/4HANA
· ajax
· crm webclient ui
· crm webui
· tableview
· Technical Articles
· webclient ui
Cómo usar AJAX en WebClient UI Tableview
By s4pcademy
El propósito de este blog es explicar cómo podemos usar fácilmente AJAX para activar solicitudes HTTP asincrónicas en Tableviews de Web UI.
Hay varios blogs disponibles en SAP Community sobre implementaciones de AJAX en la interfaz de usuario web, pero este blog se centra en la integración de Tableview.
Los casos de uso para dicha implementación son ilimitados, pero el caso de uso actual es el siguiente:
En el bloque de asignación de Números de Identificación del Socio Comercial mantenemos la Identificación del Registro Nacional de clientes B2C (en un Tipo de Identificación personalizado). Por motivos del RGPD, este valor se cifra antes de almacenarse en la tabla de la base de datos. Pero existe un requisito comercial para permitir que algunos agentes vean la identificación descifrada. Por motivos de rendimiento y para evitar recargar toda la página, se activa una solicitud HTTP asíncrona para mostrar el ID descifrado.
Observación: cómo se encripta esta ID por primera vez no forma parte del alcance de este blog. Lo que es importante saber es que el cifrado/descifrado lo realiza una API externa.
Figura 1 – Resultado final
Como punto de partida utilicé el excelente blog de jerry wang:
Resumen de los pasos:
- Mejora del componente/vista estándar de la interfaz de usuario web
- Creación de un iterador Tableview personalizado
- Creación de una clase de controlador HTTP personalizada y un servicio SICF
Mejora del componente/vista estándar de la interfaz de usuario web
Componente: BP_DATA, Vista: AccountIDNumberList
Creación de un iterador Tableview personalizado
Cree una nueva clase personalizada (por ejemplo, ZL_BP_DATA_ACCOUNTIDNUMB1_IT) implementando la interfaz IF_HTMLB_TABLEVIEW_ITERATOR
Figura 2 – Iterador
Crear atributo GR_CONTEXT_NODE_TV tipo referencia a CL_BSP_WD_CONTEXT_NODE_TV
Implementar método Constructor
METHOD CONSTRUCTOR.
gr_context_node_tv = ir_context_node_tv.
ENDMETHOD.Implementar el método IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START
Gracias a este método podemos generar los elementos HTML DOM necesarios para ejecutar Javascript:
-Botón THTMLB: activa la solicitud AJAX (lr_button->onclientclick)
-THTMLB Textview: muestra el texto de respuesta AJAX. El elemento DOM HTML generado se identifica de forma única dentro de la tabla (lr_textview->id)
METHOD if_htmlb_tableview_iterator~render_cell_start.
DATA: lv_ident_type TYPE string,
lv_ident_code TYPE string,
lv_txtid_s TYPE string,
lv_txtid_l TYPE string,
lv_index TYPE char2,
lr_button TYPE REF TO cl_thtmlb_button,
lr_textview TYPE REF TO cl_thtmlb_textview.
* Check that Identification Number Row Type is 'National Register ID'
lv_ident_type = gr_context_node_tv->collection_wrapper->find( iv_index = p_row_index )->get_property_as_string( 'IDENTIFICATIONTYPE' ).
CHECK lv_ident_type EQ 'ZNATID'.
MOVE p_row_index TO lv_index.
* Generate the suffix and the full DOM element ID for the table row Texview (in this case: ‘<span>’)
CONCATENATE 'TXT.ZNATID.' lv_index INTO lv_txtid_s.
MOVE p_tableview_id TO lv_txtid_l.
REPLACE FIRST OCCURRENCE OF 'Table' IN lv_txtid_l WITH lv_txtid_s.
CASE p_column_key.
* Add Button 'Decrypt' in column <STRUCT.ATTR1>
WHEN '<STRUCT.ATTR1>'.
lv_ident_code = gr_context_node_tv->collection_wrapper->find( iv_index = p_row_index )->get_property_as_string( 'IDENTIFICATIONNUMBER' ).
CREATE OBJECT lr_button.
lr_button->onclientclick = |doDecryptID('| && lv_ident_code && |','| && lv_txtid_l && |')|.
lr_button->text = TEXT-001.
p_replacement_bee = lr_button.
* Add Textview in column <STRUCT.ATTR2>
WHEN '<STRUCT.ATTR2>'.
CREATE OBJECT lr_textview.
lr_textview->id = lv_txtid_s.
p_replacement_bee = lr_textview.
ENDCASE.
ENDMETHOD.Dónde
Se pasan dos parámetros a la función Javascript ‘doDecryptID(‘:
lv_ident_code = ID encriptado (valor del campo de entrada ‘Número de identificación’)
lv_txtid_l = identificador único del elemento DOM HTML ‘‘ en la página HTML del cliente
Los métodos IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLUMN_DEFINITIONS y IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_ROW_START pueden permanecer vacíos
Ajustar controlador de vista
En la clase de controlador mejorada (Z…_IMPL), cree el tipo de atributo ITERATOR ref a ZL_BP_DATA_ACCOUNTIDNUMB1_IT
Figura 3 – Controlador
Redefinir e implementar el método DO_INIT_CONTEXT
METHOD do_init_context.
CALL METHOD super->do_init_context.
CREATE OBJECT iterator
EXPORTING
ir_context_node_tv = typed_context->builidnumber.
ENDMETHOD.Si ha mejorado el Nodo de contexto, por supuesto, debe pasar el mejorado:
ztyped_context->zbuilidnumber
Ajustar página .htm
(Lista de números de ID de cuenta.htm)
Defina la variable URL para el servicio SICF personalizado: zcrajax_natid_d
<%
data: lv_url TYPE string,
lv_query type string.
lv_query = 'q='.
lv_url = cl_crm_web_utility=>create_url( iv_path="/sap/crm/zcrajax_natid_d" iv_query = lv_query iv_in_same_session = 'X' ).
%>Agregue el siguiente código javascript
<script>
var gv_txtid;
function GetXmlHttpObject(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged() {
if (xmlhttp.readyState == 4) {
document.getElementById(gv_txtid).innerHTML = xmlhttp.responseText;
}
}
function getRequestURL(str) {
var url = "<%= lv_url %>" + str;
url = url + "&sid=" + Math.random();
return url;
}
function doDecryptID(str,txtid){
if (str.length == 0 ) {
document.getElementById(txtid).innerHTML = "";
return;
}
gv_txtid = txtid;
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null ){
alert ("Your browser does not support XML HTTP Request");
return;
}
var requesturl = getRequestURL(str);
xmlhttp.onreadystatechange = stateChanged;
xmlhttp.open("GET",requesturl,true);
xmlhttp.send(null);
}
</script>(Este código podría incluirse en un archivo .js cargado en el Repositorio MIMEs)
Agregar atributo de etiqueta estándar iterador al elemento BSP Extension Table (CHTMLB, THTMLB…)
<chtmlb:configTable id = "Table"
table = "//BuilIDNumber/Table"
…
iterator = "<%= controller->iterator %>"
…
/>Cree una clase de controlador HTTP personalizada y un servicio SICF
Cree una nueva clase de controlador HTTP personalizada (implementando la interfaz IF_HTTP_EXTENSION) y asígnela al nuevo servicio SICF personalizado al que hizo referencia en la página .htm.
Figura 4 – Clase de controlador
Tx SICF
Figura 5 – Servicio SICF
Implementar método IF_HTTP_EXTENSION~HANDLE_REQUEST
METHOD if_http_extension~handle_request.
DATA: lv_ident_code TYPE string,
lv_ident_nr TYPE string.
lv_ident_code = server->request->get_form_field( 'q' ).
* call external API to retrieve the decrypted ID from the encrypted ID
********************************************
Call External API
exporting lv_ident_code (encrypted ID)
importing lv_ident_nr (decrypted ID)
********************************************
server->response->set_cdata( lv_ident_nr ).
ENDMETHOD.Los detalles de la llamada API no están documentados ya que no es el propósito de este blog.
Conclusión: Con un mínimo de mejoras, es posible usar AJAX dentro de cualquier Tableview de Web UI
Por favor, comparta sus comentarios en un comentario.
Haga preguntas sobre la interfaz de usuario de CRM WebClient
Lea otras publicaciones de blog sobre la interfaz de usuario de CRM WebClient
