 full screen. The channel has been very silent. I don't know if that's good news. But let's start our session. Visual configuration. So I hope everybody's here. I don't know how to, it's weird that I don't see anyone but they hope you are all fine to resume. We have you are all in the list but hopefully this is fine. So what are we going to talk about now? Color. We're going to bring color to our life or to our app. I think this session and the next session are very visual and very to me interesting or kind of fun. So I'm going to tell you the different things that are in the app for shaping the look and feel in terms of color or user experience for the user. So of course we cannot do everything but we have some things that let us be a bit flexible. So first thing I want to explain you is that in the HHS2 there is a thing called theme. In appearance I think it's called theme where you can configure the color of your server. I don't think this is working anymore in the server. It's an older feature, feature, but it is working in the app and we will see later the effect. So just to say that you can choose either green, orange, light blue, red, or Vietnamese default blue for your default color in the Android app. Then we also have colors for the programs but this is the color of the Android app overall. And then you can also select a flag. This one is the one that will appear here when you have it configured. And in the app it's going to be replacing the icon. I will show you later as well and it will be the icon that is shown while you are syncing. Right now you see the HHS2 icon. If you have a flag in the server it will show the flag. I will demo this later. In addition to this, that's for the server. Let me go back here. This is for the server and this is for all your users and it's like generic for everyone. But now when we go to programs or metadata there are two things we can configure. One are the icons and another one are the colors. So you can combine by combining icons and colors you can give a different look to your programs and to your apps. When a program or a dataset has a color configured, when the user opens that, the whole app takes that color. So it replaces the default color. Let's say your default color is blue, your program is yellow. When the user enters in the program everything is yellow. This is questionable. We can talk about it. We have even different opinions in the team but we think this helps linking the workspace. If everything is yellow I know I'm working in the child program and I avoid that mistake and the maternal care program is pink. I don't know. So we are trying to help getting context to the user. This is just to tell you that there are three types of every icon. You can choose it three times. Outline positive or negative. This depends on how you want it to look and it's totally up to you. You can do it at configuration moment. In 235, so we are making this academy in 234. So we are working with the old icon library. But in 235 we have reviewed the icon library. So for instance we have made all icons more generic not to reflect any racial or gender features of the icon itself as we had before. So from 235 this is how they look. And then we have also added new domains like education, coronavirus or agriculture or environment. And some other sets of icons to show you display levels and other useful things. So hopefully if you use 235 you have access to all of this. For this academy we don't. This is just to let you know that using icons do not increase your traffic, your data traffic because the icons are all in the app already in the APK. So if it increases something is the APK size but not your traffic. What we download is only the name of the icon. And then the app will find it and display it. So we just download the name of the icon as part of the JSON of the metadata configuration. So don't worry about using icons if you are in a very limited setting. Requesting icons is something that we will talk about in on Friday. But just for you to know that you can you can not upload your own icons. Sorry about that. That's something we always discuss but it doesn't exist per se in the HIS2. The possibility to store custom icons but you can send us your suggestions so we will tell more about this on Friday. This list is showing you where you can use icons. So track entity type, program, program stage, dataset, data element, attribute indicator, program indicator and an option set with options with the options. So there you can assign the icon in the metadata configuration UI and then Android will render these ones that we are showing here. For now we have yet still not rendering all of them. It's a work in progress and the same for web. Some will be displayed and some will be displayed in the next in the new capture app when it's completed. So this is how it looks where where you can add the icons and colors this to color. So you edit your metadata and then you have color icon and then you have to choose. These are the three that I was telling outline positive and negative. We will practice this and I will demo it. So this is about the icons and the colors. I will demo and tell you more. What about rendering types? We have few special rendering types. One is the image. So the image is not configurable. It goes by the value type but just for you to know, this is how it renders. It will open the camera and take a picture. The date picker is also not configurable but your user can change from different views. I'm going to demo this in a minute. And then this one is configurable. For your Boolean types and option sets, you can choose if you want to drop down, if you want a vertical or horizontal radio button or checkbox. And also to say, if you choose the drop down and the list is the options are more than 15, it will not open a drop down but the box in which the user can search. Another special rendering type are the QR code and the barcode. We will see in a demo in a minute. And this is how they look. This is how you identify when a field is different. And this is for value types, text. Then you choose the render type I will show you how. And this is just in case it's useful for you, how you can generate QR codes. It's very useful. So these are the different rendering options that you are going to see based on the value type. And the ones that I have not marked or marked as not available are some that are offered in the UI but they are actually not available. We are, it's a work in progress. So the only one that I have not explained is autocomplete. Autocomplete is for texts. So if you render something as autocomplete, it will, once your user starts typing, it will suggest the values that have been entered before for that field in that phone. This is, for example, when you need to register a location but you don't have a list, but you want to capture as much as possible the same spelling for every place. In some places, spelling of locations can vary a lot. So now when the user starts typing, we will suggest the same spelling that was done before. This is all about quality. And this is just a summary of what I have just told you. And here you have a link to the documentation where we explain all these visual configurations. So let's have a look in the app. And I want to show you. I'm going to use the app. So here we have the Android app. So you see the app is blue. And you see that this is the training icon. Sorry, yes. And now I'm going to open our contact tracing program. So you can see now how the local case ID is a text, right? And we can also see this is the calendar. So this is how the user changes the view. Okay. And now when we, sorry, when we register a TI, this is how the image works. So I have here an assistant for this. So this is how the image will work. So I'm going to go to the server now here. And I'm going to go to system settings. I want to change the color. So let's say green. And I want to put a flag. This is already updated. I want to make other changes. I want to show you where to change the rendering type. So we have changed for now the color of the server. And we have changed the flag. But now if I go to maintenance in the programs, I want to go to the contact tracing that you all have. This we all share. This is not for students. So I want to change the icon or the icon is already there. I'm going to leave the icon, but I want to change the and now I'm going to go to the attributes. So you saw we had the local case ID, which is a text. I'm going to make it QR code. And I have to save. Remember to save. Okay. So let's go back to the app. That was quick. It's still sinking. The problem is that I have a demo mode in the phone and then it's hiding notifications here. Okay. Now you see the last time it was 1028 before. Maybe you want to, because some people were having that issue, maybe you want to explain why did you do this, like to get the information from the server. Because I think some people are modifying the server, but they do not see the changes reflected on the phone. As a reminder, please make sure that when you make changes on the server, in order to get things in your phone, you need to do what Martha has just done. Yes. Okay. And I'm going to even go further on that in a minute. So important to check your last sync, which was, which now it's correct. So now you can see the program color. So now you will see it's going to change from blue to the program color, you see. And now you see this local case ID is a render. It's a QR code. So I'm going to generate this whatever unique ID 123 code. Okay. So I'm going to search. So see now it's not a text anymore. Now I'm searching and it's telling me that, so did you see how it rendered here? I just changed the render type in the program. So now I can add the track entity instance. Ask again, my friend for help. Now I'm saving it. I didn't save it before. So just by, okay, this is my track entity instance. Here you see how they match renders. This is how it looks in the list. So just by changing the rendering type, now I have a QR code type here that I can use also for searching. So if this patient had a patient card, I could just scan the card. So I'm about to finish the demo, right? I want to ask you, I did change the color of the server and I changed the flag, but we are, I did put it green, but the app here is still blue. Why is this happening? This is something that we are fixing for the next version. But the thing is syncing your configuration, as Jaime was saying, is something you have to do when you modify your metadata. Every time. And it will work with all changes. The one change that is not reflected when you do this is when you change the server. You are not supposed to be changing the color of the server every now and then. So this one we only do on first login, which is not correct. We will fix it, but it's what is happening. So I'm going to reset the app and start over so that you can see how it picks the color on the flag. So now I want you to see how the moment that configuration finishes is going to change. This is going to get green and here we should get the flag. But again, this is a special case only for the color and the flag of the server. Any changes on your metadata, it's enough to sync configuration. Okay, here we have the flag. Oh, we cannot see it. Oh, didn't I change the color? In any case, I cannot repeat it because we don't have time. But the flag used hurt. I chose green. I think someone is probably changing behind. So, okay, it should have been green if here would have said green. And the last thing I want to show you is that if we have the widget working, so in the next version, if you do this and say widget and put the widget here, it will take the flag. This icon will be the flag. So this is how you personalize your app with the color and the icon. Share questions later. So let's see the exercise. What are we, not this one, what are we wanting from you today? I think it's a very simple one. You have to configure the icon and color of your student program, not the contact tracing I did, your student program. Make in your program the local case ADR QR code and then choose one of your data elements in the program stage. Change the render type to either checkbox or radio button for one that is an option set. So we are giving you here examples, reason for testing, type of specimen, type of test. So the lab stages are very good for this. And then sync all your changes. And we will ask you for submitting three screenshots. One with the home screen where we can see the color and the icon of your program. One of the TEI search. So this one in your program with the QR code rendering. And then one of your data entry with the checkbox. So it's time to do the exercise. I went over two minutes, sorry about that. But it's just those three changes or four is about syncing. As Jaime said, it's very important to sync your metadata. So I'm going to open Slack now just to make sure we follow your questions. But that's all from the session, Martin, if you want to stop the recording. I'm actually