java scritp problem_CRM WebClient UI - Talking with Java Script

Link to Content's target Space :

Applies to:

CRM 6.0/7.0

Summary

In this wiki, various ways of passing values to/from java scripts are discussed.

Author(s):

Arun Prakash Karuppanan

Company:     Accenture

Created on:    April 24 2010

Author(s) Bio

Arun Prakash Karuppanan is a software Engineer employed with Accenture, working on CRM implementations.

Table of Contents

Introduction:

It is not unoften that we have to resort to using java script for achieving certain functionalities. There's an easy enough way for passing simple data types to the java script using the tags. The problem is when more complex data are involved or when we want to pass the data the other way around. That is, from java script to ABAP. One particular way that you can find in the forums is using a hidden input field and setting it from java script. Then, a form submit is done and the set value can then be accessed in ABAP by reading the request object. This is just one way. But, this can handle only simple data types. In this wiki, I will show you other ways that can handle complex data types and do much else. For example, how would you like it if you were able to set an attribute of your controller class(_IMPL) from inside the java script? It can even be a table type! Read on.

Alternative for triggering Server events:

One way of triggering a server event is to use the java script's form.submit function. You can also use the following way to trigger server events from java script and pass data too. The tag will generate a java script function which we can then use inside a script to trigger a server event. You can pass two parameters p1 and p2 along with it.

id   = "fireServerEvent"

p1   = "p1"

p2   = "p2" />

Then, use the generated java script function like this. This is just like a form submit.

To process this event, create an event handler by the name 'serverEvent'(case sensitive). Inside the event handler, the data can be accessed in the following way.

DATA: lr_event TYPE REF TO cl_bsp_htmlb_event,

lt_event_items TYPE tihttpnvp,

ls_event_items TYPE ihttpnvp.

IF htmlb_event_ex IS BOUND.

lr_event ?= htmlb_event_ex.

IF  lr_event->name = 'fireServerEvent'.

*access as lr_event->p1 and lr_event->p2.

ENDIF.

ENDIF.

Using context node bindings:

You all know how we can bind the fields in our page to an attribute of a context node. You can use this binding to your advantage. Keep the field hidden if you wish. Something like this.

type    = "string"

visible = "false"

value   = "//mvanode/mvattr1" />

This input field is bound to the attribute "MVATTR1" of the context node "MVNODE". Using this input field inside the java script, we can directly modify values of the context node's attribute.

Using the SAP Java Script Engine class:

Let us take up an example scenario. I have created a table view component using value nodes. In my view implementation class(_IMPL), I have two public attributes "gv_counter" that is type int4 and another attribute "GT_ITAB" that is of table type "BSP_WD_DROPDOWN_TABLE". The view should refresh every 6 seconds. During each refresh, value nodes are generated from the entries in the attribute "GT_ITAB" for display in the table view. Of course, the attribute "GT_ITAB" is filled in the java script. The table view description should also come from the script. For our needs, the Java Script Engine class "cl_java_script" comes to the rescue. Using this class, we can "evaluate" a java script. You are also guarded from script errors. Everything that you expect will happen only if the code is alright. Be sure to get the return variable of the "evaluate" method to analyze errors.

In the code shown above, I'm passing the reference of the controller(_IMPL) directly to the java script.  In practice, this can be considered bad. You can instead pass references of the relevant attributes to the script. You can get more details on how to use this class properly in SAP help documentation. The URL is provided below. I'm also triggering a server event periodically using the setInterval method. Notice that I access the class attributes and comoponents of the table line using lower case. Shown below is a screen shot of the output.

Related Content