Show TOC

Creating a Start PageLocate this document in the navigation structure

Use

This procedure describes how to:

  • Create the layout of the start page for the application

    The start page is a simple page that displays the retrieved image. With the Complete button, the application notifies the Guided Procedures framework that the task should be completed.

  • Implement event handler OnRequest

    This event handler is called when the page is requested. It restores the internal data structures from the request. This handler retrieves the input data from the HTTP request, converts it to the appropriate format, and loads the required data.

  • Implement event handler  OnInputProcessing

    This event handler checks and processes user input and defines navigation. It stores the output data and navigates to the completion page.

  • Declare the page attributes

    Attributes that are accessed in the event handlers must be declared for the input to the page.

Prerequisites

You are in the ABAP Workbench.

You have created a BSP application named EUP_BSP_CO.

Procedure

Create the Page Layout

  1. Add a new BSP page to application EUP_BSP_CO. Enter the following values for the page parameters:
    Parameter Value

    Name

    tutorial.htm

    Page type

    Page with Flow Logic
  1. Edit the page layout as follows:

<%@page language="abap" %>

<html>

<head>

<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">

<title> SAP Web Application Server </title>

<head>

<body class="bspBody1">

<center>

<p>

<img src="../../../../PUBLIC/BC/Pictograms/<%= pictogram_name %>">

<br>

<form method="POST">

<input type="submit" name="onInputProcessing(update)" value="Complete">

<form/>

</body>

</html>

The most important tags are explained in the table below:

Tag Description 
<img src="../../../../PUBLIC/BC/Pictograms/<%= pictogram_name %>">

Defines the location where the pictogram is displayed. The name of the image is dynamically specified by variable pictogram_name .

 
<form method="POST"> <input type="submit" name="onInputProcessing(update)" value="Complete"><form/>

This form defines a button that invokes the OnInputProcessing event handler.

Implementing OnRequest Event Handler

  1. On the Event Handler tab, choose OnRequest from the pull-down menu.
  2. Edit the source code as follows:
    1. Enter a code for checking the type of HTTP request. An HTTP GET method triggers the initialization of tutorial.htm, while a POST method causes the application to exit the handler. This check ensures that the application does not try to read the input data each time the page is invoked, because the data is deleted from the database after being read.

DATA: method type string.

method = request->get_method( ).

IF method = 'POST'.

EXIT.

ENDIF.

  1. Declare the global variables:

DATA: lv_input_type  TYPE STRING,

lv_input_value TYPE STRING,

lv_process_id  TYPE GUID_32,

lv_task_id     TYPE GUID_32,

lv_conf_props  TYPE EUP_BSP_CONF_PROPS_TABLE,

lv_value_label TYPE REF TO EUP_VALUE_LABEL.

  1. Retrieve the process and task identifiers, which are declared as page attributes, from the parameters of the HTTP request. These attributes identify the input data to be read, as described below.

CALL METHOD PAGE->GET_ATTRIBUTE

EXPORTING

NAME  = 'process_id'

IMPORTING

VALUE = lv_process_id.

CALL METHOD PAGE->GET_ATTRIBUTE

EXPORTING

NAME  = 'task_id'

IMPORTING

VALUE = lv_task_id.

  1. Retrieve the input data using function EUP_GET_BSP_INPUT_DATA. The input data is identified by its process and task IDs. It consists of an input value and input type represented as XML strings, as well as a table of configuration properties.

    To transform the XML representation of the input data to object-oriented representation, use the methods of function EUP_STRUCTURE_FACTORY. In the example, call method UNPACK_VALUE_LABEL_FROM_XML to instantiate class EUP_VALUE_LABEL.

CALL FUNCTION 'EUP_GET_BSP_INPUT_DATA'

EXPORTING

IV_PROCESS_ID  = lv_process_id

IV_TASK_ID     = lv_task_id

IMPORTING

EV_INPUT_VALUE = lv_input_value

EV_INPUT_TYPE  = lv_input_type

EV_OUTPUT_TYPE = lv_output_type

TABLES

ET_CONF_PROPS  = lv_conf_props.

CALL METHOD EUP_STRUCTURE_FACTORY=>UNPACK_VALUE_LABEL_FROM_XML

EXPORTING

IV_XML         = lv_input_value

IMPORTING

EV_VALUE_LABEL = lv_value_label.

  1. The converted data is stored using internal index tables.

    To visualize the retrieved image, assign the data to variable pictogram_name .

pictogram_name = lv_value_label->get_string_struct_element(

label_name = 'pictogram_name' namespace = 'com.sap.caf.gp' ).

Implementing OnInputProcessing Event Handler

  1. On the Event Handler tab, choose OnInputProcessing from the pull-down menu.
  2. Implement the event handler as follows:
    1. Declare the global variables by defining a table for storing the result states of the task, and a string variable for the output data converted to XML.

DATA: lt_result_state TYPE EUP_BSP_ST_RESULT_STATE,

lt_result_states TYPE EUP_BSP_RESULT_STATES,

str type string.

  1. Add a line to the table for the COMPLETED result state. This state is returned if the task was successfully completed.

lt_result_state-result_state = 'COMPLETED'.

APPEND lt_result_state TO lt_result_states.

DATA: lv_value_label TYPE REF TO eup_value_label.

CALL FUNCTION 'EUP_CREATE_BSP_OUTPUT_STRUCT'

IMPORTING

EV_VALUE_LABEL = lv_value_label.

lv_value_label->set_string_struct_element( element = 'test'

label_name = 'test' ).

  1. Generate the structure for the output data using function EUP_CREATE_BSP_OUTPUT_STRUCT.

    To convert the output data to XML, call method PACK_VALUE_LABEL_TO_XML of class EUP_STRUCTURE_FACTORY.

DATA: lv_value_label TYPE REF TO eup_value_label.

CALL FUNCTION 'EUP_CREATE_BSP_OUTPUT_STRUCT'

IMPORTING

EV_VALUE_LABEL = lv_value_label.

lv_value_label->set_float_struct_element( element = '1.12'

label_name = 'double' ).

CALL METHOD EUP_STRUCTURE_FACTORY=>PACK_VALUE_LABEL_TO_XML

EXPORTING

IV_VALUE_LABEL = lv_value_label

IMPORTING

EV_XML = str.

  1. Call function EUP_STORE_BSP_OUTPUT_DATA to store the output data. This function uses the process and task IDs as parameters and returns the output in an XML representation, as well as a table of result states.

    The output is retrieved when the Application Server (AS) Java has been notified that the task was completed or an exception occurred. It is then deleted.

CALL FUNCTION 'EUP_STORE_BSP_OUTPUT_DATA'

EXPORTING

IV_PROCESS_ID    = process_id

IV_TASK_ID       = task_id

IV_OUTPUT_VALUE  = str

TABLES

IT_RESULT_STATES = lt_result_states.

  1. Define the navigation to the completion page.

navigation->goto_page( url = 'complete.htm' ).

Define Page Attributes

  1. On the Page Attributes tab, declare the following attributes:
    Attribute Auto TypingMeth Associated Type

    PICTOGRAM_NAME

    Checked

    TYPE

    STRING

    PROCESS_ID

    Checked

    TYPE

    GUID_32

    TASK_ID

    Checked

    TYPE

    GUID_32
  1. Activate the BSP.

Proceed with Creating a Completion Page .