CHT design questions

Product
1

Hello @diana @gareth
I have a few design questions about CHT ;

  • Can the main nav bar with all its tabs be moved from the top and aligned to the left side to meet the design requirements for a particular use-case implementation?

  • Is it possible to add a custom tab in the CHT ref App?what would be the extent of this change in core and web app ?

  • Is it possible to change the colors in the nav bar for particulat tabs in the configuration code or it requires a change in core ?

Thanks

2

2 posts were split to a new topic: Adding a marker for “high risk” patients

3

thanks @samuel :+1: .

4

Can the main nav bar with all its tabs be moved from the top and aligned to the left side to meet the design requirements for a particular use-case implementation?

This is not currently possible. It would be interesting to make this a configuration option but ultimately it’s quite difficult to maintain the option to move the bar as any future changes would have to be tested in both layouts to ensure they still work. For small devices having the navigation bar on the left would take up a lot of screen space which cuts down on space for viewing patient data and forms. What is your particular use-case? Can you share screenshots of what you’re thinking?

Is it possible to add a custom tab in the CHT ref App?what would be the extent of this change in core and web app ?

It’s not currently possible to add a new tab to your app without changes to the CHT Core Framework, however it is possible to show/hide existing tabs as needed. What tab would you like to add?

Is it possible to change the colors in the nav bar for particulat tabs in the configuration code or it requires a change in core ?

That’s not currently supported. One reason for this is the CHT Core webapp uses consistent colours throughout the application to give users a visual hint as to what a button, tab, or list item relates to. You can change the icons used in the navigation bar, however.

The CHT community is looking for ways to improve the navigation and design of the app while making it easy for existing users to adjust to. Some ideas we have been exploring are using a wider layout for large screens to better use available space, moving the tabs to the bottom of the screen for small screen devices, or removing the tabs altogether and using a drawer or home page to access the different pages.

2 Likes
5

thanks @gareth for the detailed response

Screenshot from 2022-03-07 16-40-48
Screenshot from 2022-03-07 16-40-481920Ă—1080 111 KB

From the screen shot above ,you have the nav bar with a new tab called Directory on the left side with the yellow arrow

6

Hi @cliff ! Could you please share more details about the custom tab you were looking to add? Curious to know what kind of functionality or information architecture you’re looking to support. Thanks!

7

helo @Nicole_Orlowski

I will be sharing in these details here as i get more requirements from our design team about this feature…
Thanks

2 Likes
8

@gareth,

You write one could not change the colors of the tabs. What about this file

You can set there colors for everything. Why cannot one change the colors right there?

9

Because the CHT is open source it would be possible to modify the code and change the colors of the tabs as well as pretty much anything else! This is known as forking the repository. The downside of this approach is it would require you to build and maintain the cht-core code yourself which is additional work and makes upgrading to future versions more challenging.

My understanding of the original question was if there is a supported way to configure the tab colors without forking the repository.