Skip to Content
  • Objective

The objective of this document is to show how to develop a simple search help for Business Server Pages (BSP) using HTMLB and Javascript. There are many tutorials and blogs in SCN about developing search help for BSPs in many different ways. The intention of this document is to show how to use a pop up window with HTMLB tags in order to maintain SAP standardized UI atmosphere.

  • Scenario


In my sample I used the SFLIGHT table with its key fields on screen: carrid, connid and fldate. For displaying the available flights there will be a serach help for each key field in order to select a single value for each of them. After selecting each value there must be a restriction for the other key fields. For example, if we choose airline ‘AA’, then we must have only the connections available for ‘AA’ for the connections SH.

  • Design
     

The process flow below shows the navigation among the pages with flow logic. The flow of information from the start page to the search help page and back will be done using javascript. The navigation to the next page will be done using bsp navigation with the OnInputProcessing  event. These help values in start.htm page will be shown using the htmlb table view component at page sh.htm as a pop up window.

  • Development
     

The start.htm page must contain the three key fields of SFLIGHT table using HTMLB inputfields. For each of the input fields you need to create a page attribute with the auto flag. Create a SH HTMLB button for each input field and then assign a javascript function for each of them passing the value for which you want the SH to display (like: ‘CARRID’, ‘CONNID’, ‘FLDATE’. In the javascript function get the values of the forms and pass them through the URL for sh.htm.

For the OnInputprocessing event of start.htm we´ll have the following procedure:

In the sh.htm page we´ll need to develop the OnInitialization event to load the values for the tables: scarr, spfli and sflight. Then create the following layout considering which table to display according to the parameter passed through the URL. Remember to create the page attribute p_column_definitions as the type T_COLUMN_DEFINITIONS for each table.

To get each table view value place the following code in the OnInputProcessing event of sh.htm for each table according to the search help requested in start.htm. Remember to restrict the select statement for the connection and the flight date according to the parameters of the URL.

  • Demo

Follows the prints for the solution:

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply