Skip to Content
Author's profile photo Jeroen van der A

Building an annual statement in Design Studio 1.0

Together with Xavier Hacking I am writing a book about Design Studio. For this I wrote a couple of use cases among others an annual statement to be viewed on your ipad. An annual statement is always a big book with lots of text and numbers so I was curious how far you could go in Design Studio and actually build an annual statement like that. The added value for using Design Studio is the ability to invoke interactiveness into the document and the ability to pull data from SAP BW or HANA. Especially when adjustments have to be made it’s nice to just edit the numbers in the source system instead of ordering new prints. The report is shown within the SAP Mobile app on the ipad.


The start screen is a logo with a company name, in this case ‘company’.  On the left there are menu items that help you to navigate directly to the ‘letters to shareholders’, ‘financial highlights’ and finally the consolidated financial statement.

There is a navigation bar on top where you can go the next or previous page in the annual statement. Note that the previous page button is hidden at the moment because we are currently at page one.

In the letters to shareholders typically the CEO would write how the company is doing, why they got the results they present and how they look at the future.


Another typical part of an annual statement is that the most important financial figures are highlighted and shown with a historical perspective. This page give the company an opportunity to highlight the parts of their results that they would think is the most important or would present themselves in the best possible light. Also in this app there is a page for this purpos :


Here you see a graph comparing numbers of this year with 5 years previous. This gives the reader a sence of perspective from a historical standpoint. Below there are a couple of tables comparing the currently closed fiscal year with the previous fiscal year.

Finally after the nice presentations the official numbers have to be presented. In annual statements they often are presented as large tables with a typical lay-out with a lot of subtitles.  On the assets we see subtotals or running totals for inventory, current assets, property plant equipment and finally total assets.


In a 2nd blog I will tell about how I’ve build parts of this annual statement. Mind though that this was built with 1.0. When the 1.1 version is available a lot of things I’ve done in this app will be a lot easier to build.

Assigned Tags

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

      Great work. Can't wait for the 2nd part. What do you think is the biggest challenge so far in creating the annual report via design studio? What do you think is the difference of creating the report using this tool compare with webi ?

      Author's profile photo Jeroen van der A
      Jeroen van der A
      Blog Post Author

      Hi Vin Cent,

      with the 1.0 version the biggest challenge was to build the customized tables with the subheaders as i had to update each individual number with css code. further you have to use consistent naming because as the  number of objects grow it's easy to loose track of all the objects.

      Comparing to webi i think there are similarities but with Design Studio you have more freedom in layout. also there is no microcube in Design Studio. in Webi you can use more ways  to group data as with sections.

      kind regards,