Dataset Custom Forms (CSS & JS)

​Hello Communit​y,

I am customizing the UI form of our datasets here. We need help on where to put CSS and Javascript files.

Kind regards,

Makhate Makhate

ICAP, Lesotho

Hi Makhate,

It maybe possible to use files but I used to paste Javascript code in the Source window at the custom form editor, following this link
https://docs.dhis2.org/master/en/user/html/database_design.html#d0e36608 see the section 30.5.3.1.2. Custom Forms.

Best

Diao

30.5.3.1.2. Custom Forms
···

On Tue, Feb 6, 2018 at 2:30 PM, Makhate Makhate makhatemakhate@gmail.com wrote:

​Hello Communit​y,

I am customizing the UI form of our datasets here. We need help on where to put CSS and Javascript files.

Kind regards,

Makhate Makhate

ICAP, Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

**DIALLO Mamadou Diao Conseiller IT, Specialiste de DHIS 2 **( District Health Information Software )

Projet de Renforcement du Système d’Information Sanitaire en Guinée

Phone : 623909413 | 662256106

Skype : diawwdiallo

www.jsi.com

Hi Diao,

Thanks for helping out.

What do you mean when you say “it maybe possible to use files” what do you mean by files.

The only trick that I could come up with is doing it like this but it doesn’t quite work:

/* CSS code here */

Well, doing it like this, when i hit Preview i can see basic interactivity but when i load the actuall dataset, it doesn’t work.

Does anyone know exactly where to put JS and CSS code.

Kind regards,

Makhate,

ICAP Lesotho

···

On Tue, Feb 6, 2018 at 5:54 PM, Mamadou Diao Diallo diao_diallo@gn.jsi.com wrote:

Hi Makhate,

It maybe possible to use files but I used to paste Javascript code in the Source window at the custom form editor, following this link
https://docs.dhis2.org/master/en/user/html/database_design.html#d0e36608 see the section 30.5.3.1.2. Custom Forms.

Best

Diao

30.5.3.1.2. Custom Forms

On Tue, Feb 6, 2018 at 2:30 PM, Makhate Makhate makhatemakhate@gmail.com wrote:

​Hello Communit​y,

I am customizing the UI form of our datasets here. We need help on where to put CSS and Javascript files.

Kind regards,

Makhate Makhate

ICAP, Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

**DIALLO Mamadou Diao Conseiller IT, Specialiste de DHIS 2 **( District Health Information Software )

Projet de Renforcement du Système d’Information Sanitaire en Guinée

Phone : 623909413 | 662256106

Skype : diawwdiallo

www.jsi.com

Did you have a look at our developer documentation on the use of custom CSS/JS?

https://docs.dhis2.org/master/en/developer/html/webapi_ui_customization.html

This should also work for inline JS in the form.

···

On Wed, Feb 7, 2018 at 6:38 AM, Makhate Makhate makhatemakhate@gmail.com wrote:

Hi Diao,

Thanks for helping out.

What do you mean when you say “it maybe possible to use files” what do you mean by files.

The only trick that I could come up with is doing it like this but it doesn’t quite work:

/*

 CSS code here

*/

Well, doing it like this, when i hit Preview i can see basic interactivity but when i load the actuall dataset, it doesn’t work.

Does anyone know exactly where to put JS and CSS code.

Kind regards,

Makhate,

ICAP Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

On Tue, Feb 6, 2018 at 5:54 PM, Mamadou Diao Diallo diao_diallo@gn.jsi.com wrote:

Hi Makhate,

It maybe possible to use files but I used to paste Javascript code in the Source window at the custom form editor, following this link
https://docs.dhis2.org/master/en/user/html/database_design.html#d0e36608 see the section 30.5.3.1.2. Custom Forms.

Best

Diao

30.5.3.1.2. Custom Forms

On Tue, Feb 6, 2018 at 2:30 PM, Makhate Makhate makhatemakhate@gmail.com wrote:

​Hello Communit​y,

I am customizing the UI form of our datasets here. We need help on where to put CSS and Javascript files.

Kind regards,

Makhate Makhate

ICAP, Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

**DIALLO Mamadou Diao Conseiller IT, Specialiste de DHIS 2 **( District Health Information Software )

Projet de Renforcement du Système d’Information Sanitaire en Guinée

Phone : 623909413 | 662256106

Skype : diawwdiallo

www.jsi.com

Jason P. Pickering
email: jason.p.pickering@gmail.com
tel:+46764147049

Thanks,

I ran the POST-request and it looks like it ran successfully because i can see the CSS file when i run /api/28/files/style.

One last thing, how do i link/reference that css file? I’m asking this because the styling is not working on my forms.

Warmest regards,

Makhate, ICAP Lesotho

···

On Wed, Feb 7, 2018 at 7:49 AM, Jason Pickering jason.p.pickering@gmail.com wrote:

Did you have a look at our developer documentation on the use of custom CSS/JS?

https://docs.dhis2.org/master/en/developer/html/webapi_ui_customization.html

This should also work for inline JS in the form.

Well, doing it like this, when i hit Preview i can see basic interactivity but when i load the actuall dataset, it doesn’t work.

Does anyone know exactly where to put JS and CSS code.

Kind regards,

Makhate,

ICAP Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

Jason P. Pickering
email: jason.p.pickering@gmail.com
tel:+46764147049

On Tue, Feb 6, 2018 at 5:54 PM, Mamadou Diao Diallo diao_diallo@gn.jsi.com wrote:

Hi Makhate,

It maybe possible to use files but I used to paste Javascript code in the Source window at the custom form editor, following this link
https://docs.dhis2.org/master/en/user/html/database_design.html#d0e36608 see the section 30.5.3.1.2. Custom Forms.

Best

Diao

30.5.3.1.2. Custom Forms

On Tue, Feb 6, 2018 at 2:30 PM, Makhate Makhate makhatemakhate@gmail.com wrote:

​Hello Communit​y,

I am customizing the UI form of our datasets here. We need help on where to put CSS and Javascript files.

Kind regards,

Makhate Makhate

ICAP, Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

**DIALLO Mamadou Diao Conseiller IT, Specialiste de DHIS 2 **( District Health Information Software )

Projet de Renforcement du Système d’Information Sanitaire en Guinée

Phone : 623909413 | 662256106

Skype : diawwdiallo

www.jsi.com

Hello Makhate,

Couple things!

So first of all, if the CSS is for the custom form and the custom form only, putting them in the source tab like you described should work, but it can be finicky, as DHIS 2 does alter the HTML as it is being displayed. Best figure out what works in the chrome console and put that in your custom form.

/* CSS code here */

Second, if you want css to work on all pages, https://docs.dhis2.org/master/en/developer/html/webapi_ui_customization.html isn’t the safest place to keep custom css and js as you have found it does not work on all pages. There is no way besides forking core to put your own custom CSS on the react apps unfortunately:

https://jira.dhis2.org/browse/DHIS2-2065

https://jira.dhis2.org/browse/DHIS2-1299

https://jira.dhis2.org/browse/DHIS2-2624

···

On Wed, Feb 7, 2018 at 4:48 AM, Makhate Makhate makhatemakhate@gmail.com wrote:

Thanks,

I ran the POST-request and it looks like it ran successfully because i can see the CSS file when i run /api/28/files/style.

One last thing, how do i link/reference that css file? I’m asking this because the styling is not working on my forms.

Warmest regards,

Makhate, ICAP Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

Timothy Harding
Sr. Systems Analyst, BAO Systems

+1 202-536-1541 | tharding@baosystems.com | http://www.baosystems.com | Skype: hardingt@gmail.com | 2900 K Street, Suite 406, Washington D.C. 20007

On Wed, Feb 7, 2018 at 7:49 AM, Jason Pickering jason.p.pickering@gmail.com wrote:

Did you have a look at our developer documentation on the use of custom CSS/JS?

https://docs.dhis2.org/master/en/developer/html/webapi_ui_customization.html

This should also work for inline JS in the form.

Well, doing it like this, when i hit Preview i can see basic interactivity but when i load the actuall dataset, it doesn’t work.

Does anyone know exactly where to put JS and CSS code.

Kind regards,

Makhate,

ICAP Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

Jason P. Pickering
email: jason.p.pickering@gmail.com
tel:+46764147049

On Tue, Feb 6, 2018 at 5:54 PM, Mamadou Diao Diallo diao_diallo@gn.jsi.com wrote:

Hi Makhate,

It maybe possible to use files but I used to paste Javascript code in the Source window at the custom form editor, following this link
https://docs.dhis2.org/master/en/user/html/database_design.html#d0e36608 see the section 30.5.3.1.2. Custom Forms.

Best

Diao

30.5.3.1.2. Custom Forms

On Tue, Feb 6, 2018 at 2:30 PM, Makhate Makhate makhatemakhate@gmail.com wrote:

​Hello Communit​y,

I am customizing the UI form of our datasets here. We need help on where to put CSS and Javascript files.

Kind regards,

Makhate Makhate

ICAP, Lesotho


Mailing list: https://launchpad.net/~dhis2-users

Post to : dhis2-users@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-users

More help : https://help.launchpad.net/ListHelp

**DIALLO Mamadou Diao Conseiller IT, Specialiste de DHIS 2 **( District Health Information Software )

Projet de Renforcement du Système d’Information Sanitaire en Guinée

Phone : 623909413 | 662256106

Skype : diawwdiallo

www.jsi.com