Spoiler before anyone gets too excited, “hacking” in this context refers to the creative and collaborative process of rapidly developing innovative solutions to specific problems or challenges.
When working with community health toolkit (CHT) one of the most important things is to customize the questions. For example, you have very two similar select options, and you want to highlight the different between the two, so the users don’t get confused when selecting them.
Let’s take the following two select options,
- Amoxicillin Clavulanic Acid 7:1 (400 mg Amoxicillin and 57 mg Clavulanic Acid per 5 ml syrup)
- Amoxicillin Clavulanic Acid 4:1 (125 mg Amoxicillin and 31.25 mg Clavulanic Acid per 5 ml syrup)
As you see, the difference between the two select options is very minute, and one can easily get confused when answering, it would be nice if we could customize to select options to highlight the differences like this.
- Amoxicillin Clavulanic Acid 7:1 (400mg Amoxicillin and 57 mg Clavulanic Acid per 5 ml syrup)
- Amoxicillin Clavulanic Acid 4:1 (125mg Amoxicillin and 31.25 mg Clavulanic Acid per 5 ml syrup)
However the current XLS forms, or the CHT documentation do not provide a way to customize the select option in using CSS. This is something that has been asked before but there seems to be no way to overcome this issue.
However, in an earlier CHT update, CHT gave the ability to add custom javascript functions to perform complex calculations and basically anything that javascript can do, but you can’t do in an XLS form because of the XLS limitations. This is done by adding a calculation with a cht:extension-libfunction.
We have been using this to perform drug calculations and other complex calculations. We pass input data from the CHT form, perform the calculations within Javascript, and return the value as a calculate, which will be displayed later in the form.
But since the CHT form is a web application, and the CHT android application is actually a web-view, what if we can use javascript to manipulate the HTML DOM and its elements, mmmm interesting, it’s just HTM and DOM after all, what can go wrong. This got me thinking because I had to solve the exact same problem mentioned above, making sure users don’t get confused with the two select options.
So I quickly wrote a simple javascript file hack.js that would take two parameters, first the data attribute that uniquely identifies an element. A second parameter that accepts the HTML changes that one needs to render within the CHT.
Each element in the form has its own data attribute that uniquely identifies an element. For me, since I did it for an already running form, I grabbed the attribute by looking at the web-inspector from my browser.
See the data-itext-id , this data attribute uniquely identifies elements in a CHT form, there are other unique data attributes like data-contains-ref-targetas well, you get the point, you will have to get it from the inspector. You can also use the classical class or id attributes as well if you see them in the inspector.
Then I added it as a calculation in the Excel file, which would look like this,
cht:extension-lib('hack.js’, ‘/almanach_somaliav3/oral_antibiotics/co_amoxiclav_confirm/co_amoxiclav_sto:label’, ‘Amoxicillin Clavulanic Acid <b>7:1</b> (<b>400mg</b> Amoxicillin and <b>57mg</b> Clavulanic Acid per 5ml syrup) ’)
The first parameter as mentioned above is the data attribute and the second parameter is the HTML that I want to inject.
The javascript file will then read the parameter, find the DOM element, and then inject the HTML instead of the HTML given in the Excel file.
When I uploaded the form and the extension to CHT and ran it on my computer, things rendered exactly as I intended.
You can find the javascript code in the hack.js repository here in my GitHub account. https://github.com/rukshn/cht-hack-js
The hack.js file currently only looks for the data-attribute, but this can be changed, and customized to look for classes, IDs or different data attributes. You can also use the same approach to inject, and change CHT interface as you would like to, hence the name hack.js.
Happy hacking.