Skip to Content
*Introduction*  We were now well on our way. We had several BSP applications in Production. We were beginning to feel like we actually knew what we were doing. Therefore we decided that it was time for a little self-promoting. We had talked about creating a website for our ABAP development team for quite some time but had never gotten around to it. It seemed only appropriate that our home page be developed in BSP.     In addition to a site that stored our documentation and was useful to the implementation team, we wanted something that we could use to show off what we could do. We wanted something that would convince our group’s internal customers that their next website just had to be developed in BSP. What we ended up with looks like the following (Please note that the image was considerable reduced in quality to fit into this weblog): image  We tried to include any of BSP Extensions that we though would catch the user’s eye. We used trees, tables, collapsible areas, tab strips, etc.     *BSP Extension Details*  Before I jump in and staring showing the insides of this website I wanted to talk about a few of the things we learned about the BSP Extension Libraries.   1. New functionality is delivered with new support packages. Those of us use to ABAP might be a little surprised by this. We are used to having to wait until major releases to any new functionality. However we have seen significant enhancements to the BSP Extensions over the support package life cycle on release 620. We started out at about Support Package 7 and are now at 35.  2. With new functionality come new bugs and incompatible changes. I do have to say that this was much more a problem in the early support packages. The last two support package applications we have done we did complete regression testing and didn’t have any broken applications. However earlier in our implementation we weren’t quite as lucky.   3. SAP has delivered whole new BSP Extension libraries. I can’t believer the number of developers that I have spoken with that don’t even know the other libraries exist. If you are only using HTMLB you are missing out on the great new functionality in XHMTLB and PHTMLB. Do have a look at OSS note 598860 to see requirements for each Extension library however. Whereas HTMLB is supported with in Classic, Design2002, and Design2003; XHMTLB only support Design2002 and Design2003. Furthermore PHTML only supports Design2003.  3. There are different Designs that can be set using the CONTENT HTMLB tag. These Designs have more than just an impact on how our webpage looks. They also affect compatibility and performance. We saw nice performance increases on web sites once we converted from Design2002 to Design2003. The following are the browser requirements for each Design:  Classic: IE>=5.01 and Netscape>=6.20  Design2002: IE>=5.50 and Netscape>=6.20  Design2003: IE>=5.50 and Netscape>=7.00  Also if you use SAP’s Enterprise Portal with your BSP applications, you will want to be aware of the relationship between design and EP release. Have a look at OSS Note 597914 for the details, but basically EP5 supports Design2002 and EP6 supports Design2003 or Design2002.    *Header Design*  As we were building our ABAP home page, we were also beginning to develop a style for our websites. This revolved heavily around the use of the BSP Extensions, but also came from the use of one common page header for all applications. We wanted this header to provide lots of useful functions, but also a unifying factor amongst our applications. Since we weren’t yet implementing SAP’s Enterprise Portal, this page header became a poor-man’s portal of sorts.     After studying some of SAP’s sample applications we decided that we liked something similar to the page headers they were using in the SBSP* examples. We decided to borrow their design for our starting point (after all a good programmer never starts from scratch :). The following is what our finished product ended up looking like (compressed in width to fit into the weblog): image   Well we didn’t want to include the coding for this page header directly into each application. This seemed the perfect opportunity for our first customer bsp extension. We started by reading some of the on-line help. Next we looked at some of the many extensions provided by SAP. Thank goodness SAP delivers the ABAP source code to the customer. I’m not sure we would have had much success without these examples to start from. We looked at some of the smaller, simpler HTMLB extension such as the LABEL or in the INPUT FIELD.     As it turns out the process of creating the custom extension was surprisingly easy. I would suggest that you start by building your extension as a regular BSP page. From there you can translate the implementation of this page into the BSP Extension Class. The only tricky part might be not having something similar to the VIEW to enter any BSP Elements you are going to use in your Extension. Once again I was surprised at how easy this was. From ABAP you can work with any of the SAP BSP Element’s directly via their classes. The best way to explain this is just to look at some sample code.       data: label type ref to cl_htmlb_label.  label ?= cl_htmlb_label=>factory( for = ‘Spras’  text = lang_desc ).    These two simple lines of code are all you need to create a label. Now we will send this label to the HTML Writer.    while m_page_context->element_process( element = label ) = co_element_continue.  endwhile.    Here is also a little more complex example. This is drop down list box. It shows you how to pass a pointer to a table into the BSP Element.     data: drop_down type ref to cl_htmlb_dropdownlistbox.  data: selection type string.  move sy-langu to selection.  drop_down ?= cl_htmlb_dropdownlistbox=>factory(  id = ‘Spras’  selection = selection  onselect = ‘HandleLangSubmit’  onclientselect = clientclick  nameofkeycolumn = ‘key’  nameofvaluecolumn = ‘value’ ).   get reference of languages into drop_down->table.  while m_page_context->element_process( element = drop_down ) = co_element_continue.  endwhile.      *Language* image Let’s look at the functions of our Extension one at a time. First up is the language selection. We operate in a multi-language environment at our company. Although BSP can pickup the language from our browser settings or via the URL, we wanted an easier way to switch languages on the fly – especially when testing applications. In this drop down we also only wanted to list the languages actually installed in our system. The following is the code we used to grab the installed languages:    select t002t~sprsl t002t~sptxt        into     (ls_t002t-sprsl, ls_t002t-sptxt)        from     t002t        join     t002c        on       t002t~sprsl = t002c~spras        where    t002t~spras = sy-langu        and      t002c~lainst = ‘X’        order by t002t~sptxt.     clear wa_line.     move ls_t002t-sprsl to wa_line-key.     move ls_t002t-sptxt to wa_line-value.     append wa_line to languages.   endselect.   If the user chooses a new language we activate the change by reloaded the page and adding the sap-language URL parameter.   if htmlb_event->server_event eq ‘HandleLangSubmit’.  concatenate url  ‘?sap-language=’  s_spras  into url.   navigation->exit( url ).  endif.      *Themes* image Next up is the Theme. Starting with Design2003, SAP offers several visual themes. If you are running in the Enterprise Portal, these themes will be inherited from the portal user settings. However we wanted the user to be able to set their own themes. We also wanted this setting to carry over from one BSP application to another. We simply record the current theme into a customer table by user and reload the setting with each application load. You can use the runtime object to read or set the BSP theme from ABAP:    *Set the Theme mc_runtime->set_external_theme_root( selection ).  *Read the Theme  selection = mc_runtime->get_external_theme_root( ).      *With Accessibility*  Next up we have a simple little check box that allows you to turn on Visual Accessibility. We don’t have a business requirement for this right now so it is mostly in there for testing purposes. Once again you can use the runtime object to query for this flag.    s_accessibility = mc_runtime->with_accessibility( ).      *User Settings* image If you remember, we are running on a stand-alone WebAS. Therefore when a user changes their personalization options in R/3 those changes are not made in the WebAS. When we first went live we had user’s who couldn’t understand why their date or number format wasn’t correct on the web page output. We added this link to launch SU3 via the ITS WebGui for the WebAS. This way the users can change their settings without needing any SAPGui access to the stand-alone WebAS.    *System Information* image Next we wanted an area that shows system information in a popup when you click on the displayed system id. This area is similar to the popup in the bottom right hand corner of your SAPGui. However we set this up to not necessarily show the system information of the WebAS. If the application uses a remote R/3 system, this was the information we wanted to show here. This information has proven to be very valuable in troubleshooting user problems, especially security issues.    *System Messages* image
To report this post you need to login first.

21 Comments

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

  1. Brian McKellar
    Excellent! It is refreshing to see what one can do with these libraries. Not that we did not know (suspect) it, but to see that other people actually profited from this! It feels like yesterday when we build that ELEMENT_PROCESS hack! I enjoyed the reading.
    Bye, brian

    (0) 
  2. Brian McKellar
    Excellent! It is refreshing to see what one can do with these libraries. Not that we did not know (suspect) it, but to see that other people actually profited from this! It feels like yesterday when we build that ELEMENT_PROCESS hack! I enjoyed the reading.
    Bye, brian

    (0) 
  3. Brian McKellar
    Excellent! It is refreshing to see what one can do with these libraries. Not that we did not know (suspect) it, but to see that other people actually profited from this! It feels like yesterday when we build that ELEMENT_PROCESS hack! I enjoyed the reading.
    Bye, brian

    (0) 
  4. John Patterson
    Hi Thomas,
    Good to see a developer finding the potential with abap, after spending a couple of months developing in Java WD, I had to revisit a development i had previously done in BSP. All the problems i had to find workarounds for in WD can be done using BSP. Simple things like changing the style of a particular cell in a table control, cannot be done in WD, couldnt be easier in BSP using the iterator and bee.

    Abstraction is good – source code is better

    (0) 
  5. John Patterson
    Hi Thomas,
    Good to see a developer finding the potential with abap, after spending a couple of months developing in Java WD, I had to revisit a development i had previously done in BSP. All the problems i had to find workarounds for in WD can be done using BSP. Simple things like changing the style of a particular cell in a table control, cannot be done in WD, couldnt be easier in BSP using the iterator and bee.

    Abstraction is good – source code is better

    (0) 
  6. John Patterson
    Hi Thomas,
    Good to see a developer finding the potential with abap, after spending a couple of months developing in Java WD, I had to revisit a development i had previously done in BSP. All the problems i had to find workarounds for in WD can be done using BSP. Simple things like changing the style of a particular cell in a table control, cannot be done in WD, couldnt be easier in BSP using the iterator and bee.

    Abstraction is good – source code is better

    (0) 
  7. Ricardo Soares
    Hi,

    I’d like to know what is the best aproach to implement Themes in a BSP application.
    It is possible to use the styleeditor from portals to BSP?

    Best Regards,
    Ricardo Soares

    (0) 
    1. Thomas Jung
      I assume you are wanting to create your own themes.  Personally I have never done this.  However this has been discussed on the BSP forum.  I know that several people are using the Portal Style Editor to create their themes.  There have been some instructions and samples in the forum.  I don’t have access to an EP system so I am waiting for the stand-alone style editor that Brian McKellar said was on the way.
      (0) 
  8. Ricardo Soares
    Hi,

    I’d like to know what is the best aproach to implement Themes in a BSP application.
    It is possible to use the styleeditor from portals to BSP?

    Best Regards,
    Ricardo Soares

    (0) 
    1. Thomas Jung
      I assume you are wanting to create your own themes.  Personally I have never done this.  However this has been discussed on the BSP forum.  I know that several people are using the Portal Style Editor to create their themes.  There have been some instructions and samples in the forum.  I don’t have access to an EP system so I am waiting for the stand-alone style editor that Brian McKellar said was on the way.
      (0) 
  9. Ricardo Soares
    Hi,

    I’d like to know what is the best aproach to implement Themes in a BSP application.
    It is possible to use the styleeditor from portals to BSP?

    Best Regards,
    Ricardo Soares

    (0) 
    1. Thomas Jung
      I assume you are wanting to create your own themes.  Personally I have never done this.  However this has been discussed on the BSP forum.  I know that several people are using the Portal Style Editor to create their themes.  There have been some instructions and samples in the forum.  I don’t have access to an EP system so I am waiting for the stand-alone style editor that Brian McKellar said was on the way.
      (0) 
  10. Lewis Moore

    Hello Thomas,

    Could not find the exact blog but I am using you input help functionality in a BSP, has worked great for us, one question though, in ZINPUTHELP you specify the position and such in the frame render for the popup. To date it was worked fine as you sample was coded,

     

    STYLE=”DISPLAY:none; width:420px;height:400px;position:absolute;top:20;left:22;z-index=10;borderStyle=’groove'”

    We now need to add a search help to input fields that are several pages down in the HTML page, however the popup loads off the screen, so you have to scroll back up to see it, not the ideal user experience nor design but its what the business requires. My question is, do you know of away to determine the location of the input field dynamically so I can pass the position to the render, so the popup will be near the input field opposed to the top of the screen? I poked around but BSP help is sparse these days 🙂

    Kind regards,
    Lewis

    (0) 
    1. Thomas Jung Post author

      I actually stopped using that particular dialog window script technique back in 2006.  I switched to a modified version of the dialog window used in Web Dynpro ABAP as it had a consistent look and feel as well as performed much better.  I shipped that version of the value help dialog with the SAP Press book Advanced BSP Programming.  Like WDA, it automatically centers the value help window in the visible browser window. It looks like the following:

      http://www.flickr.com/photos/tjung/7177192481/in/photostream

      (0) 
      1. Lewis Moore

        Good to know, unfortunately we are still on ECC 5.0 so I do not have the ability to use web dynpro for abap, I changed the position to relative in the URL generation and it works ok, wish I had tighter control on placement but will suffice until we upgrade. Thanks for the reply

        (0) 
        1. Thomas Jung Post author

          I wasn’t suggeting that you use Web Dynpro ABAP at all.  What I did back in 2006 was get early access to some of the WDA JavaScript libraries.  I then adapted them to run within BSP with no dependencies to the WDA framework.  I adapted the WDA dialog window into BSP and used it in the last version of the Value Help BSP Extension.  All of this was shipped in the source code that came with the SAP Press book I mentioned. This functional still works all the way back on WebAS 6.20.

          (0) 
          1. Lewis Moore

            Sorry for the misunderstanding, I actually looked for that book awhile back but had no luck finding a copy, do you know where I may be able to find since its out of press?

            (0) 
            1. Thomas Jung Post author

              I’m not sure if SAP Press is still selling it or not.  You would have to contact them as I don’t have any control over that. If they confirm it is out of print, I can then at least send you a copy of the source code we released with the book. My email address is in my SCN Profile – hint: first name dot last name at sap.com

              (0) 

Leave a Reply