• changing the user interface

last modified October 2, 2016 by egj

The user interface code is a React app that lives in ~/kpi/ on the server

To make changes, first find the code you need to edit.  Using grep to find some piece of text or HTML that you know you want to change is probably best.  So if you know you want to remove the KoboToolbox logo in the corner of the screen -- you'll see that its HTML is <span class="account-box__logo" data-reactid="."></span> so maybe search for that __logo:

$ cd ~kpi
$ grep -r __logo . | grep -v staticfiles  ## don't bother looking for files in ./staticfiles/ -- these are recompiled from source

That will give you some files that you might want to edit. From there it's sort of guesswork unless you know more React than me. :-) Files in jsapp/js/components are probably what you want to be editing.

Once you've made your code changes, you'll need to recompile the files in kpi docker container.

$ cd ~kobo-docker
$ docker-compose exec kpi ./rebuild.sh

Wait for a long time (~2-5 minutes) while the code recompiles.  Then if you're lucky, when you reload the webpage at http://demo.relevamiento.com/ you will see your changes.


To add or edit translations

First look in ~kpi/locale/es/LC_MESSAGES/djangojs.po and edit the .PO file (or replace /es/ with any other language)


$ cd ~kobo-docker 
$ docker-compose exec kpi ./retranslate.sh

Then reload the web page and your updates should be in effect.