Show TOC

Example documentationTableView Locate this document in the navigation structure

 

You can find this example in the system under BSP application SBSPEXT_HTMLB, page TableView.bsp (package SBSPEXT_HTMLB).

Layout

Syntax Syntax

  1. <%@page language="abap"%>
    <%@extension name="htmlb" prefix="htmlb"%>
    
    <htmlb:content>
      <htmlb:page title = "BSP Extension: HTMLB / Element: tableView">
        <htmlb:form>
          <htmlb:tableView  id = "tv1"
                    headerText = "Connections"
                 headerVisible = "true"
                        design = "alternating"
               visibleRowCount = "8"
               fillUpEmptyRows = "true"
                 onHeaderClick = "MyEventHeaderClick"
                onRowSelection = "MyEventRowSelection"
                 selectionMode = "multiselect"
                         table = "<%=sflight%>" >
    
            <htmlb:tableViewColumns>
              <htmlb:tableViewColumn
                      columnName = "carrid"
                        wrapping = "true"
                           width = "100"
                     onCellClick = "MyCellClickCarrid__"
             horizontalAlignment = "center"
                           title = " "
                            type = "user" >
    
                <htmlb:textView  id ="$TVCID$"
                               text = "$TVCVALUE$"
                             design = "LABELSMALL"
                             layout = "PARAGRAPH"
                           required = "TRUE"
                              width = "100%"
                            tooltip = "$CARRNAME$"
                             encode = "FALSE"
                           wrapping = "TRUE" />
    
              </htmlb:tableViewColumn>
    
              <htmlb:tableViewColumn
                     columnName = "myicon"
                           type = "user"
                          title = "Image"
            horizontalAlignment = "center" >
    
              <htmlb:link id = "$TVCID$"
                     onClick = "$CARRNAME$"
                     tooltip = "$CARRNAME$">
    
                <htmlb:image src = "$TVCVALUE$"
                        alt = "$TVCVALUE$"
                        tooltip = "$CARRNAME$" />
    
              </htmlb:link>
              </htmlb:tableViewColumn>
    
              <htmlb:tableViewColumn  
                  columnName = "myinputfield"
                        type = "user"
                       title = "Input Field"
              cellInvalidKey = "invalid"
             cellDisabledKey = "disabled"
         horizontalAlignment = "center" >
    
              <htmlb:inputField 
                          id = "$TVCID$"
                       width = "100%"
                       value = "$myinputfield$"
                        type = "Date"
                    showHelp = "true"
              firstDayOfWeek = "2" />
    
              </htmlb:tableViewColumn>
    
              <htmlb:tableViewColumn  
                  columnName = "mybutton"
                        type = "button"
                       title = "Button"
               cellDesignKey = "design"
                 onItemClick = "MyButton__"
         horizontalAlignment = "center" />
    
              <htmlb:tableViewColumn
                  columnName = "fldate"
                 onCellClick = "MyCellClickFldate__"
                       title = "Datum"
                    wrapping = "true"
                       width = "100"
         horizontalAlignment = "center" />
    
              <htmlb:tableViewColumn
                   columnName = "DDLKEY"
                        title = "User defined: List Box"
                         type = "user" >
    
              <htmlb:dropdownListBox 
                           id = "$TVCID$"
                        table = "<%=sflight%>"
              nameOfKeyColumn = "DDLKEY"
            nameOfValueColumn = "CARRNAME" />
    
              </htmlb:tableViewColumn>
    
              <htmlb:tableViewColumn 
                   columnName = "linktextid"
                        title = "Link"
                         type = "link"
                linkColumnKey = "linkcarrid"
              linkClickTarget = "_blank"/>
    
                <htmlb:tableViewColumn
                   columnName = "linkstextid"
                  onItemClick = "MyLink__"
                        title = "Link with Handler"
                         type = "link"
                linkColumnKey = "linkcarrid"/>
    
                <htmlb:tableViewColumn
                   columnName = "linkid"
          horizontalAlignment = "center"
                         type = "imagelink"
                linkColumnKey = "linkcarrid"
              linkClickTarget = "_blank"
                        title = "ImageLink" />
    
    	        </htmlb:tableViewColumns>
          </htmlb:tableView>
        </htmlb:form>
      </htmlb:page>
    </htmlb:content>
    
    
End of the source code.
Attributes

Attribute

Auto

Typing Kind

Reference Type

rowSelection

TYPE

STRING

rowSelectionEvent

TYPE

STRING

sflight

TYPE

MYSFLIGHT

OnInitialization

Syntax Syntax

  1. * event handler for data retrieval
    
    data:  wa like line of sflight,
          name type string,
          value type string,
          str type string,
          scol type string,
          srow type string,
          id type string,
          mod type i,
          sytabix type sytabix,
          sflightlink type table of sflightlink.
    
    field-symbols:  <wa> like line of sflight,
                    <waLink> type sflightlink.
    select * from sflight into corresponding fields
      of table sflight.
    
    select * from sflightlink into table sflightlink.
    
    loop at sflight assigning <wa>.
    
    sytabix = sy-tabix.
    read table sflightlink assigning <aLink> with key carrid = <wa>-carrid.
    
    <wa>-LINKCARRID = <waLink>-HTTPLINK.
    <wa>-linktextid = <waLink>-CARRNAME.
    <wa>-linkstextid = <waLink>-CARRNAME.
    <wa>-myinputfield = sy-cdate. "<wa>-FLDATE
    <wa>-mybutton = <waLink>-CARRNAME.
    <wa>-FLOATT = 2000000.
    str = <wa>-FLDATE.
    
    concatenate <wa>-CARRID <wa>-CONNID str into <wa>-DDLKEY.
    
    str = page->to_string( value = <wa>-FLDATE ).
    
    
    concatenate <waLink>-CARRNAME ' (' <wa>-CONNID '/' str ')' into <wa>-CARRNAME.
    
    if <wa>-carrid eq 'AA'.
      <wa>-linkid = '../HTMLB_SAMPLES/aa.gif'.
    else.
      concatenate '../HTMLB_SAMPLES/' <waLink>-CARRNAME '.gif'
      into <wa>-linkid.
    endif.
    
    mod = sytabix mod 8.
    case mod.
      when 0.   <wa>-myicon = 'ICON_WF_WORKITEM_READY'.
      when 1.   <wa>-myicon = 'ICON_WF_WORKITEM_RESERVED'.
      when 2.   <wa>-myicon = 'ICON_WF_WORKITEM_STARTED'.
      when 3.   <wa>-myicon = 'ICON_WF_WORKITEM_COMMITTED'.
      when 4.   <wa>-myicon = 'ICON_WF_WORKITEM_WAITING'.
      when 5.   <wa>-myicon = 'ICON_WF_WORKITEM_COMPLETED'.
      when 6.   <wa>-myicon = 'ICON_WF_WORKITEM_ERROR'.
      when 7.   <wa>-myicon = 'ICON_WF_WORKITEM_CANCEL'.
    endcase.
    
    mod = sytabix mod 5.
    case mod.
      when 0.   <wa>-invalid = 'X'.
                <wa>-disabled = 'X'.
      when 1.   <wa>-disabled = 'X'.
      when 3.   <wa>-invalid = 'X'.
    endcase.
    
    mod = sytabix mod 3.
    case mod.
      when 0.   <wa>-design = 'STANDARD'.
      when 1.   <wa>-design = 'EMPHASIZED'.
      when 2.   <wa>-design = 'SMALL'.
    endcase.
    
    endloop.
    
    
End of the source code.
OnInputProcessing

Syntax Syntax

  1. * event handler for checking and processing user input and
    * for defining navigation
    CLASS CL_HTMLB_MANAGER DEFINITION LOAD.
    
     *Optional: test that this is an event from HTMLB library.
    IF event_id = CL_HTMLB_MANAGER=>EVENT_ID.
    
    * Scenario 1: Read event from manager.
    
      DATA: event TYPE REF TO CL_HTMLB_EVENT.
      event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).
      IF event->name = 'tableView'.
    
        DATA: tableview_event TYPE REF TO CL_HTMLB_EVENT_TABLEVIEW.
        tableview_event ?= event.
    
      ENDIF.
    
    
    
    * Scenario 2: Dispatch event directly onto event class
    
      DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE.
      CREATE OBJECT event_handler.
    
      CL_HTMLB_MANAGER=>dispatch_event( 
                  request = runtime->server->request
            event_handler = event_handler
             page_context = page_context
            ).
    
    ENDIF.
    
End of the source code.
Output

This graphic is explained in the accompanying text.