BSP/HowTo: CSS Hints - Custom Design for your BSP Applications

[maximilian_schaufler]

*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

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:

!1x1|width=1|src=1x1!

!1x1|width=1|src=1x1!

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

!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!
!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1! !1x1|width=1|src=1x1!

!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!
!1x1|width=1|src=1x1!	!1x1|width=1|src=1x1!	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). !1x1|width=1|src=1x1! !1x1|width=1|class=urTrcFtBrandPln|src=1x1! !1x1|width=1|src=1x1! !1x1|width=1|src=1x1!

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%2...

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/nw...

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