Roberto Lorenzo, SAP consultant, covered this part of the ASUG webcast. CSS stands for Cascading Style Sheets.
See part 1 here.
Figure 1: Source: SAP
Many people do not look at status bar in lower left corner – important message regarding the CSS style property
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
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
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
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
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
Figure 7: Source: SAP
Save time, you don’t need to copy and paste the old way
CSS file stays organized
Figure 8: Source: SAP
SAP will post this app on SCN; SAP demonstrated this tool and it looks easy to use
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
Figure 10: Source: SAP
Figure 10 shows an example of how this looks
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
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
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 forReporting & Analytics 2014 INTERACTIVEconference - registerhere
Upcoming related ASUG webcasts - you need to be logged on to ASUG.com to register:
- September 30: BI with Lumira Roadmap Update – the Future of BI with BusinessObjects
- October 1: Case Study: ArceloMittal Mines shares Managing a Global, Cloud-based BI on HANA Implementation to Improve Business KPI Performance and Reporting
- October 2: ASUG SAP Lumira Influence Council Launch
- October 8: Delivery Call for SAP Customer Connection Business Objects BI Platform
- October 6: Design Studio Overview - 1.3 with Sneak Preview of 1.4
- October 7: Design Studio Best Practices at Palo Alto Networks