Application Development Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
Showing results for 
Search instead for 
Did you mean: 
Active Contributor

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 
           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'.  


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!

Labels in this area