Skip to Content
Author's profile photo Tammy Powlas

CSS Design Studio Best Practices ASUG Webcast Part 2

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:

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

        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

      Author's profile photo Tammy Powlas
      Tammy Powlas
      Blog Post Author

      Hi Wobi -

      Thank you for reading and commenting.

      I haven't had time to try all of this out for myself (yet).

      Please take a look at Design Studio 1.2/1.3 - New Icons with minimal CSS and no uploading font files! and other content by Mike Howles

      I hope that helps.  Good luck

      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Hi Tammy, all,

      the App mentioned above in Figure 8 is available in SCN now:

      SAPUI5 Icon Explorer for Design Studio

      All the best Dirk

      Author's profile photo Tammy Powlas
      Tammy Powlas
      Blog Post Author

      Awesome, thank you Dirk  - I saw you post that the other day.