 So, first of all, we have here the server and color flag. So, your application is going to have like a theme. It could be different colors, like the green one, orange. These are here. And you can select these colors in this style. If you go to the system settings, this here in the in the server, go to appearance, and then you can sit here and the colors and the flag. So, the icon, the flag is in here. You can put your flag and you can put your different icons here. Also, if you want the flag to be seen in the device as an icon, you can go to the application and then go to the widgets and use the HS2 training widget. It will show you your flag if you select it that way. Okay, by default, the light blue theme is the one that is selected. We also have an icon library, which is more than 200 icons. They have been designed to be like very high efficient. They all have like the same structure, the same width of the lines. And they're like very... So, well, a structure in order to put all the icons that you will need for different programs in health and education. So, for example, you can assign these icons to your different data elements, your different programs or datasets to some options, to some attributes. And you will be able to see them and it will be easy to recognize your different metadata. About the icons, we will have like three different variations for each icon. For example, in this one, you can see here a doctor and you can see the positive, the outline and the negative. There are three different. And when you apply a color, the app will show you like this. For example, if you apply the blue color, you will see this one for the positive, that one for the outline and this one for the negative. So, if you want to fill it, the color, you have to use the negative form. If you want just to put the background, it's the positive. Let's move on. The icons were redesigned in the last versions. So now we have like this new patterns here, which are more beautiful right now. If you want to see all of them, it's easy. You can come here to the health icon library and you can just navigate through them. Check what you need. So coming back to the slides. Sorry. How does it work in the Andrew capture app? So when you download the metadata, you are just downloading like the icon name, which is that one, but you are not downloading the image. So don't worry if you are thinking that if you put a lot of icons, then the application will put a lot of pressure when you're downloading and you're going to download a more heavy metadata package because all the icons are already in the in the Android app. So it won't download anything else on the loading image. The only thing that you will download is the name. When you are sick, where you are thinking. And the same for the color is just in the Jason that you're downloading when you are using your configuring your data. Okay, in case that you want to request some new icons because you don't have enough, or you think that there are some icons that could be added to the HS2. You can come here and try to request an icon. So this is like an example of an icon request here they want to request a stand and they explain what they want. And then they can put like some images. And then the have icons team will try to, to help you, you have to submit the request through it have. And after that you, you will have the icon in the HS2. So that will help us to normalize the consistency of all the icons in the collections. And where can I use the icons right now. So the icons are in all this metadata type program program stages that said that elements attribute indicators prime indicators and the options and options set. So you can add everyone, but the Android is only rendering those ones so you cannot use in the document attribute indicator or program indicator right now. Maybe in the future we will add them but right now you only can render in the one selected. And for today we're going to try to in the exercise later we're going to assign to the programs and some options sets. In this example is like if you're navigating to the server and the web page you can go to the options and then start assigning the icons in the colors of the metadata. When you edit an option in this case is an option set but they will be the same in the program or different data. You will be able to set the color like we can hear and then selecting one of the colors. And also change the icon you can come here and select the icon. If you go to this tab, you can switch between positive negative outline and then select the one you want. And now some different some special rendering types, we have the images and we have also the pickers ready buttons or checkboxes and also codes like your code or the barcode. And for long list you also will have how to complete. So let's move to them. For example, the, the image you can select an image to use it as a profile picture or just if you want to search some data as an image. And in this case, if you see here, you can see like the, the attribute of the dispersion is an image, you can just click that button, and then take a picture and you will have a picture here. And if you put them the first attribute of the type a image as a display in list, it will be some here. So in this case you could be the lead you will see the list with some of the picture. Now for that picker. There's two different versions, this one and then the calendar by view. So first of all, this is the one that you will see, but if you click this button here, you will change to the calendar view. So this is not configurable, but when the user select one or the other, the app will start this preference. And the next time the user come here and see the, the data picker, the data picker. And then the last one that the user selected. So the app will remember also other type of rendering. So, for example, if you have an option set, you can put different type of rendering you can use. Yes, yes, no, these are gravity buttons, checkboxes, they are horizontal or vertical. So, also you have to take into account that if your option set has more than 15 elements in the option set, it will directly put the default rendering option automatically. And then it will have like a select. Okay, QR codes and barcodes. You can select, for example, for unique ideas or different elements of type text, and then you can just click that button, go to a QR code or barcode, and you will be able to read QR codes and barcodes. Also, if you put here directly some text, and you click here in the barcode, it will automatically generate for you the barcodes. So, if you come here to the QR code generator.com, it's in the slides, you can just put some information here, like, I don't know, like the ID, whatever. And then you can create a different QR codes with that. So, for rendering options, you can go to the maintenance, then to the program, and you can go to the program stages or the attributes. And when you select your attributes or data elements for the different value types, you will be able to select the different rendering options. And as we said before, for the options or the booleans, you can use the vertical value buttons, the horizontal value buttons, this one. This here that are with the line, the red line is because they are not supported in Android right now. Maybe it will be in the future. For the text type, you can use the value, you can use the autocomplete, we'll see that later in the demo, the QR codes and barcodes. There's no rendering option for numbers right now. Yeah, just as I remember the images, it will render directly, if you put the value type, and this is not configurable, it will render out the image. The deep peeker is also not configurable, but yes, you can almost configure it by using the user selection. With the value button and the checkbox, you can put it in value types and text with option steps, and this is configurable so you can use one or the other. For the QR barcode, it's also for text value types, and it's configurable, and for that to complete this text value types, and it's also configurable. Okay, you don't have to remember everything, what they said, because everything is in the documentation. You can just check it here, and see that here you can see how to configure the flag, the appearance, and everything that I told you is here. So I'm going to do it right now demo. If you let me serve my device here. Okay. Okay, so first of all, I'm going to enter to my device. Here you can see that the application them is the blue one. So it's the default one. And here if you see the program, it has the default icon and color. So if we enter here, and then we create a person, we put it in our organization unit, then we can see the different attributes here. So the first one, the country residence is an autocomplete one, and you can see that all the, all the countries but you can also just create. You type on it, you click and you select it. This one is the other date picker, you can click in this button and it will change you one of the other. And you pick the different numbers, you can also select your producing. Also here is the, the name that I put in the search. So when you create a will start the name and put it directly when creating after that. Here we have a sex selection, we have just a regular display here. The first case is the image. So let's go back and configure a few things. Okay. Here. So first of all, if we go to the, you will be able to do this because it's just for the admin administrator. So we go to the system settings and go to the appearance. When I switch style and put, for example, the green one. And also the flag, instead of putting a flag and no flag I'm going to put a kind of a flag for example. It should be okay. And then we are going to do more configuration, we enter to the, to come free to the config and then we go to our program, which is, in my case, the steers your three. You can do that in your program, and then you have here the different colors and the icon. So, in my case, I'm going to just select purple color. And I'm going to select a random icon. Well, coronavirus, you can search here. And you can, for example, use the positive one. Okay. And then after that, you can save. And I'm going to go also to the different attributes. In the sex, I'm going to put vertical ready buttons, for example. And I'm going to go also for the date picker. No, sorry, I'm going to go for the local case ID, which is this one, and I'm going to put a cure code. So, this is just a mobile render type and you can also use the desktop render type in case you want. So I'm going to go back to the application. And then I'm going to sing my configuration again. I'm going to log out first. I'm going to log out because I want also the icon and the flag to be some for that reason you have to log out always. For the other configuration is not necessary. Okay. Nice, so dedicating a nice configuring. So first it's going to download my configuration. I'm not sure if I say, oh man, I didn't save. I didn't save it so I don't know if I have to sing my configuration again. Okay, if you can see here that the time is updated because the configuration is ready. Okay, I was on time. So this is the different configuration that I had before here. And then if you come to the program you can see that is a coronavirus icon here and sparkle as we select it. And also if we enter to another one, so we can just create it. Save it before. If we come here, we can see that the sex now is a radio button. We can also see that the local case. You can read a code I can just read that one here. And it will put you the what it reads. As if you click here, you will see the same code as that you read before. You can share it if you want. In the image, you can take a picture sample. And if you share it, it's going to see it like this. So I'm going to save. Okay, and then if you go back to the to the list, you can see that the profile back picture is here, the one before. Okay. And that's it for the presentation. Now I'm going to go to the exercises. I'm going to serve my screen again. And yes, just to remember the word of the day is APK. So for those that were asking before. APK is the word of the day before moving to the exercise. Okay, let's see the visual configuration exercise now. So at the end of the session, you will have to know how to change the icon on the flag of the color in the Android app. This one I don't really did it for you is something that only the admins can do so you don't have to do it in their exercise. But you have to check that the color is the green one. So if you want to know how to change the icon on the program that says you still know how to change during the type attributes and that element, which is the one that we did before. And we now have to know how to see the changes in the app. So your turn, what you have to do is to configure the icon and the color for your student programs and you can put whatever you want to put the purple and the coronavirus but you can put another one if you want. You have to make the attribute local ksad. A cure code attribute. It's the same that I already did before. So you have to do that. Then you have to make one or more of your data elements, a text book or a radio button. And you can use one of these like the same for COVID type of specimen of states, whatever you want. And then you have to sing or your changes in case you don't have any here you can create a sex data element. Use an option set and then you can just add the radio button or the text box. And then you have to sing all your changes. Remember that for sync for syncing the color of the icon you have to log in and log out just for this one. The other one you can just sync. If you want to create some cure codes, you can use the website as I showed you before, and then you will be able to use the code attributes here. Yeah, you have time until the end of this decision. And then you have to submit three screenshots from your system program. The first screenshot is the home screen where you can see the color of your app. The second one is the screenshot of the day search. And with the cure attribute. And the third one is the screenshot of your data and to show you at least one that element with a checkbox or a radio button rendering. If you have any trouble I leave the computer, the other resources, the documentation at the end of the slides. And that's it for me.