BSPs with Layout, Initialization, and Input Processing

Use

In this example, there is a CD page as well as a book page. The CD page should be aligned with the distribution of CDs. Furthermore there is also user input, which outputs the book page or the CD page depending on the category that was selected on the selection page.

Overview

These BSPs are as follows in the Web Application Builder:

Layout of select.htm

<%@ page language="abap" %>
<html>
  <body>
  <h2> Select CDs or Books! </h2>
  <form method="post" >
    <select name="sel_category">
      <option value="0001"> Books
      <option value="0002"> CDs
    </select>
    <input type="submit" name="OnInputProcessing(select)" value="Select">
  </form>
  </body>
</html>

OnInputProcessing of select.htm

* event handler for checking and processing user input and

* for defining navigation

 data: cat type string.

 case event_id.

 when 'select'.

    cat = request->get_form_field( 'sel_category' ).

    if cat = '0001'.

     navigation->goto_page( 'books.htm' ).

   elseif cat = '0002'.

     navigation->goto_page( 'cds.htm' ).

   endif.

 endcase.

Layout of books.htm

<%@ page language="abap" %>
<html>
  <body>
    <h2> All books </h2>
    <table border=1>
    <tr>
      <th></th>
      <th>Title</th>
      <th>Author</th>
      <th>Publisher</th>
      <th>ISBN</th>
    </tr>
    <% data: wbook like line of books.
       loop at books into wbook. %>
    <tr>
      <td><img src="../../bookstore2/<%=wbook-category%><%=wbook-id%>_s.jpg"></td>
      <td><%= wbook-title %></td>
      <td><%= wbook-author %></td>
      <td><%= wbook-publisher %></td>
      <td><%= wbook-id %></td>
    </tr>
    <% endloop. %>
  </table>
  </body>
</html>

OnInitialization of books.htm

select * from bsparticle into table books where category = '0001'.cds

Page attributes of books.htm
Attribute Name	Automatically	Typing Kind	Reference Type	Description
`Books`		`TYPE`	`TARTICLE`	List of books

Layout of cds.htm

<%@ page language="abap" %>
<html>
  <body>
  <h2> All CDs </h2>
  <table border=1>
    <tr>
      <th></th>
      <th>Title</th>
      <th>by</th>
      <th>Label</th>
      <th>number</th>
    </tr>
    <% data: wcd like line of cds.
       loop at cds into wcd. %>
    <tr>
      <td><img src="../../bookstore2/<%=wcd-category%><%=wcd-id%>_s.jpg" border=1></td>
      <td><%= wcd-title %></td>
      <td><%= wcd-author %></td>
      <td><%= wcd-publisher %></td>
      <td><%= wcd-id %></td>
    </tr>
    <% endloop. %>
  </table>
  </body>
</html>

OnInitialization of cds.htm

select * from bsparticle into table cds where category = '0002'.

Page attributes of cds.htm
Attribute Name	Automatically	Typing Kind	Reference Type	Description
`CDs`		`TYPE`	`TARTICLE`	List of CDs