Using Filter by Input String for a Range. Design Studio 1.2/1.3 - SAP Fonts Usage for Icons. Anyone struggling with CSS/Font/Icon/Image issues, please read this additional blog entry - Design Studio 1.3 - Making Adhoc Analysis Template, Images, and CSS Work Original Post: As we can see in the new 1.3 Ad-hoc Analysis Template, there seems to be a push to make things look more and more like Fiori. We see this with the SAP Blue Crystal theme showing up, as well as usage of SAP Icons, and flat, clean design principles.
After looking under the hood at the approaches used in the adhoc template, I observed a few funny things: A heavy reliance on CSS to make the app have the look and feel like a Fiori-esque app.A heavy reliance on absolute positioning and dynamic visibility to simulate contextual pop-overs/menus.Usage of CSS pseudo-elements for iconography (which is where I'm going to explore in this post) I think there's a big divide on the legitimacy of the whole CSS pseudo-element thing. So what exactly is going on in the Ad-hoc template's CSS? (and so on) There, that looks better... How to show status icons for BEx Exceptions in. I started this journey here How to Find and Change the CSS Class - Design Studio It is easier to do this using the conditional formatting from Analysis Office (seeChecking out Features from Analysis Office to Design Studio ) but maybe you want to read the exceptions from the BEx Query.
Some of this is described in the Design Studio Learning Hub material, but I struggled with it. Finally I got it working today. Step 1: Set up Exceptions in the BEx Query: Step 2: In Design Studio, set up the custom.css for the Crosstab property as follows: Code is also shown here for readability: .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlternating{ background-color:#FFFFFF ! .sapzencrosstab-DataCellDefault{ background-color:#F9F9F9 ! .sapzencrosstab-DataCellAlert1Background, .sapzencrosstab-HeaderCellAlert1Background color:rgba(0,0,0,0.0); background-image: url('/aad/resources/~1399838692937~/sap/zen/crosstab/themes/sap_platinum/img/exceptions/trend_asc_9.gif') ! Background-repeat:no-repeat ! Related: Using Filter by Input String for a Range. Design Studio Best Practices ASUG Webcast ̵... SAP's Jie Deng covered this part of the webcast. See Design Studio Best Practices Scripting - ASUG Webcast Part 4 Design Studio Best Practices Design Experience - ASUG Webcast Part 3 CSS Design Studio Best Practices ASUG Webcast Part 2 andDesign Studio Best Practices Webcast – Platform Specifics– ASUG Webcast, Part 1 Note the usual legal disclaimer applies that things in the future are subject to change.
Figure 1: Source: SAP Figure 1 shows that you need to set data source as input-ready You do not lock other user to read the data You set the planning connection systems to change the data sources Figure 2: Source: SAP Crosstab, click on rows, and click into other app, and Design Studio keeps row focus Note the last bullet in Figure 2 regarding the ability to scroll dimensions Workarounds Figure 3: Source: SAP Figure 3 recommends this blog by Dirk Mayrock Internationalize DesignStudio Applications by reusing RSBEXTEXTS table from BEx WAD Figure 4: Source: SAP Video by Dirk: Figure 5: Source: SAP Other:
Working with BEx conditions in SAP BusinessObje... | SCN. When there is a need to implement conditions or set filters on key figures in SAP BusinessObjects Design Studio dashboards, it becomes a challenge to achieve this directly in the application. To implement this functionality in our SAP BusinessObjects Design Studio dashboards, we require the help of SAP Business Explorer (BEx). Setting filters on Key Figures can be achieved by defining Conditions in SAP Business Explorer (BEx). This blog post gives an insight into manipulation of SAP Business Explorer (BEx) conditions in SAP BusinessObjects Design studio. Two types of conditions in SAP Business Explorer (BEx) are:- i) Conditions with variables ii) Conditions with constant values Conditions with variable In this case, the condition works on the input value of the variable.
To toggle the state of a condition, we can pass null value to its variable. //To set the value of the condition variable in BEx with nullAPPLICATION.setVariableValueExt(variablename,” ”); Conditions without variable E.g. Design Studio CSS Investigations Vol 1. I've had the opportunity recently to work quite a lot with Design Studio, specifically during the development of course material for BI Clients and Applications on SAP HANA at openSAP.
In the exercise for Week 3 Unit 3, we use CSS to format a crosstab and dimension filter in Design Studio 1.3. The outcome looks like this: When I wrote the exercise, I pretty much just fumbled around blindly using this handy document as a reference: Design Studio 1.1 Full List of CSS classes (?) I came out with the following CSS, which, for the dimension filter at least, is pretty clunky: At the root of my efforts with the dimension filter, was the borderline OCD obsession with aligning the vertical space required by the dropdown boxes and the dimension filter. Perhaps a small part of me hoped that this would get picked up and fixed in DS 1.4, but since it didn't, I've now convinced myself that this was a decision made in order to optimize the dropdown button for touch events, on mobile devices.
Not quite. List of CSS for SAP Design studio. Design Studio 1.5: View on Context Menu Paramet... | SCN. Here you can learn about some new functions for the context menu. This is a blog of the series "Design Studio 1.5, View on... " - here the function "Context Menu Parameterization". For more topics see Design Studio 1.5: What's New in? A (technical) View. The Starting point. Design Studio 1.4 has introduced context menu on crosstab and filter / navigation panel components. Using the context menu some functions were accessible to the end user during run-time (w/o special code from the application developer). The component context menu is located in the area of technical components. Pic 1. What is New? In the release 1.5 there are some extensions in the context menu: it is possible to insert additional menu optionsnew entries for "back" functions are availableyou can hide some options (via CSS)you can also ask for context when clicked How to Insert New context menu options.
Going to the Context Menu component, after selection you can check the properties. Pic 2. New Entries. Pic 3. Pic 4.