Clickable image to edit column’s value

One of our customers sets up the database for health insurance company and likes to edit the list of injuries by clicking on an image of the human body; he asked us whether it is possible to populate the column using clickable image. We helped him and decided to share the results with you.

Here is a link to a sample database.

As a clickable image format we chose Scalable Vector Graphic images. Why?

• It is a vector image format supported by all modern browsers.
• It scales to any resolution.
• There are many SVG editors and convertors.
• It consists of elementary geometric figures (circles, ellipses, rectangles and lines) and it is programmable — you can detect clicks on a figure with JavaScript.

While our attempt to help was quite simple, to build the sample database we wrote some <200 lines of JavaScript code to make it as reusable as possible. It is not directly tied to TeamDesk, you can use it in your own projects too.

As an image we took the map of United States from Wikipedia. And here is what we got:

Clicking on checkboxes highlights the state on the map. Clicking on the map checks corresponding box.

To place the map we added “Text with html” section on the form. Below is the code for it:

<!-- we'll place the map here -->
<div id="usmap"></div>
<!-- style it a bit -->
<style>
/* let it downscale */
#usmap svg {
	max-width: 100%;
	height: auto;
}
/* highlight selected states */
#usmap svg *[id].selected {
	fill: #800;
}
/* if form is editable highlight elements on hover */
div.ui-gridlayout.fs-edit #usmap svg *[id]:hover {
	fill: #CCC;
	cursor: pointer;
}
div.ui-gridlayout.fs-edit #usmap svg *[id].selected:hover {
	fill: #C00;
}
</style>
<!-- load javascript code -->
<script src="./res.aspx/clickableSVG.js"></script>
<!--initialize clickable image -->
<script>
TD.clickableSVG({
	control: "f_36837578",
	svg: "./res.aspx/usmap.svg",
	appendTo: "#usmap"
});
</script>

While it seems wordy at first, it solves four tasks:

• Where to place an image? There is a <div> with “usmap” ID
• How to style an image and the selection? There are <styles> for that.
• Load JavaScript code to handle clicks.
• Configure what is clickable and where to place the results.

Latter script section contains the call to TD.clickableSVG(…) function that accepts configuration object with the following keys:

• control: the name of the text/hidden input or checkbox group with the value.
• svg: is either
  • SVGElement or
  • CSS selector to find SVG already on the page or
  • URL to SVG image to load or
  • text with SVG image code.
• appendTo: CSS selector to element to append SVG image into for URL and SVG-as-text cases.
• clickable: CSS selector to detect clickable elements, default is *[id] — any element with ID attribute.
• valueAttr: the name of the attribute that holds the value. Default is “id” — our best guess as id is the only attribute uniformly editable using SVG editors’ UI.
• selectedClass: CSS class to apply when element is selected. Default is “selected”.
• delayInit: whether to delay initialization until the page is fully loaded. Default is false. Initialization code relies on input control is present on the page at the moment the function runs. If it’s not the case, try setting this parameter to true.

Happy clicking!