Skip to Content

*Updates on this weblog:*

    • Theme Editor information (thx to Sergio)

 

Christmas is over, hope you all had a good time with your families. Did you also get presents? Maybe even the ones you were waiting for? Just as much as you want your gifts to meet your wishes, you might want your BSP application to look a certain way, representing your company’s CI, …

So, after several promises and even more delays I finally got around to save a few quiet minutes, sit down and write some lines to share my hands-on experience about custom designing BSP applications.

This is not going to be a tutorial about CSS itself, or what you can do with it. For basic knowledge about this part of web-design please refer to other resources, such as www.w3schools.com (they have simple explanations and examples along with a nice Try-It-Yourself! feature).</p>


CSS in BSP applications


First let’s have a look how CSS is used in BSP applications, so we know where and how to implement our own style. If you have a look at the HTML source that is created when requesting a BSP application, this is what you get for the head section (ZPL_MVC_VPLANER being the application and FH_THEME1 the MIME folder):

ur_system=


Implementing your own styles


This way you can include your own file after the headIncludes, hence having the highest priority of all included CSS files. (no findAndReplace necessary here g)

For our current application in development I chose the way described as follows:


BSP_UPDATE_MIMEREPOS – the hidden helper


image

As I expected many changed and special design needs I decided to go with the good old “make a copy to modify” way. As you might know there are 5 themes present in your MIME repository (located in the folder /SAP/PUBLIC/BC/UR/Design2002/themes). I chose one of them (sap_chrome) to be the foundation for my own design. But how to copy, study and change this theme in an effective way?

Moving or copying single or multiple MIME elements within the repository is no problem, but doing the same with folders (having subfolders) … if you start to do that manually, you would waste precious time. This is why I started this forum thread a while ago (Easy way to copy MIME folders?), and here is what you need to know:


Finally – your own design


So, after fighting through the basic stuff, all that is left is altering the theme style files the way you want your design to be. Here are some hints on how to accomplish that:

First of all a CSS editor is really comfortable when it comes to edit CSS files, especially when they grow in size (speaking of size, the file ur_ie6.css is almost 200 kb large, with somewhat around 1400 class definitions). TopStyle Pro (http://www.bradsoft.com/topstyle/) is worth checking out.

Once you got a tool, you only need to know where to apply it – this is how I find out what classes to modify:

Call the test application SBSPEXT_HTMLB in your browser, navigate to the example page for the element you want to change, and view the HTML source for the right frame. Let’s use htmlb:Tray for an example here and look at a part of the HTML code:

!1×1|width=1|src=1×1! !1×1|width=1|src=1×1!
Title for #0
  !1×1|width=1|src=1×1! !1×1|width=1|src=1×1!
!1×1|width=1|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1!
!1×1|width=1|src=1×1! !1×1|width=1|src=1×1!
!1×1|width=1|src=1×1! !1×1|width=1|src=1×1!
!1×1|width=1|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1!
!1×1|width=1|src=1×1! !1×1|width=1|src=1×1!

Search for all class-attributes that are used here, and look for them in the CSS file you are editing. With some patience and/or playing around a bit you will (hopefully) be able to make all required changes to the element. Two more hints:

Don’t forget to modify all the different states of an element. For example, the tray can be opened and closed – depending on its state there will be different classes used in the HTML source. Just looking at the CSS file you are likely to miss out one class or another, so always check with some sample HTML code that shows the element in the right state.

Be careful what style attributes you change, they might depend on some other classes to make up the design (like the dateNavigator element, which has right and bottom border definitions for its cells).

!1×1|width=1|src=1×1! !1×1|width=1|class=urTrcFtBrandPln|src=1×1! !1×1|width=1|src=1×1! !1×1|width=1|src=1×1!


image


What happens in case of a SP upgrade?


After we got our design finished, it’s also important to keep in mind that with an SP upgrade of your system the BSP extension elements may change, and with them their style definitions. When moving from SP 42 to 44 there were several new files added to the theme folder, and the CSS files did change quite a lot. But from 44 to 46 there haven’t been any changes in the files I checked (only two added images). I don’t expect any big changes in upcoming 6.20 SPs, at least not for existing elements.

But the design thing is not to forget about when upgrading your system. I always keep a local copy of the basic theme I use, which I compare to the theme after applying new SP. If there are differences in the CSS files that I changed, I go through them one by one, and try to “merge” the new theme CSS file with my own, changed file. Nasty work to do if there are many differences, but as mentioned, move from 44 to 46 didn’t change anything there (for my changed files), so I’m quite positive about the future 🙂


Conclusion


While some of my examples may have helped you to save time, always remember that implementing a custom design is not a job you’re going to be finished with before lunch. If your marketing department is picky about details, designing web applications can become the least enjoyable thing to do. But if you are on your own (or have some very co-operative and understanding colleagues) then maybe you can find a good way to not totally altering the basic theme while still adding your note to it.


Update: Theme Editor


As you can read in the comment, Sergio Ferrari pointed out that there is a Theme Editor included in the EP or ready for download as Eclipse Theme Editor, which can be downloaded from SDN in the “Developer or Administration Tool” area.

He also states that

“+… it’s really a well done tool. I installed it yesterday; it works in Netweaver Developer Studio but I’m not able to get it working in Eclipse.
There is a nice Preview interface and all the classes are grouped by HTMLB:object. Also PHTMLB elements are mapped.
It reads/writes from FileSystem and the directory structure is the same as expected by the SAP Web AS.

The guide is available at:


http://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/documents/a1-8-4/how%20to%20edit%20web%20dynpro%20themes.pdf

Do not forget to download the directory from this link:

http://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/business_packages/a1-8-4/nw04stack09themes.zip

Enjoy …”+

I didn’t test it myself (EP is not used in our company yet), but if I get to work with the Theme Editor one time I will write some more about it (unless someone hasn’t done so already by then).


To report this post you need to login first.

12 Comments

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

        1. Sergio Ferrari
          Good job.
          In the meanwhile the EP – Theme Editor and the standalone Eclipse Theme Editor were been developed.
          It would be nice if you will update this Weblog suggesting to use the new tools.
          Eclipse Theme Editor can be download from SDN in the Developer or Administration Tool area.
          Now, the missing point seems to be related to version management and updated tool:
          how to find difference in the new released themes and how to reapply the custom changes? (where is the old SPAM and SPDD?)
          (0) 
          1. Thanks for the info, Sergio!
            EP is yet to use in our company, maybe I will have the chance to start with it this summer/fall.
            But I will have a look at the Eclipse one, if you already have any experience to share I’d appreciate any info (firstname.lastname@fh-joanneum.at).
            (0) 
            1. Sergio Ferrari
              Hi Maximilian,
                it’s really a well done tool.
                I installed it yesterday; it works in Netweaver Developer Studio but I’m not able to get it working in Eclipse.
                There is a nice Preview interface and all the classes are grouped by HTMLB:object.
                Also PHTMLB elements are mapped.
                It reads/writes from FileSystem and the directory structure is the same as expected by the SAP Web AS.
              The guide is available at:
              https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/documents/a1-8-4/how%20to%20edit%20web%20dynpro%20themes.pdf

              Do not forget to download the directory from this link:
              https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/business_packages/a1-8-4/nw04stack09themes.zip

                Enjoy…

              Sergio

              (0) 
  1. Dagfinn Parnas
    Yet another reason to switch to firefox is the excellent webdeveloper plugin (https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&id=60).
    With this plugin you can actually modify the CSS of a site in your browser, allowing you to debug/develop webapplications much faster. Of course this doesn’t change the code on the web server, but once you have found the correct values it is much easier to update the actual code.
    (0) 
    1. Thanks for that link, Dagfinn!
      Looks like version 1.0+ is default for this page, so this link will take you directly to the plugin in version 1.0 (which is highest supported for the plugin):
      https://addons.update.mozilla.org/extensions/moreinfo.php?id=60&application=firefox&version=1.0&go=Go

      In the user comments on that page you can also find a link to a new version which is available for both Firefox and Mozilla:
      http://www.chrispederick.com/work/firefox/webdeveloper/

      (0) 
  2. Jürgen Bey

    Thanks, Max, for this helpful article.

    In my own applications, I used the following simple technique to overwrite the SAP standard style sheets:

    Create a page fragment mystyle.css in SE80 like this:

    <<br/>/* overwrite Standard class definitions */<br/>.urBdyStd{…}<br/>…<br/><br/>></style><br/><br/>Then include the page fragement into every BSP right after the <htmlb:documentBody> tag:<br/><br/><%@include file=”mystyle.css”%><br/><br/>This will overwrite the SAP standard definitions.<br/><br/>Obviously, the disadvantage of this method is that the code is rendered into every page. Maintenance, however, is central at least for every application.<br/><br/>Have a nice weekened,<br/> Juergen<br/><br/>

    (0) 

Leave a Reply