*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): 
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): 
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* 
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* 
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* 
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* 
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* 
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): 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* 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* 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* 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* 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*
21 Comments