Skip to Content
Author's profile photo Karol Kalisz

Design Studio 1.5: View on Offline Click-Through

A view on the offline click-through. It gives you a way to take the application offline as ZIP (browser is required to execute). This is a blog of the series “Design Studio 1.5, View on...” – here the function “Offline Click-Through“. For more topics see Design Studio 1.5: What’s New in? A (technical) View.

The starting point.

Design Studio is an online tool, you can report on data which are read from the source system. In previous releases it was possible to export the data content into Excel, but with more complex applications the layout could not be preserved. In release 1.5 it is possible also to make PDF export directly, but also there the navigation is lost.

What is the New Function?

Offline Click-Through functionality is going the first step into offline capabilities and allows you to take the app with you. As design studio is producing HTML in the browser in dynamic way (using SAP UI5 JS library), the produced ZIP is actually containing:

  • the Design Studio environment capable to produce the HTML
  • the required content (files, images)
  • the JS libraries requried by the framework
  • a JSON control-content which defines what should the framework parse and display.

What you can do with the content?

You can download any navigation through the application, download the content and open again in any browser. You can navigate across the recorded steps, navigating back and forth. Any time you can reset also the replay to initial step.

What you canNOT do with the content?

The content is having only data information about the recorded steps, so you cannot:

  • make additional steps which were not in the recording
  • click on some element which was not clicked in the recording
  • add additional filters and other manipulations of data source

How to take your Application Offline?

Now, short step-by-step on how to create such offline ZIP.

1. Start any application you want to use.


2. when you want to start recording, press CTRL+ALT+R

3. nothing will happen, do not worry

4. move mouse down to the bottom border of the screen, you should see a popup like this one


In this popup you can find all available functions.

* reset recording

* pause

* stop (delete)

* download

5. navigate freely in the application and tell the story you want. There are no restrictions in this area.

6. when finished, press the download button, a ZIP will be created.

7. download the ZIP and store somewhere

Opening a Recorded ZIP

Only what you need to do is

* either open the ZIP in Windows and then you can open directly the index.html file

* or unzip in some folder and access the index.html file there


The file will be opened in your default browser.

You need to confirm the popup for active content


and then at the bottom you will see the replay popup


The functions here are:

* reset to start

* one step back

* one step forth

+ number of steps


By this example you can learn how to use the offline click through capability of Design Studio.


If something is missing or unclear, feel free to comment.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo sateesh j
      sateesh j

      Hi Koral,

              Thanks for sharing the Document. Where can record with, in BI Launch pad we can do.

      Author's profile photo Former Member
      Former Member

      Hi Koral, this is quite a nice function with one big flaw.

      We are located in Germany an having such nice letters like "ü, ä, ö or ß" and some others. Many of them are used in standard components. These letters are not recorded correctly.

      Even if i try to avoid the in text components - the localisation uses then in standard components as well.

      See attached screenshot with a dimension filter for details.

      It would be highly appreciated if you can provide a solution for this issue.

      Click-Through localisation.png

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hello Stefan,

      this looks for me like a bug. All letters which are not standard ASCII characters should be escaped in UTF-8 and correctly saved. You may open incident on this topic.


      Author's profile photo Former Member
      Former Member

      Hi Karol,

      First of all thanks for the document it really helps to know more about the capabilities of design studio now I have a question for you:

      One of yours CanNot, make me doubt about what you said this offline capability can do. In the cannot you said "click on some element which was not clicked in the recording", which make me believe that "you can make click in elements you clicked in the recordind". Is this possible? or I am just asking too much and the "only" thing the offline capability does is generate like screenshots but I cannot navigate as if I where using the dashboard.



      Author's profile photo Eric D'ARCO
      Eric D'ARCO

      Hi Karol,

      I have a question regarding the CTRL+ALT+R feature.

      Is there any restriction on the Design studio application design time that limits this really nice feature ?

      When doing it on my application I only have the blue cristal theme without even having the buttons at the bottom to reach next navigation step.

      Moreover, I have tried with another blank application with this theme still and it works properly.

      Therefore, I think it is related to our own application implementation.

      Many thanks for your help.


      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Eric,

      you mean, in one case you cannot see the buttons at all - and in other case (empty app) you can see them?

      can you please add some screenshots how does it look at your side? I have tried in M and COMMONS mode and the buttons are always there.


      Author's profile photo Pavel Ramanouski
      Pavel Ramanouski

      Hi, Karol! I create offline-mode application, save it, unzip and launch index.html. But... I get only blank page, even in IE wich try to run ActiveX content. I use DS 1.6 SP1. May be, you can help me...Thank you very much in advance

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Pavel,

      you should open the dev tools in your browser and see which errors are visible in the console log. btw, have you used SDK components in the app? then according to the documentation, the offline functionality is not supported.


      Author's profile photo Pavel Ramanouski
      Pavel Ramanouski

      Thank you, Karol! With SDK components I even can't save recorded steps. Error was connected with template, without using the template I can open app in offline mode.

      But I have one more question:

      is that possible to run app in offline mode on mobile devices? Our customer want  demonstrate Design Studio for their tops on mobile, but they don't have Design Studio on netweaver or on HANA (only local client). May be, you could advice us the best way for demonstration DS application on mobile devices according mentioned situation?

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author


      there is a flag for it in the client installation.

      see. 38.3 Maintaining Settings in the Design Tool in Local Mode

      from the workflow, you can place the "allow external access" flag, and then the designer is accessible in your network as host. the URL can be generated using the menu in execute button.



      Author's profile photo Pavel Ramanouski
      Pavel Ramanouski

      Thank you very much! šŸ™‚

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      I am trying this offline click through feature on one of our existing Design Studio Dashboard built using DS 1.5, it is taking way longer time to download the zip file (minutes together and thru boe getting a timeout error as well) . its a medium complex dashboard with custom CSS and without any sdk components and using UNX data sources. Any suggestions on reducing this time?



      Author's profile photo Christof Engel
      Christof Engel

      Hi Nithin!

      Could you please have a look at the timing of the HTTP requests either with Chrome Dev Tools or Fiddler. A screenshot of the timings might reveal whether all requests are slow in general or whether there are someĀ bottlenecks. 

      Author's profile photo naveen raju
      naveen raju

      Hi Karol,

      I ran my design studio report in local mode, and ctrl+alt+R to record some sequence of steps(filters applied) and then download. i got the zip file , unzipped it and opened the html file to see only an empty page .i didnt get the visual graphs or layouts that my report contain


      Author's profile photo Christof Engel
      Christof Engel

      This sounds like a Javascript error. Could you please have a look at the Chrome console and check whether the "empty" screen results in a Javascript error. Then please add the details from the console here.

      Author's profile photo Fabian Runge
      Fabian Runge

      Hi Karol,

      does the above mentioned solution still work on Lumira Designer >= 2.1 (with a LUMX document)? I've tried it in two browsers to no avail.