Skip to Content

Roberto Lorenzo, SAP consultant, covered this part of the ASUG webcast.  CSS stands for Cascading Style Sheets.

See part 1 here.

/wp-content/uploads/2014/09/1csstyling_552685.png

Figure 1: Source: SAP

Many people do not look at status bar in lower left corner – important message regarding the CSS style property

/wp-content/uploads/2014/09/2cssyling_552698.png

Figure 2: Source: SAP

Figure 2 shows that you make adjustments to text, center, italic, bold

You can copy code between the records, paste into CSS style property, and see effects design time of styling

/wp-content/uploads/2014/09/3cssf12_552699.png

Figure 3: Source: SAP

When overwrite CSS classes or want to know CSS clients – use Google Chrome to identify CSS classes

Use F12 in Google Chrome

Click component, right click, choose component, and developer tool will show properties

/wp-content/uploads/2014/09/4cssclear2_552700.png

Figure 4: Source: SAP

Figure 4 shows different reasons why not run as expected.  First you could be accessing cache data – ensure you clear the cache by pressing CTRL SHIFT DEL

Use !important for your defined CSS classes

You can also use the refresh option in Design Studio client – reload app, ctrl right mouse refresh

/wp-content/uploads/2014/09/5css_552701.png

Figure 5: Source: SAP

Components some include CSS classes and some include pictures – in this case the tab strip

Use Google Chrome developer tool to find the pictures

Download the picture, change the color, and adjust the color

/wp-content/uploads/2014/09/6sapicons_552702.png

Figure 6: Source: SAP

SAP icons that are delivered with standard templates 1.3

CSS file contains CSS classes to display SAP icons

Example in Figure 6 is the bookmark icon

Choose your desired icon, choose ID, go to custom CSS class, copy an existing one, make adjustments

Need to define CSS classes to display more icons

/wp-content/uploads/2014/09/7csstylingsapiconsteps2_552707.png

Figure 7: Source: SAP

Save time, you don’t need to copy and paste the old way

CSS file stays organized

/wp-content/uploads/2014/09/8sapicons_552708.png

Figure 8: Source: SAP

SAP will post this app on SCN; SAP demonstrated this tool and it looks easy to use

/wp-content/uploads/2014/09/9cssstyling_552709.png

Figure 9: Source: SAP

Figure 9 shows you can encode images and forms with base64 encoder

The advantage is that you do not need to install local images and forms on BIP or NetWeaver

Listed links are shown in Figure 9 to encode files

/wp-content/uploads/2014/09/10cssbase64_552710.png

Figure 10: Source: SAP

Figure 10 shows an example of how this looks

/wp-content/uploads/2014/09/11exceptionhigh_552711.png

Figure 11: Source: SAP

Figure 11 covers exception highlighting which is an option on crosstab to set conditional formatting to true

You can display some exception icons using CSS styling properties

/wp-content/uploads/2014/09/12localhighl_552712.png

Figure 12: Source: SAP

Figure 12 shows you can create CSS file and CSS class; it has 9 exception levels.   You can assigned to a background color or icon

/wp-content/uploads/2014/09/13nwhigh_552713.png

Figure 13: Source: SAP

The URL for NetWeaver for exception icons is different (see Figure 13)

More to come.

Related:

Stay Ahead : Attend TechEd && d-code – Win Big SAP BI BusinessObjects HANA Hands-on Sessions

Join SAP at the end of October for Reporting & Analytics 2014 INTERACTIVE conference – register here

Upcoming related ASUG webcasts – you need to be logged on to ASUG.com to register:

To report this post you need to login first.

4 Comments

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

  1. Wolfgang Bidner

      Dear Tammy, thank you very
    much for your work to spread all this news 😉

    Do you know where to find
    this CSS- Styling document/app with the CSS styling icons.?

    I could not find it at the moment at SDN.

    And btw I find this
    “so easy workaround” not so well easy – in fact it’s quite daring to
    sell a tool needing such workarounds for proper outlook – but this is strictly confident
    and kept between us – right 😉 – (yeah I am cynical here)

    cheers Wobi

    (0) 

Leave a Reply