Best Practices (1/6): General Application Design

SAP Design Studio offers a lot of flexibility to create analysis applications. At the same time, scenarios to export such an application can be plenty and very complex.
This is why our Export documentation is quite extensive.
This series of Best Practices Blog Posts shall give you several hints how to design you Design Studio application in order to enable export in the best and most efficient way to PowerPoint, Word, PDF and Excel. We describe the export of the current view (referred to as “Online Export”), as well as the automatic export of different views of the application (referred to as “Booklet Export”).

We start today with general export concepts that you should keep in mind when designing an application.
Stay tuned for future posts that give special advice for each of the export formats PowerPoint, Word, PDF and Excel. We will finish the series with a “Tips & Tricks” section, which informs you about the most important configuration parameters and how to perform updates.

Component Visibility

When you use the Visibility property or the setVisibility method to hide components, they disappear completely from the application: They are not only hidden but not rendered at all. This means that they cannot be shown in the Export document.
If you want to export these hidden components, we recommend to use the CSS class „openbihidden“ instead of the Visibility property. This way the component is still rendered but its visibility is set to false.
You can set the CSS class of a component via the following scripts (XXX stands for the name of the component):
XXX.setCSSClass("openbihidden");

And to show the component again:
XXX.setCSSClass("");

The components can still be shown in the Export document, as the export process automatically eliminates the openbihidden class
Of course you can also combine the openbihidden class with any other custom CSS class that you already set for the component. Simply separate the classes with a space (e.g. “openbihidden myClass”).
If you use tab strips or page books and you want to export hidden pages, you have to use the “Booklet Export”. See section 5 of the User Manual for details on how to implement this scenario. 

General application layout

Following the templates provided by SAP, we recommend to define Export applications as follows:

1. Panels to group application components:
   The use of panels simplifies the selection of a group of components for the export document. The individual positions do not have to be defined again!
   1. Create one panel, which shall include the content of the analysis application (e.g.. PANEL_BODY or PANEL_CONENT). If the application contains multiple views – either toggled via visibility, page books or tab strips, each view should be contained in its own PANEL_CONTENT_xxx.
   2. Create a second panel PANEL_HEADER to show header information such as title, logo, user information, filters etc. (see points 2 and 3 of this list). The panel defines the positioning of the header elements and can be reused in the export document.
      Navigation elements such as dropdown boxes, links, icons or buttons, which are usually displayed as part of the header on the frontend but shall not be exported, shall NOT be included in this panel.
   3. Optionally create a panel PANEL_FOOTER for information that shall be displayed in the footer of the online application and in the footer of the Export document.
   4. When exporting with a master template (see «Export to …» sections), you select the components for the Export document via the Visible Components property. In this case, group components, which shall be explicitly excluded from the export, in one panel PANEL_EXPORT_EXCLUDE_xxx. This simplifies the deletion of components from the Export document via the Visible Components parameter.
2. Add two text fields to show filters in the export:
   1. FILTER_INFO:
      Reference this component in the master templates for Online Exports by writing %FILTER_INFO%:VALUE. They can be used to display current filters of the application.
      If you want to use the WYSIWYG PDF export (see «Export to PDF» section), make sure the text field is included and correctly positioned in the PANEL_HEADER panel (see point 1 of this list).
   2. FILTER_INFO_xxx:
      Reference this component in the master templates for Booklet Exports by writing %FILTER_INFO_xxx%:VALUE. xxx shall be replaced by the application name. This way you can display specific filters of all applications in the export document.
   Fill these text fields via scripts with the filters that are currently applied to the application. Hide them via CSS class “openbihidden” (see «Component Visibility») so they are only visible in the Export document.
3. Additional (optional) components in the PANEL_HEADER panel:
   1. TEXT_TITLE:
      The title of the application.
      Can be referenced in Export templates by writing %TEXT_TITLE%:VALUE.
   2. TEXT_USER:
      User information.
      Can be referenced in Export templates by writing %TEXT_USER%:VALUE.

Applications with „auto“ width

If you are using dynamic layouts with “auto” widths, make sure ALL components of the dashboard are scaled with “auto”. Check the resulting layout by reducing the browser window size – no scrollbars should appear at any time.

Reason:

The export analyses the HTML to find the largest elements. If some elements have an absolute width, they define the width of the document. Other auto scaled elements can be scaled to small in consequence.

Exporting big tables

For performance reasons, SAP Design Studio only renders a few visible rows. If you want to export the full Crosstab without scrollbars, you have to use an Export template and ….

1. … if less than 10000 rows are contained: Change the CROSSTAB setting to 9999 rows:
2. … use the „openbi Export Table” component:
   The openbi Export Table must be connected to a CROSSTAB and must reference the same data source. Visibility properties for the Export Table are defined independently from the CROSSTAB parameters:
   • If the CROSSTAB displays „conitional formatting“, this property must be explicitly activated also for the Export Table
   • „Display repeated texts“, display of units and scaling etc. can be set differently for the application (via the CROSSTAB settings) and for the export document (via the Export Table settings).

If you use multiple languages

The language for time and date placeholders oft he Export document, as well as regional settings for the Excel Export are derived from the browser language by default. You can overwrite this via the Export Language property.
If you need multi language support for Export templates, you can create individual templates for each language, upload them to the server and toggle between them via scripting:
 OPENBI_EXPORT.setPptTemplate(“myTemplate_EN.pptx”);

If you use doBackgroundProcessing

If data sources are loaded via the doBackgroundProcessing script of the Design Studio application and you set up the Booklet Export, you must add additional scripts (marked in bold). Otherwise the export may process the result of the BO platform to early and the Export document may not show all contents of the analysis application.

1. onStartup:
   EXPORT_DUMMY.showLoadingState();
APPLICATION.doBackgroundProcessing();
2. onBackgroundProcessing:
   DS_1.loadDataSource();
EXPORT_DUMMY.hideLoadingState();

Instead of EXPORT_DUMMY you may use any component oft he application that is set to Visiblity true. If you do not want this component to be shown to the end user, use CSS class „openbihidden“ (see «Component Visibility»).. These scripts tell the export service to wait with the generation oft he Export document until the «Loading State» of the referenced component is hidden.