Defining Layout for the Results List (SAP Library - A Simple BSP Application with HTMLB)

Defining Layout for the Results List

Use

The results list results.htm displays all the books by the author the user selected.

If no matching entries are found, an error message is to be displayed. Otherwise a results list is to be displayed in a table with details of the ISBN, title and author.

Procedure

For the results.htm page choose the Layout tab page.

Define the layout:

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<htmlb:content>

  <htmlb:page title="Books that match your query" >

    <table width="100%" height="100%" cellspacing="1" cellpadding="2" border="0">

                <tr class="sapTbvCellStd"> <td bgcolor="Whitesmoke" valign="top">

    <h2> Your Book Search Results </h2>

    <%

      if books is initial.

    %>

    page->messages->add_message("Das war falsch").

    <%-- <h3> Sorry, we found no matches for  <%= authorlname %>, <%= authorfname %>. </h3>  --%>

    <%

      else.

    %>

    <h3> The matches for this search are: </h3>

    <htmlb:form>

      <htmlb:tableView id            = "tv2"

                       headerText    = "Books that match your query"

                       headerVisible = "true"

                       footerVisible = "false"

                       design        = "ALTERNATING"

                       table         = "<%= books %>" >

        <htmlb:tableViewColumns>

          <htmlb:tableViewColumn columnName = "authfnam"

                                 title      = "Author's first name" >

          </htmlb:tableViewColumn>

          <htmlb:tableViewColumn columnName = "authlnam"

                                 title      = "Author's last name" >

          </htmlb:tableViewColumn>

          <htmlb:tableViewColumn columnName = "title"

                                 title      = "Book Title" >

          </htmlb:tableViewColumn>

          <htmlb:tableViewColumn columnName = "isbn"

                                 title      = "ISBN" >

          </htmlb:tableViewColumn>

        </htmlb:tableViewColumns>

      </htmlb:tableView>

    </htmlb:form>

    <%

      endif.

    %>

    </td></tr></table>

  </htmlb:page>

</htmlb:content>

The internal table authors contains the names of the authors that correspond to the user input. If the table is empty, the system outputs a message stating that no results were found that matched the user input for first name and last name. This message is displayed using the messages object.

Otherwise, the results are diplayed as a table, which is implemented using the HTMLB extension element tableView. The table lists the ISBN, the title of the book, and the name of the author.

Save your entries.

Continue with the page attributes as in the Second Tutorial.

Continue with event handler OnInputProcessing, as described in the Second Tutorial.

Result

You have now created your second BSP application with HTMLB.

Let’s do the Third Tutorial!