Hide Status section in Capture app

Support - Assistance technique
,
1

Is it possible to hide the status section on event programs in the Capture app? We do not use this functionality and it confuses users.

image
image1212×166 3.92 KB

2

Hi @kstankevitz

I’ve been investigating this and trying to see if there’s a workaround to solve this. Unfortunately, there’s no out of the box solution which means this calls for a feature request. (See ideas …)

I first thought about using the API styles endpoint to affect this using CSS but then there’d be no way to hide this for specific programs and show it for others. It will be hidden across all programs, I doubt this is something that you’d want?

The second thing that I tried was build a plugin that will be integrated into the specific program using the Tracker Plugin Configurator app, but then I soon learned that the plugin code is limited internally within the plugin and can’t enforce css changes outside of its own iframe.

Could you please add more context to how it’s confusing users? And why it’s not used in your event programs?

Thanks!

3

Hi Gassim, I think we actually might be willing to hide this for all programs. Can you expand a bit on that possible solution?

4

Sure! You’d basically use the styles API endpoint and adjust the CSS to force the change on the entire Capture app (and any app that uses the same CSS ids and classes but we’lltry to be as specific as possible to limit it affecting other parts of the apps). I would like to test it first and then I will let you know if it actually works.

5

Hi @kstankevitz

Thank you for your patience! I finally got the time to expand on this. The conclusion is that you might consider using a capture plugin that’s tailored for your workflow which is probably the most supported way; however, when looking into the CSS workaround here’s what I found out.

I learned that the styles API endpoint /api/files/style doesn’t affect the ReactJS apps (only the legacy apps) so that option will not work unfortunately.

The idea was simply to run a POST request such as the following:

var myHeaders = new Headers();
myHeaders.append("Authorization", "Basic YWRtaW46ZGlzdHJpY3Q=");
myHeaders.append("Content-Type", "text/css");

var raw = "[data-test=\"dataEntrySection-STATUS\"] {\r\n    display: none !important;\r\n}";

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://play.im.dhis2.org/stable-2-42-4/api/files/style", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Which responds with: {"httpStatus":"OK","httpStatusCode":200,"status":"OK","message":"Custom style created"} but upon investigation, the CSS is not actually injected in the ReactJS apps.

However, I also learned that it might be possible to use a reverse proxy to force the injection in your instance but this will require an server admin expert to investigate it first.

For example, if your system uses nginx, you would send the same CSS post request and then inject the styles… something similar to this:

sub_filter_once on;  
sub_filter_types text/html;  
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="/api/files/style/external" /></head>';

Note:
---

Even with the forced inject, the CSS selector in the Capture app [data-test="dataEntrySection-STATUS"] could change in any future version, so that would have to be monitored. (Another big reason to just consider a Capture plugin, I guess).

These are the workarounds I could think of, but please also do consider to create an idea on jira as I initially suggested because if this is something that affects many on the implementation field then it’d definitely be considered.

Thanks! :slight_smile: