Step by Step example of simple BSP application - Part 1

 

This small application has a Menu page, from which you can navigate to another page that displays a list of customers from custom table ZKUNDER

The application has been further developed, so new customers can be created and existing customers edit in Step by Step example of simple BSP application - Part 2

Preparations

  1. Goto SE80 and create a BSP application named ZHFR_BSP1
  2. Add a page called Menu.htm
  3. Add a page called CustomerList.htm

Creating Menu.htm

Create the Menu page and add a form with a button, that is used to navigate to page CustomerList.htm.

Layout

Go to the layout tab and add the following code:

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<html>

<title>Main menu</title>

<h1>Main menu</h1>

<body>
  <form method = "post">
     <input type=submit name="onInputProcessing(customerlist)" value="Customer list"

  </form>
</body>

</html>
When the button is pushed, the OnInputProcessing event is fired with event_id customerlist. 

Event Handler

Go to the event handler tab. Choose OnInputProcessing from the dropdown llist.


Add the followong code to the event:

* event handler for checking and processing user input and
* for defining navigation

case event_id.
  when 'customerlist'.
    navigation->next_page('TOCUSTOMERLIST').


endcase.

Create navigation for both pages

Double-click on the BSP application ZHFR_BSP1 and choose the navigation tab. Insert the following lines.

 

Notice that the Navigation Request is tha name that is used in the line navigation->next_page('TOCUSTOMERLIST') in the event handler. There are also added a navigation request to return from CustomerList.htm to Menu.htm.

 

Create CustomerList.htm

Create page attributes

The database table ZKUNDER is read into internal tablei_zkunder in the event OnInitialization.

I_ZKUNDER must be declared in the Page Attributes.

Note: The table type ZKUNDER_TABLE must first be created in SE11

 

Create event handler

OnInitialization

In this event we read database table ZKUNDER into internal table i_zkunder:

* event handler for data retrieval

select * from zkunder into table i_zkunder.

OnInputProcessing

Here we handles the event, when user presses the Back button to return to the main menu.

* event handler for checking and processing user input and
* for defining navigation

case event_id.
  when 'back'.
    navigation->next_page('TOMAIN').
endcase.

Create layout

The contents of internal table i_zkunder is displayed in a html table.

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<html>

<title>Customer list</title>

<h1>Customer list</h1>

<body>

<table border="1">
    <tr>
        <td>Cust. No.</td>
        <td>Cust. Name</td>
        <td>Currency</td>
    </tr>
    <% Data: wa_zkunder type zkunder.
       loop at i_zkunder into wa_zkunder.
    %>

      <tr>
          <td><%=wa_zkunder-ZZKUNNR %></td>
          <td><%=wa_zkunder-ZZKUNNAVN %></td>
          <td><%=wa_zkunder-ZZCURR %></td>
      </tr>
     <% endloop. %>
</table>
<p>
 <form method = "post">
     <input type=submit name="onInputProcessing(back)" value="Back to menu"

  </form>


</body>

</html>

Resulting pages

This is the result when running the BSP in the browser:

 

 

 

 

 

 

 

 

 

 

 

Converted from CHM to HTML with chm2web Standard 2.7 (unicode)