 And I'm going to share my screen with this, just to track time. OK, is everything OK? I guess so. So we are going to talk now about the visual configurations of the Android application in terms of colors, use of icons, and different rendering types. I'm going to have an intro and show the demo of about 15 minutes, and then you will have time for the exercise or submission, which we think is very interesting. I hope you enjoy it. So first of all, server color and icon. So you probably have not explored this, because it's not very active in web, but you can change the color of your application by changing the color of the server. We will have a look at this later. But in the system settings, appearance settings, you can choose different themes, which do not apply in web anymore. They did in the old days, but we use it in the app. So you can choose green, orange, which is called India, light blue, dark red, which is Myanmar, or Vietnam, which is the basic blue that we see in the HHS tool. And then you can also change the flag. This one is quite used in web. And we use that if you choose a flag, we put that as an icon for the Android application. I will show you later. So that's very generic for the whole application and the icon we use on the home screen. However, when we talk about metadata inside the HHS tool, we can also assign icons and follows, as you know. We have around 200 icons. There must be more now, probably close to 250, because of the last reviews we have made for COVID and for education and more malaria programs. So tell you more about the icons. For each icon, there are three variations that you can choose, outline positive or negative. You can play with that and see how it renders on the application. And then the icon library, in the last version released, 237 for web and 2.5 for Android, the whole icon library has been redesigned. There are no new icons, but the health icons project has reviewed our library and redesigned it all just to make them look more, I don't know, more mobile friendly and definitely more aligned and more homogeneous amongst our own library. So the health icon project group of volunteers have done that and the whole library is now available, redesigning the HHS tool, but also on their website. How does this work? We really want you to know that using icons and colors do not increase the bandwidth that the application consumes when you use it because we do not download the icons. What we download, as you can see here, is the name of the icon and the code of the color. And then the icons are already stored, let's say, in the Android SDK, in the application, and they are not very heavy. They are SVG files and you can use as many as you want. The bandwidth consumed when syncing the metadata will change almost nothing. So don't worry about using icons, even if you are in a very restrictive setting. Now, how to request a new icon? This is an old screenshot, sorry about that because the whole website has changed, but inside the section for Android, we do have a link to a form, it's a Google form, that you can submit and ask us for icons. However, since the health icons project is now integrated with us, they do have also an option to request icons, and they do have a huge team of designers. So they are probably more agile than us, but in any case, we are in contact and we follow up their project as well. So you can choose if you request an icon to them or to us. Either way, I think it will end up passing through their designers. And now, where can we use icons today? So you can assign icons to almost all metadata as you can see here in the list. However, in Android, we are only rendering for now a few of them, like, I mean, there are a lot, productivity type, the programs, program stages, datasets, and option sets. The others, we are not really rendering them in the application for now because we have not found the need, actually, in the user interface. How to assign icons and corals to your metadata? There is usually, when you edit, this example here is for option sets, where it's very similar for data elements, programs, everything. There is always a color and an icon button. So when you click here for the colors, it will open a colors selector. It changes a bit in some places. We will show you later, but there is a color selector, color picker, and the same for the icons. Here, you navigate the three variants, positive, negative, outcome, and then you can search also based on names and keywords if you don't find what you want. So that's about icons and colors. Moving now to the rendering types, we do have five different rendering types. So going by them one by one, we do render images, and that's nothing special more than using the image type when you configure image value type, either a data element or an attribute. Now the tricky part is, if you want the image to be the profile picture of attract entity instance, the image that we in the Android app, or that the Android app renders as profile picture is the first attribute of the attract entity type of program attribute. The first one that is marked as display in list. We will see this in the configuration later. So that one, you can have as many as you want, but the first one marked as display in list in the list order of attributes will be your profile picture for the attract entity instance. We use it in the list and in the TI dashboard. Another rendering, special rendering is the date picker. We have two types of renders and the user can change. We do have a spinner for selecting dates and we do have a calendar view. The user can change by using these icons. And this is not something that is configured from the server, but the app keeps the last choice of the user. So the next time you open a date, it will open with your last selection, either being a calendar or a spinner and it can change, of course. Now, radio buttons and checkboxes. This is another rendering type that you can select. I will show you later where or when is when you configure your program stage. And this applied to yes only data elements, to yes, no value type data elements and to option sets. When you have a data element of type text that is linked to an option set, or that is a yes, no data element or a yes only, then you can assign one of these rendering types so that it displays differently in the application. Now, the default rendering option for option sets, when you have less than 15 options in an option set, you will see a drop down. But if you have 15 or more, or more than 15 maybe, then we will open a search box. I will demo this later in a minute. Another rendering type, QR code and barcode. You can assign the QR code and barcode rendering type in the same place and the others when you create your program state and it will apply to text value type. So when you have a data element or an attribute code of value type text, you can say this is going to be a QR code or this is going to be a barcode. So when you say that the app will render them with this button here, which is used to open the reader or to open the code if it's already stored. So now, the web interface will give you the option you don't need to remember all this based on the value type of the data element or the attribute. However, it's going to give you a bit more options than the ones that we actually render. So you have here a list of the ones that will work and the ones that are stuck through with a red line, those are not available yet. I didn't mention autocomplete. If you select autocomplete for a text value type, what the app will do is to suggest the user as the user types the first characters. It will suggest the last values that were stored for this field. This is when you know fields are repeated quite often, but you don't have an option set for a dropdown. So for example, in an address, you will not put autocomplete because they might be different or in a name or but in a profession, if you don't have an option set, you might want to put autocomplete or in a location. If you don't have a list, but you know villages are repeated and you want to avoid typos, when there's that typing, you can offer the last options that were entered and that it's going to be based on the app. And this is not sent to the server in any way. So it works based on use in the installation. This is just a summary of the rendering types that we have seen. Some of them are not configurable, images and they pick up and some of them are configurable. So let's have a look in the application to how all this looks. However, the word, not the word, the word of the day today for your attendance registration is synchronization. So we hope you get the right spelling, but we will check with attention synchronization. So I'm going to go now through the Android application to make it there. We're still recording, I hope that's correct. So where is my, it's here. Okay, so first thing I want you to see is that the icon of the app. So to enable the icon, I make a long press, put widgets, now long press here. This is the VHS2 logo, white over white. So you can't barely see it, but you will see the difference later. I want you to see also that the app is blue, okay? So I'm going to create a TI here. So let me search for my TI, which is, it's not here. So this is the calendar picker. So you can see, so if I choose this view, the next time I open a date, it's opening with this view. I only have one of unit, okay? Coordinates, current position. So now when we go to the attributes, the local case ID, you can see it is a text. Nothing special. Now country of residence, see this one has more than 15 options. That's why it's opening a search box. So let's look for Western Sahara. I know we do have participants on there, I think, not sure. And then, yeah, let's put a name. This is a regular text. I'm not going to enter everything. This is a dropdown number. I think I'm going to leave it here in the, ah, and then the picture. So let's add an image. I have someone to help me today. Hello. It's okay. You can see her eyes, but it's fine. So I'm going to save this, and I'm going to go to the server now. In the server, thought I had this prepared, but it's fine. I'm going to system settings. Okay, probably need the other user. And here, in appearance, is where we can change the color. I'm going to make it red. We can change the flag. I'm going to put the beautiful flag of, for example. And now I want you to see the program and how it is configured. Looking for the contact tracing. I'm going to change the color of the program, icon of the program, nothing here. In the attributes. Okay, here is where we make rendering changes or displaying list changes. So you can see that the profile picture is marked as displaying list. It doesn't matter if it's the last one because it's the first image marked as displaying list. So this way I know it is my profile picture. And now, let's say local case ID is a text. So I'm going to make it a QR code. And for example, the drop down, the sex was a drop down. I'm going to make it horizontal checkboxes. And I'm going to save this. I hope I have not forgotten any change. Yeah, so I'm going to go back to the application. And it should be enough with you see the profile picture here. It should be enough with login with, sorry, settings. With syncing my configuration for the changes I made in the rendering types. However, for the changes I made in the color of the server, we do need to log out and log in there to pick the color and the flag. So let's do that using the phone. So now, when it syncs the configuration, if I did it well, it will pick the color. You will also see the flag. How am I doing with time? Hi, may I lost my timer? You have a... Am I late already? Half the minutes left. For the whole session? Mm-hmm. Mm-hmm, okay. So I'm five minutes late. You have an extra session. Okay, so there we are. We have the color and the flag. This is gonna show you very quickly. I want you to see how the icon changes now. So this is the old one. So there it is, my new icon. And the app now looks red. So I just want to show you that for our friend. Well, first of all, if I search now, this is a circle, which is opening the camera, which is looking to my wall. But then for the rendering types in the data entry, I think we changed the attribute sex. So yeah, now it's a big instead of a drop. So this is it for visual configuration. And I remind you that the word of the day is synchronization. Now let's move to the exercise. And so what do we expect you to do? Something very similar to what I did. Oh, and I didn't pay attention, but the icon and the color of the program also changed. I didn't demo that, right? And what do we want you to do? Four things that can be done very quickly. You have to work now on your student program, not in the contact tracing that I used. That one is protected. So you will not be able to make changes there. Use your student program. And then please change the icon and the color of the program. Change the attribute local case, as I did, you also have it to a QR code in the rendering. Then look for one of your data elements that have option sets and make them radio button or checkbox or horizontal vertical. You have examples here. Reason for testing is an option set, type of specimen is an option set, type of test is an option set. And then sync all your changes. So we also want to see the color and the icon of the server on your app. Remember you have to load out and login. And then the submission will be three screenshots. One, the home screen where we can see the home screen of the app. We can see the color you have put to the app and we can see what the color of the app will be taken from the server. But we can see the icon on the color of your program and that you sync. Then we would like to see a screenshot of the search where we can see that your local ID is a QR code rendering type. And then a screenshot of your data entry where you have changed one of the option sets rendering type to either checkbox or radio buttons. So this is the exercise. We are here for questions. We have eight minutes, Jaime. Yes, correct. It is doable, but please share your questions if you don't find the places or the result. I think do we stop the recording now? We'll leave it in case we have questions. I think it's maybe good that we leave it until the time of the session in case there are questions that might be regarding the... I'm going to leave in the screen what we are. Or do I stop sharing? No, I love it. So let's have a look at the chat. I think checking there were some issues with the audio settings. But there are no questions regarding the session. Little arrow above on the mic icon. You can verify. Oh, sorry, this is you. How to display your Android screen. OK, we can explain this in the optional session. Abdel, later. We use an existing program. You have to use your student program Pacific. What did you get? I don't see that question. The chat? I'll see. Abdel is a private message, but Pacific is an open message. Yeah, so he was reading a private message a lot. It's really confusing for us to get common and private messages. So please don't share any secrets. We do prefer to communicate in the common channels. Let's have a look at the chat. Yeah, Abdel, we will explain that. Maybe we'll be doing the break on the Q&A session. Let's try to keep now these five, six minutes we have left for the questions regarding this. You don't have access to the system settings to change the color of the app, Johan. In system settings, you change the color of the server. And that I did for everyone. What you have to do as part of the exercise is to change the color and icon of your program. However, we would like to see that you synced and got the new color for the application as a submission. But the color is the same for everyone. It comes from the server. Let us know if that doesn't answer the question. Johan. I didn't know that was possible. What? This. We are recording high-message. Let's try not to. No, I thought I was doing it in my screen. You can also type. Spotlight. Oh, look at this. If there are no questions, do we want to stop recording them? Yes, we can. So... Do I stop? Anything I should do? Stop recording. No, you say recording again. Can you see that? Yeah. Do you want me to stop it? Are you sure you want to stop?