Hi all,
Is it possible to color cells that haven’t been assigned any data element in a custom form?
Thanks
Yes, it is when you are using custom forms (which are only supported on the browser and not the android app, so it’s important to weigh the options first).
As mentioned in the docs (Manage custom form - configuring-the-system/metadata | DHIS2 Documentation) to create a custom form:
To create a custom form:
- Open the Maintenance app and click Data set.
- In the list, find the data set you want to add a custom form to.
- Click the options menu and select Design data entry form.
- In the editing area, create the custom form.
- Double-click on a object in the left-hand list to insert it in the form.
- If you already have the HTML code for your form, click Source and paste the code.
- Select a Form display style.
- Click Save.
After the above instructions, to add the color, go back to the “Source” and add the CSS style:
<style type="text/css">
.entryfield:hover { background-color: #ff69b40d !important; }
</style>
You can chance the HEX color to any color you like, but the !important is important because like this we’ll be overriding the existing CSS colors. At this moment I made the color to only appear on “hover” because using CSS I don’t think it’s possible to change it without affecting the script that changes these textboxes to “green” after successful entry and to “yellow” when not successful/offline; therefore, if you remove the “hover” it will disable that feature - maybe you’d have to use a script if you want it without “hover”.
Hi @Gassim
By using the above CSS style, the background color is shown when I hover over the cells that have been assigned data elements, but I would like to have the opposite effect, i.e, show background colour over empty cells, marked with red cross in the image below: I tried the css on demo
Thanks.
Oh, right, sorry! Then my suggestion is to create a class for every empty cell in the source and then adding a CSS code for it. For example, <td class="emptyCell" align="center"> </td> and the CSS would be something like: .emptyCell { background-color: #00f7ff1a; }
To make it easier for you, copy the HTML to a text editor and use find and replace. You’ll search for <td align="center"> </td> and replace it with the one with <td class="emptyCell" align="center"> </td>
Good luck! Hope this solves it? 
Thanks!
1 Like
Hi @Gassim,
This HTML I have copied into notepad has no this line you have mentioned.
See in the image
Yes, sorry! For you here I think the empty cells are <td> </td> - they’re just not “aligned=center,” so please use <td> </td> instead and replace it with <td class="emptyCell"> </td>
Please let me know if it works!
1 Like
Hi @Gassim.
Without your help. I couldn’t imagine how to all this. All is working fine. Image below
Thanks a lot.
1 Like
Thank you! (: