Skip to Content
Technical Articles
Author's profile photo Girish M P

An Injured Body Parts Component with SAP Analytics Cloud Custom Widgets


We had a requirement from one of our customers for an EHSM Dashboard with a KPI for Injured body Parts . Looking at possible options using the predefined components available in SAC is going to be either a Pie chart or a Doughnut chart to represent the classification of injured body parts.

With the help of Custom widgets in SAC I was able to come up with a new better visualization method. What better way to visually describe injured body parts than to show it on a human dummy image


Injured body parts Custom Widget

This component contains text elements placed at different positions in the Image to show the respective Body Part

Image Used for the component :

The above image was downloaded from–39735 and retouched a bit to suit the color scheme of the dashboard.


The Component accepts inputs for 6 body parts ( Head , Shoulder , Stomach , Hand , Leg , Foot ) which are passed to the component through a setvalue method.


Each input value is defined as properties in the JSON file ,

“value1”: {
“type”: “number”,
“description”: “Head value”,
“default”: 0


These values/properties are then defined as Parameters to the setvalue method as individual arguments


Custom Widget with inputs passed via the setvalue method :


The component also contains a getvalue method that returns the values set to the component.

The above component can also be enhanced further with styling web components to bring on different styling options like choosing different predefined human dummy images for better aesthetics. It can also be enhanced in terms of builder capabilities by adding additional body parts , Hierarchies to further drill down into an selected body parts.




The Blog post walks you through the basic idea of the design and the functionality of a body parts injured component.

Also, Have a look at my older Blog on A Progress Bar Component with SAP Analytics Cloud Custom Widgets


Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vadim Kalinin
      Vadim Kalinin

      And where is the code related to this Widget?

      Without the code it's just a useless picture...