# Primero User Customization Ideas

**URL:** <https://support.primero.org/forum/t/primero-user-customization-ideas/303>\
**Category:** Primero IMS\
**Tags:** v1-6\
**Created:** [March 24, 2020, 8:28pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303 "2020-03-24T20:28:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![menidhikjha](https://support.primero.org/forum/user_avatar/support.primero.org/menidhikjha/32/76_2.png) [@menidhikjha](https://support.primero.org/forum/u/menidhikjha)\
**Post date:** [March 24, 2020, 8:28pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/1 "2020-03-24T20:28:48Z")

</div>

Hi @irlawrence!

The changes that I want to propose are:

1. I want to start with the forms (CP/GBV)  
Currently the page looks like this.

 ![Screenshot from 2020-03-25 01-32-52](https://support.primero.org/uploads/primero/original/1X/ac72e7ae689fa88155293127439502632e2d4e53.png)

My first goal would be to fix the issues here.

1. Right now there are validations (for example I can’t leave the First Name) empty but even if I enter a single alphabet it allows me to register.

2. The input value of age can be negative in the form. That’s again an issue.

3. Most of the dropdowns have limited data. Even I had mentioned it on the issue that I opened on github [Issue](https://github.com/primeroIMS/primero/issues/27)

4. Right now there are only 4 mandatory fields and after filling them I can save the form (that does not include the submission of ID Proofs )

5. Then after fixing the issues. I will move to design the UI of the form. For this I will start fixing with small components and then finishing the whole page. Also I wanted to suggest As we are using material UI so we can even include MUI Forms to make it more interactive.

 ![Screenshot from 2020-03-25 01-41-29](https://support.primero.org/uploads/primero/original/1X/268161b69102cdbab687f0d5c5d700f92243f7a5.png)

1. My next task will be to make the app responsive ie- to make it mobile-friendly.

This is how I wish to proceed. Also for the home page. I wanted to know will this be a dashboard where the user can see the details?

---

<div class="post-metadata">

**Author:** ![irlawrence](https://support.primero.org/forum/user_avatar/support.primero.org/irlawrence/32/8_2.png) [@irlawrence](https://support.primero.org/forum/u/irlawrence)\
**Post date:** [March 25, 2020, 7:47pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/2 "2020-03-25T19:47:31Z")

</div>

Thanks for the suggestions!  
The drop downs you mention are just some defaults (dropdowns are called lookups in primero terminology) and they are usually modified to suit the local context for the specific Primero implementation (Government, Country, Refugee Camp etc) and/or the specific agencies (UNICEF, UNFPA, IRC, Save the Children etc) who are doing the roll out.  
This fine tuning is usually done by an admin and that interface allows forms and geographical locations to be modified too (as well as the lookups I mentioned).  
The user customization GSoC idea actually mentions something like this for the UI too:

> [@](#):
>
> Primero is an app designed to help social services workers with their day-to-day work. It is very important that the end user feels that they can “fine tune” the application to meet their ongoing needs for managing information. This project focuses on front end user customization (skins) that allow improvements to the application’s design and experience. The candidate selected may want to explore integration with 3rd party tools such as user-owned calendars provided by Google or Outlook, develop a tool for improved user management and selection of avatars, UI theme/look-and-feel support, or other such customization tools.

The dashboard you see is based on your role in the system. So an admin will see a different interface than a case worker or regional focal point for example

---

<div class="post-metadata">

**Author:** ![menidhikjha](https://support.primero.org/forum/user_avatar/support.primero.org/menidhikjha/32/76_2.png) [@menidhikjha](https://support.primero.org/forum/u/menidhikjha)\
**Post date:** [March 25, 2020, 9:13pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/3 "2020-03-25T21:13:34Z")

</div>

Thanks @irlawrence! So, for the ideas shall I start with submiting the mockups for the UI?

---

<div class="post-metadata">

**Author:** ![irlawrence](https://support.primero.org/forum/user_avatar/support.primero.org/irlawrence/32/8_2.png) [@irlawrence](https://support.primero.org/forum/u/irlawrence)\
**Post date:** [March 25, 2020, 10:02pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/4 "2020-03-25T22:02:18Z")

</div>

I am not sure if I understand which UI you are referring to.  
As v2 is still in development it may be the case that some of the items you mentioned in your first post will be fixed during the natural v2 progress towards release. As such its probably not the best use of your time to be working on them now  
Maybe lets take a step back and think a bit about the focus of this GSoC idea:

> front end user customization (skins) that allow improvements to the application’s design and experience

How should we approach that? How could this be implemented? What ideas do you have from other projects and so on.

A good read is this document [Introduction · Primero Administration Guide](https://support.primero.org/books/primeroIMS/PrimeroAdminGuide/master/)

---

<div class="post-metadata">

**Author:** ![menidhikjha](https://support.primero.org/forum/user_avatar/support.primero.org/menidhikjha/32/76_2.png) [@menidhikjha](https://support.primero.org/forum/u/menidhikjha)\
**Post date:** [March 29, 2020, 7:05pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/5 "2020-03-29T19:05:52Z")

</div>

Hi @irlawrence! I have looked at the doc link you have shared and I did some research as well. What I learnt about the project is:  
Through User Customisation, we plan to enable users to customize or make changes to the experience to meet their specific needs by configuring layout, content, or system functionality. Through this users make their own selections about what they want to see or set preferences for how information is organized or displayed.

For an example consider these:

- We can use a third-party library like “react-avatar” through which a list of avatars will be displayed and the user can select which one they want to opt for their profiles
- For skins, we can think of different modes like light and dark themes.

Please let me know if I need to explore more.

---

<div class="post-metadata">

**Author:** ![irlawrence](https://support.primero.org/forum/user_avatar/support.primero.org/irlawrence/32/8_2.png) [@irlawrence](https://support.primero.org/forum/u/irlawrence)\
**Post date:** [March 30, 2020, 10:57am UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/6 "2020-03-30T10:57:26Z")

</div>

I like this and I think we can go even further!  
If a government implements Primero they often need it to fit in with existing designs - the same with implementing agencies like IRC and so on who have brand guidelines etc.  
So how can they quickly change colours, logos etc without needing to do [something like this](https://support.primero.org/forum/t/adding-a-logo-or-changing-the-colour-of-primero/163/3)?

How can this be implemented? Do you know any React / Material UI projects who have done something like this? Is there any best practices? Have you ever done anything like this before? Is this too big to manage in GSoC? etc etc

---

<div class="post-metadata">

**Author:** ![menidhikjha](https://support.primero.org/forum/user_avatar/support.primero.org/menidhikjha/32/76_2.png) [@menidhikjha](https://support.primero.org/forum/u/menidhikjha)\
**Post date:** [March 30, 2020, 11:50am UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/7 "2020-03-30T11:50:48Z")

</div>

Hi @irlawrence. So can I start with proposal now as tomorrow is the last date for submission! Also, Can you tell me who all will be mentoring this project as I have to mention about it in the proposal according to the template provided by DIAL.

Also I want to discuss the project timeline because this is the thing that I can only write after discussion with the mentor. I am already on a time crunch. Please help me.

---

<div class="post-metadata">

**Author:** ![irlawrence](https://support.primero.org/forum/user_avatar/support.primero.org/irlawrence/32/8_2.png) [@irlawrence](https://support.primero.org/forum/u/irlawrence)\
**Post date:** [March 30, 2020, 1:34pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/8 "2020-03-30T13:34:32Z")

</div>

Yes please start your proposal.  
You can put me down as a mentor however it might be better to involve someone with more design chops than I have. We can sort this out later though if you are accepted.

---

<div class="post-metadata">

**Author:** ![aashim1garg](https://support.primero.org/forum/letter_avatar_proxy/v4/letter/a/fbc32d/32.png) [@aashim1garg](https://support.primero.org/forum/u/aashim1garg)\
**Post date:** [March 30, 2020, 6:59pm UTC](https://support.primero.org/forum/t/primero-user-customization-ideas/303/9 "2020-03-30T18:59:32Z")

</div>

hey @irlawrence can we use onClick properties for changing the designs.
