Building SAP GUI application with external Javascript library source files
Good user interface will play key role in many aspects of an application. Visual representation of data in SAP GUI has got some limitations and to break those barriers SAP has HTML viewer. Here we can build applications (create page content) that uses HTML, Java Script and other related web programming. This is best choice when entire project is running in SAP GUI and you want utilize power of web programming.
In this blog, let’s see how can we create “SAP GUI application with HTML pages that uses Java script library as source”. Before we start using related SAP classes and methods, go through SAP documentation. In this blog, we are not dealing with any events, instead of that, we are going to create rich web application within GUI that uses source files from external Java script library.
As shown in below flow diagram, there are not many steps involved in this application creation. All you need to know is OOABAP and HTML/Java Script coding up to required level.
<Flow daigram will be added here>
Step 1
Identify required Java Script source files from JS library and upload them into SAP Web repository (SMW0 is transaction code). Remember, these are not “HTML code pages” so you should upload them as “Binary data” files in repository. To identify what should be uploaded and what should not, you can build sample HTML page in your local system folders. (Hint: There will be files with name “.bin” in library to cover this kind of requirements)
Step 2
In ABAP program, create one screen with custom container. Import Java Script source files into ABAP program. We can use these URL(refer below code) in HTML coding as source (<src>) files. Below code is from PBO module of ABAP screen.
- BROWSER_WINDOW is custom container name on screen.
- ZFILE.MIN.JS is object name that we uploaded in SAP web repository.
- ONE.JS is just name that we are importing .JS files into.
data: html_control type ref to cl_gui_html_viewer,
custom_container type ref to cl_gui_custom_container.
create object custom_container exporting container_name = 'BROWSER_WINDOW'.
create object html_control exporting parent = custom_container.
call method html_control->load_mime_object
exporting
object_id = 'ZFILE.MIN.JS'
object_url = 'ONE.JS'
others = 1. Step 3
Append your HTML code to internal table. As we can see, here we are using “ONE.JS” as source file in HTML code. In addition to HTML & Javascript, you can pass dynamic values from ABAP code. In below code snippet, I have one line appended to table, however, this is where we should leverage HTML, Java Script library and ABAP code to get desired outcome.
data: g_html type w3htmltabtype,
g_html_line type w3html.
g_html_line-line = '<!DOCTYPE html><html><head><title></title><script src=ONE.JS></script>'.
append g_html_line to g_html.
Step 4
Send G_HTML internal table from step 4 into “LOAD_DATA” method. This is where we are tagging our HTML page with one name or URL. You can create number of tables with different codes and tag them with different names. In below code, I am giving “LIN.HTML” to above HTML code.
call method html_control->load_data exporting url = 'LIN.HTML'
changing data_table = g_html. Step 5
Show HTML pages on custom container with SHOW_URL method. As you can see, we are simply passing name or URL of HTML page to below method. As I mentioned above we can display more than one content based on user interaction.
call method html_control->show_url exporting url = 'LIN.HTML'. Results
To build the application you should have good understanding on various functions of Java Script library. That will help you in creating applications with multiple themes, animations and different functions of selected library.
Thank you!
Hi,
I can't see any of your images sorry.
Gareth.
check it now.. I will add image for flow. I was referring to URL and I think that was broken. Sorry for that.
Hi,
I need external .JS file for jQuery to be used in Function Module that contains JavaScript ( class CL_JAVA_SCRIPT) . Can I upload this jQuery.js into the SAP Web repository and use it in my function module?
Thank you very much for your explanation.
Best Regards,
Seprihadi
Hi Seprihadi,
Yes, you can. Upload that source file as Binary Data file (is one of the radio button on first screen of SMW0 tcode) in SAP web repository. While doing this you will assign one name (object ID) to that file. Now, you can use below method to access your file or object id... which means (as per below code) you are creating local URL to access your file (one.js instead of www.jquerylibrarysourcefile.js).
Regards,
Naveen