Start of Content Area

This graphic is explained in the accompanying text TableView  Locate the document in its SAP Library structure

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

Layout

<%@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 = "&nbsp;"
                    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>

 

Attributes

Attribute

Auto

Typing Type

Reference Type

rowSelection

 

TYPE

STRING

rowSelectionEvent

 

TYPE

STRING

sflight

 

TYPE

MYSFLIGHT

 

OnInitialization

* 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 <waLink> 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 2.   <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.

 

OnInputProcessing

* 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.

 

Output

This graphic is explained in the accompanying text

 

 

End of Content Area