Skip to Content

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3a

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3b

    1. Part 4 – Extended Features

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 4a

BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 4b


As you’ve seen BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 gave us the foundation for holding all of our data and then in BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 2 we put our background data handling and rendering classes into place.  Part 3a gave us the beginnings of our pages and actually working with data. Part 3b will finish up those pages and give us a workable solution and allow us to move into Part 4 where we’ll add some more advanced functions into the BSP to give us even more control over the data.

First things first, let’s get our Category and Subject pages into place. These two pages will allow us to edit our category list and subject list.

CAT.HTM

Page Layout</b><br>
<textarea cols=”79″ rows=”10″>
<%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>
<%
  DATA: iterator TYPE REF TO ZCSC_CL_FAQ_CAT_ITERATOR.
  CREATE OBJECT iterator TYPE ZCSC_CL_FAQ_CAT_ITERATOR.
%>
<htmlb:content design=”design2003″ >
  <htmlb:page title=”FAQ, Remember it! ” >
    <htmlb:form id=”frm” >
      <htmlb:group width  = “100%”
                   height = “100%” >
        <htmlb:groupHeader>
          <%@include file=”header.htm” %>
        </htmlb:groupHeader>
        <htmlb:groupBody>
          <htmlb:gridLayout columnSize  = “3”
                            rowSize     = “1”
                            cellPadding = “2”
                            cellSpacing = “2” >
            <htmlb:gridLayoutCell columnIndex         = “1”
                                  rowIndex            = “1”
                                  width               = “30px”
                                  verticalAlignment   = “top”
                                  horizontalAlignment = “center” >
              <htmlb:image id      = “FAQRIT”
                           src     = “@BO@”
                           onClick = “MySDNImage”
                           tooltip = “<%= otr(zcsc_faq/HOME) %>” />
              <htmlb:image id      = “DEL”
                           src     = “@18@”
                           onClick = “MySDNImage”
                           tooltip = “<%= otr(zcsc_faq/DELETE) %>” />
              <htmlb:image id      = “EDIT”
                           src     = “@0Z@”
                           onClick = “MySDNImage”
                           tooltip = “<%= otr(zcsc_faq/CHANGE) %>” />
            </htmlb:gridLayoutCell>
            <htmlb:gridLayoutCell columnIndex = “2”
                                  rowIndex    = “1” >
              <htmlb:tableView id              = “cattable”
                               table           = “<%= cattab %>”
                               iterator        = “<%= iterator %>”
                               footerVisible   = “false”
                               fillUpEmptyRows = “false”
                               headerVisible   = “true”
                               headerText      = “my Categories”
                               design          = “ALTERNATING”
                               sort            = “SERVER”
                               filter          = “server”
                               selectionMode   = “SINGLESELECT”
                               onRowSelection  = “MyCatSelect” />
            </htmlb:gridLayoutCell>
            <htmlb:gridLayoutCell columnIndex       = “3”
                                  rowIndex          = “1”
                                  verticalAlignment = “top” >
              <%
  IF editFlag EQ ‘X’.
              %>
              <htmlb:inputField id      = “id”
                                visible = “false”
                                value   = “<%= witab-ID %>” />
              <htmlb:label for  = “name”
                           text = “Name:” />
              <htmlb:inputField id    = “name”
                                value = “<%= witab-name %>” />
              <br>
              <htmlb:label for  = “src”
                           text = “SAP Image Src (e.g. @17@):” />
              <htmlb:inputField id    = “src”
                                value = “<%= witab-src %>” />
              <br>
              <htmlb:label for  = “desc”
                           text = “Description:” />
              <htmlb:textEdit id       = “desc”
                              text     = “<%= witab-cat_desc %>”
                              wrapping = “SOFT”
                              cols     = “50” />
              <%
  ELSE.
              %>
              <htmlb:inputField id      = “id”
                                visible = “false” />
              <htmlb:label for  = “name”
                           text = “Name:” />
              <htmlb:inputField id=”name” />
              <br>
              <htmlb:label for  = “src”
                           text = “SAP Image Src (e.g. @17@):” />
              <htmlb:inputField id=”src” />
              <br>
              <htmlb:label for  = “desc”
                           text = “Description:” />
              <htmlb:textEdit id       = “desc”
                              wrapping = “SOFT”
                              cols     = “50” />
              <%
  ENDIF.
              %>
              <br>
              <br>
              <htmlb:image id      = “ADD”
                           src     = “@2L@”
                           onClick = “MySDNImage”
                           tooltip = “<%= otr(zcsc_faq/INSERT) %>” />
            </htmlb:gridLayoutCell>
          </htmlb:gridLayout>
        </htmlb:groupBody>
      </htmlb:group>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>
</textarea>
<br>
<b>On Create


  • this handler is called once the page is first created (stateful mode)
  • it performs a once-off data initialization or object creation


CREATE OBJECT obj.


cattab = obj->GET_FAQ_CAT( ).

OnInputProcessing


  • event handler for checking and processing user input and
  • for defining navigation


  • BSP Elements and Events

DATA: tabStrip TYPE REF TO CL_XHTMLB_TABSTRIP.
DATA: table TYPE REF TO CL_HTMLB_TABLEVIEW.
DATA: table_event TYPE REF TO cl_htmlb_event_tableview.
DATA: event TYPE REF TO IF_HTMLB_DATA.


  • Data definitions

DATA: selectedRowIndex TYPE i.


  • Table Types

DATA: wa TYPE ZFAQ_CAT.


  • Get HTML Manager

event = CL_HTMLB_MANAGER=>get_event_ex( request ).


table ?= CL_HTMLB_MANAGER=>GET_DATA( request = request
                                  name    = ‘tableView’
                                  id      = ‘cattable’ ).


IF table IS NOT INITIAL.
  table_event = table->data.
  selectedRowIndex = table_event->SELECTEDROWINDEX.
ENDIF.


  • Check if one of the image buttons was clicked.

IF event IS NOT INITIAL
   AND event->event_name = htmlb_events=>image.


  CASE event->event_id.
    WHEN ‘FAQRIT’.
      navigation->goto_page( ‘faq.htm’ ).
    WHEN ‘DEL’.
      IF selectedRowIndex NE 0.
        READ TABLE cattab INTO witab index selectedRowIndex.
        DELETE FROM ZFAQ_CAT WHERE ID = witab-id.
        selectedRowIndex = 0.
        cattab = obj->GET_FAQ_CAT( ).
        editFlag = ”.
      ENDIF.
    WHEN ‘EDIT’.
      IF selectedRowIndex NE 0.
        READ TABLE cattab INTO witab index selectedRowIndex.
        editFlag = ‘X’.
      ENDIF.
    WHEN ‘ADD’.
      CLEAR wa.


      IF request->GET_FORM_FIELD( name = ‘id’ ) IS NOT INITIAL.
        wa-ID = request->GET_FORM_FIELD( name = ‘id’ ).
        wa-NAME = request->GET_FORM_FIELD( name = ‘name’ ).
        wa-SRC = request->GET_FORM_FIELD( name = ‘src’ ).
        wa-CAT_DESC = request->GET_FORM_FIELD( name = ‘desc’ ).


        UPDATE ZFAQ_CAT FROM wa.
        cattab = obj->GET_FAQ_CAT( ).
      ELSE.
        “* Assign automatic ID for the next DATA entry
        wa-ID = obj->GET_NEXT_DATA_ID( table = ‘ZFAQ_CAT’ ).
        wa-NAME = request->GET_FORM_FIELD( name = ‘name’ ).
        wa-SRC = request->GET_FORM_FIELD( name = ‘src’ ).
        wa-CAT_DESC = request->GET_FORM_FIELD( name = ‘desc’ ).


        INSERT INTO ZFAQ_CAT VALUES wa.
        cattab = obj->GET_FAQ_CAT( ).
      ENDIF.
      editFlag = ”.
  ENDCASE.


ENDIF.

SUBJECT.HTM

Page Layout</b><br>
<textarea cols=”79″ rows=”10″>
<%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>

<%

  • HEre we use Column Definitions and not an Iterator

%>
On Create


  • this handler is called once the page is first created (stateful mode)
  • it performs a once-off data initialization or object creation


CREATE OBJECT obj.


subjecttab = obj->GET_FAQ_SUBJECT( ).

OnInputProcessing


  • event handler for checking and processing user input and
  • for defining navigation


  • BSP Elements and Events

DATA: tabStrip TYPE REF TO CL_XHTMLB_TABSTRIP.
DATA: table TYPE REF TO CL_HTMLB_TABLEVIEW.
DATA: table_event TYPE REF TO cl_htmlb_event_tableview.
DATA: event TYPE REF TO IF_HTMLB_DATA.


  • Data definitions

DATA: selectedRowIndex TYPE i.


  • Table Types

DATA: wa TYPE ZFAQ_SUBJECT.


  • Get HTML Manager

event = CL_HTMLB_MANAGER=>get_event_ex( request ).


table ?= CL_HTMLB_MANAGER=>GET_DATA( request = request
                                  name    = ‘tableView’
                                  id      = ‘subjecttable’ ).


IF table IS NOT INITIAL.
  table_event = table->data.
  selectedRowIndex = table_event->SELECTEDROWINDEX.
ENDIF.


  • Check if one of the image buttons was clicked.

IF event IS NOT INITIAL
   AND event->event_name = htmlb_events=>image.


  CASE event->event_id.
    WHEN ‘FAQRIT’.
      navigation->goto_page( ‘faq.htm’ ).
    WHEN ‘DEL’.
      IF selectedRowIndex NE 0.
        READ TABLE subjecttab INTO witab index selectedRowIndex.
        DELETE FROM ZFAQ_SUBJECT WHERE ID = witab-id.
        selectedRowIndex = 0.
        subjecttab = obj->GET_FAQ_SUBJECT( ).
        editFlag = ”.
      ENDIF.
    WHEN ‘EDIT’.
      IF selectedRowIndex NE 0.
        READ TABLE subjecttab INTO witab index selectedRowIndex.
        editFlag = ‘X’.
      ENDIF.
    WHEN ‘ADD’.
      CLEAR wa.


      IF request->GET_FORM_FIELD( name = ‘id’ ) IS NOT INITIAL.
        wa-ID = request->GET_FORM_FIELD( name = ‘id’ ).
        wa-NAME = request->GET_FORM_FIELD( name = ‘name’ ).
        wa-SUBJECT_DESC = request->GET_FORM_FIELD( name = ‘desc’ ).


        UPDATE ZFAQ_SUBJECT FROM wa.
        subjecttab = obj->GET_FAQ_SUBJECT( ).
      ELSE.
        “* Assign automatic ID for the next DATA entry
        wa-ID = obj->GET_NEXT_DATA_ID( table = ‘ZFAQ_SUBJECT’ ).
        wa-NAME = request->GET_FORM_FIELD( name = ‘name’ ).
        wa-SUBJECT_DESC = request->GET_FORM_FIELD( name = ‘desc’ ).


        INSERT INTO ZFAQ_SUBJECT VALUES wa.
        subjecttab = obj->GET_FAQ_SUBJECT( ).
      ENDIF.
      editFlag = ”.
  ENDCASE.


ENDIF.

As you can see the two pages are basically identical, is this the only way to do it – ABSOLUTLEY NOT! there are plenty of ways to go about this including inline editing of the tableView itself.

One more thing we need to do for each page is assign the Page Attributes. So for the CAT.HTM the page attributes are:

style=”width:300px;border:thin none;background:lightgrey;background-color:lightgrey”>
cattab TYPE ZFAQCATTAB FAQ Category Type

editFlag TYPE CHAR1 Single-character flag

obj TYPE REF TO ZCSC_CL_FAQ Method Object

witab TYPE ZFAQ_CAT FAQ Category List

and for the SUBJECT.HTM the page attributes are:

style=”width:300px;border:thin none;background:lightgrey;background-color:lightgrey”>
editFlag TYPE CHAR1 Single-character flag

obj TYPE REF TO ZCSC_CL_FAQ Method Object

subjecttab TYPE ZFAQSUBJECTTAB FAQ Subject Type

witab TYPE ZFAQ_SUBJECT FAQ Subject List


So those pages are in place and if you did the code changed I posted in the updated in BSP / HowTo: Exploring BSP Development and the MiniWAS 6.20 Part 3a then you can now select these two pages from your faq.htm page and actually use them now.

OK, we’ve got to make some changes and additions to make so let’s get that out of the way first OK. Yep you got it, FAQ.HTM it is.

Our new page attributes

style=”width:300px;border:thin none;background:lightgrey;background-color:lightgrey”>
editFlag TYPE CHAR1 Single-character flag
witab TYPE ZFAQ_DATA FAQ Data Type

As you can see we are building the edit function up here just like we did for the Categories and the Subjects.

Now let’s add this new case statement in our OnInputProcessing

The Case statement name should match the Edit icon image name we have in the Page Layout

So now let’s jump over to our Page Layout</b> and modify our code there. What you want to do is look for the part where we output the visible EQ ‘addfaq’. Then modify that IF statement with this code.OnInputProcessingas we now have to modify how we save the data. just like for Categories and Subjects.


         CLEAR wa.

  • In this case we will gather the values from the different
  • HTMLB form elements. Notice the various ways to do this.

      ddlb ?= CL_HTMLB_MANAGER=>GET_DATA(
                        request = request
                        id = ‘faq_category’
                        name = ‘dropdownListBox’ ).
      myCategory = ddlb->selection.


      rbg ?= CL_HTMLB_MANAGER=>GET_DATA(
                        request = request
                        id = ‘faq_rating’
                        name = ‘radioButtonGroup’ ).
      myRating = rbg->selection->value.


      IF request->GET_FORM_FIELD( name = ‘id’ ) IS NOT INITIAL.
        wa-ID = request->GET_FORM_FIELD( name = ‘id’ ).
        wa-CAT_ID = myCategory.
        wa-SUBJECT = request->GET_FORM_FIELD( name = ‘faq_subject’ ).
        “* Get from radio group
        wa-RATING =  myRating.
        “* Get from form data
        wa-AUTHOR = request->GET_FORM_FIELD( name = ‘faq_author’ ).
        wa-TITLE =  request->GET_FORM_FIELD( name = ‘faq_title’ ).
        wa-URL =  request->GET_FORM_FIELD( name = ‘faq_url’ ).
        wa-SHORT_DESC =  request->GET_FORM_FIELD(
                                  name = ‘faq_short_desc’ ).
        wa-LONG_DESC =  request->GET_FORM_FIELD(
                                    name = ‘faq_long_desc’ ).
        UPDATE ZFAQ_DATA FROM wa.
      ELSE.
        listbox ?= CL_HTMLB_MANAGER=>GET_DATA(
                          request = request
                          id = ‘faq_subject’
                          name = ‘listBox’ ).
        CLEAR mySubjects.
        LOOP AT listbox->selections INTO mySubject.
          tmpSubject = mySubject.
          mySubject = obj->GET_SUBJECT_NAME( id = tmpSubject ).
          CONCATENATE
            mySubject
            mySubjects
          INTO mySubjects SEPARATED BY ‘,’.
        ENDLOOP.


        wa-ID = obj->GET_NEXT_DATA_ID( table = ‘ZFAQ_DATA’ ).
        wa-CDATE =  SY-DATUM.
        “* Get from select list
        wa-CAT_ID = myCategory.
        wa-SUBJECT = mySubjects.
        “* Get from radio group
        wa-RATING =  myRating.
        “* Get from form data
        wa-AUTHOR = request->GET_FORM_FIELD( name = ‘faq_author’ ).
        wa-TITLE =  request->GET_FORM_FIELD( name = ‘faq_title’ ).
        wa-URL =  request->GET_FORM_FIELD( name = ‘faq_url’ ).
        wa-SHORT_DESC =  request->GET_FORM_FIELD(
                                  name = ‘faq_short_desc’ ).
        wa-LONG_DESC =  request->GET_FORM_FIELD(
                                    name = ‘faq_long_desc’ ).
        INSERT INTO ZFAQ_DATA VALUES wa.
      ENDIF.
      faqtab = obj->GET_FAQ_DATA( ).
      editFlag = ”.

That should be our content for the WHEN ‘ADDFAQ’.

Now we’re just about done aren’t we? Is it working for you? Anything happening?

So now that it’s! There it is, working, hopefully! We’ll start preparing for some of the advanced features and then we’ll wrap it all up. I should have Part 4 to you tonight or tomorrow and The Conclusion shortly there after.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Faaiez Sallie
    WHEN ‘EDITFAQ’.
          IF selectedRowIndex NE 0.
            READ TABLE subjecttab INTO witab index selectedRowIndex.
            editFlag = ‘X’.
            visibleForm = ‘addfaq’.
          ENDIF.

    I think the table should be faqtab instead of subjecttab.

    Faaiez

    (0) 
  2. PRAVEEN s
    Hi,

    First of all thank you very much for the detailed blog.
    I am BSP new bie. I almost came to the end of the tutorial but stuck with 1 error on FAQ.htm.

    Error says: SELECTION is not a reference variable.

    Any idea why this is happening.I followed all the steps in Part 3b.

    Your help is appreciated!

    Rgds
    Praveen

    (0) 

Leave a Reply