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.

ap1.PNG

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

ap2.PNG

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

ap5.PNG

The file will be opened in your default browser.


You need to confirm the popup for active content

ap3.PNG

and then at the bottom you will see the replay popup

ap4.PNG


The functions here are:

* reset to start

* one step back

* one step forth


+ number of steps


Summary

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


Questions?

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


To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Stefan HĆ¼ttner

    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

    (0) 
    1. Karol Kalisz 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.

      Karol

      (0) 
  2. CarlosE Garcia Camacho

    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.

    Thanks

    CarlosE

    (0) 
  3. 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.

    Eric

    (0) 
    1. Karol Kalisz 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.

      Karol

      (0) 
  4. 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

    (0) 
    1. Karol Kalisz 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.

      Karol

      (0) 
      1. 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?

        (0) 
  5. Nithin Gopalakrishna

    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?

    Thanks,

    Nithin

    (0) 
    1. 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. 

      (0) 
  6. 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

    Thanks
    Naveen

    (0) 
    1. 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.

      (0) 

Leave a Reply