Get input from JavaScript to Webdynpro Context

[Former Member]

All,

I've been working with the HTML island UI element to execute JavaScript and have been following the Web Dynpro HTMLIsland & HTMLContainer guide. In the guide it described how to send data from the context into the JavaScript and then display JavaScript alert messages with the content of the context. Is it possible to bring a value from JavaScript back into the context of WebDynpro?

Thanks!

[Former Member]

Hi

I would like create function (who return value) in Web DynPro Abap using JavaScript. I found option using HTML Island.

My step are by web site

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/9071424e-3724-3010-9b81-edd4e63d9...

site 20-21.

I create script MyHTMLIsland.js who contains

var MyHTMLIsland = {

addCallback: function (callback) {

callback.fireEvent('Event','Hello Web Dynpro'); } };

In WDDOMODIFYVIEW i have

DATA: lo_html_island TYPE REF TO cl_wd_html_island.
        IF first_time EQ abap_true.
            lo_html_island ?= view->get_element( 'HTML_ISLAND' ).
lo_html_island->add_script_call( cl_wd_html_script_call=>new_call( )->variable( 'MyHTMLIsland' )->function( 'addCallback' )->add_callback_api( ) ).
       ENDIF.

I have HTML_ISLAND under this is HTMLEVENT and HTMLSCRIPT

HTMLEVENT have name EVENT and onAction HTML_ISLAND_EVENT

In ONACTIONHTML_ISLAND_EVENT

wd_comp_controller->wd_get_api( )->get_message_manager( )->report_success( data ).

HTMLSCRIPT have only source MyHTMLIsland.js

Why this not working? What I have wrong?

Thank you

[ramakrishnappa]

Hi Johnson,

Yes, its possible to bring data from java-script file to WD via callback event.

callback.fireEvent('myEvent','dataString');

The above method signature has the parameter DATA of type string, through which the data of java script can be passed back to web dynpro.

You need to create an event in web dynpro for HTML element and use DATA parameter to bind back to context node.

Please refer page 20 to find out the details of callback function in Web Dynpro HTMLIsland & HTMLContainer

Hope this helps you.

Regards,

Rama

[Former Member]

Hi Rama

Taking this a bit further, is is possible to to use the HTML Island and JS to call a function WITHOUT having to use a button to trigger the event?

From what I've read so far it seems that all the events are triggered from a button press by the user. I would like to use the concept of a field losing focus or an input field being changed to trigger a function that will in turn change the value of another field on the WDA.

Do you know if this is possible or of any examples?

Thanks

Jon.

[ramakrishnappa]

Hi Jon,

We can also trigger the event by using onChange and also with some other means.

<input type="text" onchange="myFunction()">

Here "myFunction( )" javascript function gets called upon change in input.

Hope this gives you an idea.

Regards,

Rama

[Former Member]

Hey Rama

Thanks for the swift reply. It's good to know that I can make use of the onchange concept however I'm still a bit confused by the HTML Island concept in general. Can you use the Island to only include event and script elements?

Here's my scenario.

In the screenshot below I want to take the user entered value in the 'Actual Date of Contact' input field and then using the onchange event on that field dynamically enter a value for the 'Next Contact Date'.

Do I therefore need to include the input fields with the HTML Island or can I reference the input from within the Island via a call to the JS?

Hope you can help!!!!

Thanks again.

Jon

[ramakrishnappa]

Hi Jon,

You need to have input fields designed in html with javascript functions and inside the javscript functions you can call back WD method and populate the data back to form.

Regards,

Rama

[Former Member]

I'm having a Friday moment here Rama!!

How would the individual WDA fields be designed in HTML? Using the ABAP API IF_WD_HTML_WRITER in the WDDOINIT method perhaps?

Is it therefore necessary to replicate the entire form layout within the HTML Island or can you have HTML designed fields in isolation?

Sorry to be a nuisance!

Jon.

[ramakrishnappa]

Hi Jon,

Here, you need to create html file for a set of input fields, to which you need to have onChange( ) functionality and other fields you can design using WDA. Import the file as mime object into WDA component and use it as source for html container.

Hope this pushes you ahead

Regards,

Rama