Skip to Content

Easy-to-use, visually cool, and useful – Part II — How to build this xApp!!!!!!!

In Easy-to-use, visually cool, and useful – That’s our Healthcare Management Cockpit I wrote about our Healthcare Management Cockpit. I showed you what it looks like and what you can do with this attractive application.

I’d now like to show you how to use the Visual Composer to build this application.
Before I start, it’s very important to mention that when I speak about “ building this application” I don’t mean coding. The Visual Composer is a model-driven architecture tool and this is a big difference to normal development tools. The user is different too. The Visual Composer user is not a “normal” developer (but can be), but a business process expert. He or she doesn’t build new queries, BAPIs and services, but uses and combines them in a new application. So that’s enough of an introduction – if you’re ready, let’s start!

I’d like to build this application together with you step by step.
In the Management Cockpit, I bring different KPI (contribution margin, bed capacity utilization, top ten DRGs and lengths of stay) from different sources together on a single screen. To do this, I use four different BI queries. I search for these queries in the Visual Composer and place them in the Visual Composer using the mouse. Each query has an input and an output (see model). I use a starting point as input for our queries. In this case, this is the departmental organizational unit. For the output, I select a table and a graphic. Don’t worry, the Visual Composer doesn’t leave you in the lurch with the output data. After you select, for example, a table as the output, a dialog box immediately appears with a list of all of the possible KPIs you can use in the table. You just have to select the required KPI(s).


If I want, I can play a little bit with the option for the table or graphic. You can custom tailor your application very easily.

To give you an idea of what is possible, here is an example from the Contribution Margin chart:


It is possible to select different chart types. In this case, I select a bar chart. In addition, you can change the animation, the colors, the description, and so on.

Once your model is okay, you can switch to the Layout tab.


Here you have a “WYSIWIG” (What You See Is What You Get) view. You can change whatever you want. You can place the elements wherever you like. You can change the size of the different components and also the width of the columns. You can modify the text of the columns and the headers. This is the easiest way to custom tailor a UI without coding.

When you’re satisfied with the model and the result, you can deploy the model and you’ll get your first dashboard straight away: Nothing could be simpler! Here is the model thus far:


And here is the first simple application:


You see that you can build something like you see in the figure very easily and quickly. It’s visually good, but is missing a lot of functionality. If you’re satisfied with what you see right now, then you can stop reading. If not, you’ll have to wait for my next blog entry.

Easy-to-use, visually cool, and useful – Part III — How to improve this xApp!!!!!!! In my next blog entry I’ll show you how to add the drilldown capability, implement the radio button to switch between the chart and table view, and last, but not least, add a print button.

In the meantime, I’m still very interested in your feedback and your ideas.

Regards from Walldorf


To be continued…

You must be Logged on to comment or reply to a post.
  • Hi Stevan it was a really good demo to start off.Do we have something specific for Pharma in xApps space or it’s clubbed with Healthcare.
    • Dear Ritesh,
      Pharma (or Life Sciences as well call it, to also address Biotech and Med Device) is another department at SAP. Of course we offer xApps / Composites (both SAP own as well as partner composites) for use in Life Sciences as well, like xMII, xRPM etc. Could you specify a bit more what area you are interested in? R&D, Manufacturing, Sales and Marketing?
      Best regards
  • Hi Stefan,

    Could you let me know if we can have an Speedo meter Chart type in Visual Composer.

    Currently we are using WAS700 with SPS12.
    and it shows standart 7 chart types.
    is there any seprate patch or template to add over VC to get additional chart types

    Thanks in advance

    Taher Ali

    • Hi Taher,

      A “Speedo Metter Chart” is a standard type in Visual Composer.
      Please go to “Components” and add an empty “Form view”. In the configure element click on the plus button. Now you can select a “Gauge” or a “Progress Bar”.

      I hope that helps.