Page Comparison

Why Use Icons?

Icons can be included in menu and form lists. In addition to make an application look much nicer, they also can help with navigation. Here is what menu and form lists look like with icons included:  

...

...

...

Icons Best Practices

1. Don’t reinvent the wheel: Check with other projects/team members to determine if there is already a relevant set of icons you could leverage

2. Keep it simple: Keep your icons simple by picking a very clear and singular message for each one.

3. Make them match: Make sure all icons in a set are similar in terms of design style, color usage, line/shape weight. Avoid sourcing icons from more than one location (thenounproject, flaticon, icon8, material.io etc).

4. Use the palette: Using the CommCare/Dimagi color palette https://dimagi.com/styleguide/colors/ to pick colors can help to keep your icons uniform.

5. Make them clear: Ensure a high contrast between the icon and background.

6. Examples: Here are a few different icons used in different CommCare applications.

7. Double check your icons: Before you deploy an app, confirm that all of the multimedia links are complete and have the right file type by using the Multimedia Reference Checker. You can also find the pixel size of your image next to the link.

How to Find Existing Icons

The Noun Projecthttps://thenounproject.com/: This website has a huge library of free Icons. With a paid version you can download all of the website's icons in many colors. Make sure that these are “public domain” instead of Creative Commons. Public domain icons are freely available to use as much as you want to use them. If you use icons with Creative Commons licensing make sure that you give appropriate credit (http://thenounproject.com/legal/). 

FontAwesomehttps://fontawesome.com/icons: Another library of free, crowd-sourced icons. (https://fontawesome.com/icons)

...

For the following example, we want to display an icon when a mother indicates that she is feeling sick. Let’s look at the case list and set up the following:

...

After adding the sick property and configuring the necessary fields, hit the ‘Edit’ button that appears below the format column of the sick property and configure our calculations and icons. Once the window appears, select ‘Add Image’ to begin setting up your icons. In the calculation field, let’s enter the calculation:

...

In our application, next_visit is a defined case property that is set by the field worker at the time of their last visit. In the case list, we want to display the next visit date, as well as the icon as an easier visual indicator on who to visit. For the following calculations, we are assuming today's date is 12/5/2017 (May 5th, 2017).

Setup the following:

...

Now that we have that set up, we can begin configuring our icons. First, select edit under the Icon (Preview!) case property and begin setting up your icons.

...

Once that is setup, select OK and be sure to save your changes. You should now be ready to make a new version of your application and try it on a device!

Panel
panelIconId atlassian-warning panelIcon :warning: bgColor #EAE6FF
Order Matters! As mentioned previously, the order in which you set up the calculations and display icons is very important. Calculations are triggered, and icons set, starting with the top of the list. From our above example, moving the calculation for the Green icon to the top of the list can break our configuration and make it so the Yellow icon will never appear. The date is still 12/5/2017 (May 5th, 2017):

Panel
panelIconId atlassian-warning panelIcon :warning: bgColor #EAE6FF
To break down our calculations, the green icon appears whenever the next visit is greater than two days away. The yellow icon appears when the next visit is within 2 days. The green icon’s calculation actually encompasses the date range that we are setting for the yellow icon, so the calculation is not triggering. Therefore, we will always see a green icon for cases whose visit is 2 days away. We can correct this by having the yellow icon calculation trigger first by making it first in the list, like what was done in the Varied Icon example. Any case within this range will have a yellow Icon set. The green icon will then be set for all other cases that did not have a yellow icon set.