Skip to Content
Author's profile photo Karol Kalisz

Community SDK: First Functional Application with SDK Components (Online Composition)

Update

See the Version 2 Blog!

Community SDK: Second Functional Application with SDK Components (Online Composition v.2)

As part of testing our community SDK components I have started creation of an application which binds the standard functionality and our community extensions.

This is IT – full composition application, where you can create bookmarks and change all possible visualization properties…

17-12-2014 21-25-57.jpg

I have invested few evenings to get this done, I hope you like it and already have ideas how we can place more functions and improve existing. Btw. the user experience and styling is created by me – and we can improve / change it together. I just had not enough evenings to make more…

What is In?

First, the general introduction – the fragments in design studio (described already in Design Studio 1.4: Online Composition Scenario (basics) and Design Studio 1.4: Portable Fragment Bookmarks & Reuse in Applications) are providing quite flexible possibilities for online editing, composition and sharing of created objects. This functionality is used to build this application – and for those who worked already in Lumira Desktop, the content should not be surprising as the building concept is not invited by myself.

Shortly, this is a combination of “Ad-Hoc” & “Online Composition”. You can also use it as Ad-Hoc Application (when you delete the Compose and Share areas)

The Workflow in few Words…

You can directly start the application in local mode with URL parameter XSYSTEM=<ID from SAP GUI>.

Then, automatically open-search dialog will be shown. here you can search for queries (common method is available in DS 1.4). Having one, you either will be lead to variable screen or can directly start in Define area. Here you can try out all possibilities you can find in any UIs (I hope all work, I tried to test them all). The fragments are saved automatically after every almost every change. Having saved some fragments (the big + button is allowing to create new) you can jump into Compose area. In Compose you can drag/drop some fragments together and save as composition with given name and description. The in Share area you can continue and jump into the composed fragment in full screen.

Sometimes you find buttons w/o functions yet – eg the buttons in fragments on left and right side.. I have some ideas for them, but I need to code some additional SDKs to make the real.

Main Logical Areas

From logical point, the application is divided into 3 areas, you can find the navigation block on the top.

  • Define – here the majority of the time can be spend. You can change the drilldown, filters, many other properties
  • Compose – pre-build fragments can be put together into a composition. Sorry, as of today only one page is possible, but I will try extend it in January to more pages
  • Share – here very simple UI to create an URL for sharing the content (creating direct access URL, need to check if multi-user share is working such way)

Define

The main block in define area is the content, here you can see the components which are used for visualization. Those can be all possible charts (some require special constellations of data sources) or crosstab or Mike’s Table 2D.

On the left side, you can find

  • navigation block for drilldown changes and filtering
  • fragment type selector – chart types ot tables

On the right side, you can find

  • Data Source Properties, so everything which is in scripting language and based on data source
  • Dimension Properties, all changes on concrete dimensions
  • Measure Properties, all changes on concrete measure
  • Fragment Properties, something on the fragment level (eg. title)
  • Filters & Formats, meaning FilterByMeasures and ConditionalFormats (or.. BEx Conditions and Exceptions) which can be activated and deactivated based on the query definition

Today I will not describe all possibilities here in detail, please try this out – but all are based on common accessible scripting methods, so take this also as opportunity to copy out what you would like and integrate into own applications.

Compose

This part is a bit simpler, mainly on Left Side you see again a fragment gallery which can be used for the drag action into the area on the Right Side (Split Cell Container). by this you can build smaller dashboards.

Share

Share is currently quite simple, as I could not find a good control for the visualization – so it is a simple radio button group. When selecting a composition, you can see brand new Mike’s QRCode generator. Also, the menu on the right side will allow you to create the URL which will directly link to this composition (and is behind the QRCode.

Used Components form SDK Community

As the main topic was to test the components, I cannot forget this point… As of now, I have following components included:

  • Basics
    • Action Sheet Button
    • Application Header
    • Fiori Button
    • Notification Bar
    • QR Code
    • Toggle Button
    • Tree
    • Vali Input
  • Data Bound
    • Multi Level Drop Down
    • Table 2D
  • Utils
    • Collection

How To Get The Content?

You need 2 parts:

Important Settings… as there is no generic method for getting list of available systems.

  • you have to go into the global script: SCRIPT_STARTUP->setSystemId().
  • 17-12-2014 22-35-52.jpg
  • there, you have to place your system ID in order to use the app. Details inside.

Other Functions

You can find also “Undo” button which is reverting back the last action (whatever it was). 10 undos are possible.

If you have simension with active a´hierarchy in rows, you can also try out the brand new Franck’s Multlevel Dropdown, accessible via the extra button in header area – i called it “hierarchical filter”.

17-12-2014 21-52-08.jpg

Some Impressions

Open-Search Dialog

As there is only a “search method” for data sources, this dialog is basically executing search against the given system and placing the results into a tree. When commiting with OK, the list will be saved as bookmark, you do not need to search again for the same (idea based on Design Studio 1.4: Portable Fragment Bookmarks – Use for Commentary)

17-12-2014 21-23-32.jpg

17-12-2014 21-25-27.jpg

The Left Areas

17-12-2014 22-41-11.jpg17-12-2014 21-27-04.jpg

The Right Areas


17-12-2014 22-43-38.jpg17-12-2014 22-43-26.jpg

17-12-2014 21-27-57.jpg

17-12-2014 21-53-32.jpg17-12-2014 21-53-40.jpg

Compose Area

17-12-2014 21-53-58.jpg

Share Area

17-12-2014 22-00-02.jpg17-12-2014 22-00-18.jpg

Prerequisites

Design Studio 1.4 release is a must requirement


Issues or Extensions?

I suggest, we try out the GitHub “Issues” – if someone wants to log some issue to fix or idea, use this link below

Access to GitHub Issues


Summary

I wish you some fun in trying out and also would like to know form you if this is usable content for you. Going forward (in January) we will try out to find a process to include all into ideas and extensions of such applications…

Known Restrictions

  • you can build compositions based on fragments on one query… as of now, but I have idea how to solve this.
  • in compositions there is no option for filtering.. as of now, need to check what can be done here, but there is hope…

As this is (most probably) the last blog with bigger content in 2014 – Merry Christmas and Happy New Year 2015!

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Howles
      Michael Howles

      WOW!  I know this must have taken a lot of thought and effort and you have something that looks very professional and clean!  I am not at my PC currently but I can't wait to try this out. I like the Fiori-like overall appearance and even some of these panels look as polished as a Lumira Visualize Room at first glance. Top notch BIAPP!  I hope this is one of many additional ones to come from the community!

      Author's profile photo Former Member
      Former Member

      Hello Karol,

      This is a very nice initiative, and I looked into it ... It must have taken a lot of time to create it !

      I presented it to my company to show the "power" of DS and the Community SDK 🙂

      Have a good day !

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      thirst of all, thank you for this awesome contribution... it really is a great showcase to demonstrate the power of Design Studio.

      But i have a problem running this on bi platform !

      I changed the systemid to a connection of the bo platform (cuid:.....) but when search for datasources i do not find anything...

      Could you please help me on this !

      Thanks a lot !

      Hannes

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

      Hi Hannes,

      yes, correct (unfortunatelly) - this came up after I have created the app. The search function is working only in local mode, there are some issues in accessing the repository of systems in BIP deployment. The correction will come in DS 1.5 (May 2015). Then also this function will work on BIP.

      As of today, it can be used in local mode - and of course this makes it a bit unusable with the search dialog.

      Karol

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      thanks for the information.

      Nevertheless a great showcase 🙂

      BR

      Hannes