How to export hidden components in SAP Design Studio

This How to shows how SAP Design Studio components, which are set to Visibility = Hidden, can be exported with our add-on. For performance reasons SAP does not render these components at all into the HTML of the application. As we can only export what is currently contained in the HTML of the application, components set to Visibility = Hidden are not exported at all.

The following instructions show you an alternate way of hiding components, so they can still be shown in the export document.

Example

1. Initial view of the Design Studio application:

2. Result of PDF Export shows all elements:

3. By clicking „Toggle“, „Sample text 2” and “Sample text 3” are hidden:

4. Result of PDF Export still shows all content:

Instructions

1. Example Layout in DesignStudio:

2. Hide via CSS classes:

Our export component delivers two CSS classes: “openbihidden” and “openbivisible”.

These can be used to hide and unhide components of your application as an alternative to setting them to Visibility = hidden. The HTML is still rendered, but hidden from the view via CSS styles.

To hide components use class “openbihidden”:

Visible components (can) use the following class:

3. Script for Toggle-Button onClick:

Now you can also hide and unhide components by setting these classes dynamically:

TEXT_1.setCSSClass("openbivisible"); TEXT_2.setCSSClass("openbihidden"); TEXT_3.setCSSClass("openbihidden");