Introduction

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 https://www.freevectors.net/free-vector-human-silhouette–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.

Conclusion

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  https://blogs.sap.com/2020/09/16/a-progress-bar-component-with-sap-analytics-cloud-custom-widgets/