POC Development - Data capture for Injury Management system

I hope you can help with some guidance and direction here. We are building a POC for an 'Injury Management' system. Part of the requirement is for data capture via graphical view of the body with selectable elements. See attached screen shots.

So the user needs to be able to press and select any location as the point of injury. ATM we have 30 possible injury locations.

Is this something we can build with 'Web Blocks' in OS or is this too bespoke?
If its a Yes for OS .. can you point me to some training or worked example. I assume we will need to prepare some 'clickable' overlays on the base picture and then associate them with a different web block. Not 100% sure.

Hello John, 

Sure it is doable with OutSystems, BUT... 

I really think this is not a case for Web blocks. 

This is just a matter for different clickable areas that should be stored (like an Id) and than send to the server. 

Something you probably could do using this Javascript library: https://konvajs.org/docs/sandbox/Shape_Tango.html

It is just an example, of course. Maybe you can find something more suitable for your needs. 

I would consider looking into Forge to see if there is a ready component that allows you to do this, otherwise you will have to integrate some Javascript library into your application. 

 Hope this helps. 

Are all of your clickable areas rectangles?

If so, you can position links using CSS and position: absolute. That will allow you to draw the rectangular overlays that you show in your picture. However it will not be easy to highlight (for example, change the color) the body part, since that will require a mask and positioning it with pixel-perfect accuracy.

Hello John, 

Check out the forge component Custom Image Highlighter. There is also a demo page here

Hope this helps !!!

Hi John,

You'll very likely want to use an image map, and I would say a server-side image map is in this case preferable as you won't need JavaScript trickery to pass the co-ordinates etc. I'd advise you to google a bit to see what's required.

As for Web Blocks, they are encapsulated, reusable functionality. You could indeed encapsulate a clickable image and its processing in a Web Block. I'm not sure what you mean by "associating overlays with a different web block" though.