 Okay, so hello everyone, we are starting the Visual Data Entry session. We have seen for now how to configure or change the color of the application, the icon of the application, the colors and icons for our metadata, and the rendering types for some value types for attributes and data elements. What we are going to see now is in the case of assigning icons and colors to the metadata, how to use them to have a Visual Data Entry. So let me open again, can you remind me at what time we finish so that I can keep control? You have until 12. Yeah, so I should finish at 45. I have already introduced the icon library in the previous session as well as the information about the icons. So if you are watching the recording, watch the one from the previous session. If you have been here with us, you know already, we explained it like 10 minutes ago. Again, also this for the new icons and where they can go. To know how to assign icons and colors. I explained before that sometimes the color picker is a bit different, so this is the case. When we use it for options in an option set, the color picker is a bit different. We will see this in the demo and a tip to use it. But what do I want to show you? I don't know if you remember that in the demo on the first day, there were some screens in which I was entering data just by typing on an icon, right? We display the options for data collection with icons and colors and the user just has to tap. So we are seeing here in this session, what do you need to change in your data transfer configuration so that data entry works as visual data entry and you can just tap on the icon. So there are three steps for that. Your section, your program stage, we are inside the program stage. So the stage needs to have a section with one data element only. If we want that visual data entry, we need one data element in the section. As you are seeing here, that data element should be linked to an option set. And that option set should have icons assigned to the or configured for each one of the options. Then that section, I didn't say it in the first one. That section needs to have the rendering type, a sequential or matrix. Listing is the regular rendering type that we have in our section. But if you want to render the buttons, the icons as buttons, let's say, that buttons, actionable buttons, you have to choose either sequential. There will be one after the other or matrix. They will be displayed in a grid. So yeah, this is what I mean. This is sequential. This is made. Oh, I have put them. I have to modify this presentation. This is matrix. This is sequential. And this is listing. This is the regular one. So if you have more than one data element independently of your rendering type, it will be a list. But if you leave only one and configure the section, it will be displayed like this. I want to go directly to have a look at the application because I think this will learn better by using it. So I am now in your exercise. It's going to be exactly like what I'm doing now. So so please pay attention. I'm going to open my student program. So now you are going to work on the student program. And I want you to see that if I open this stage lab results, we are going to be working in this stage. You see, we have one stage, five, four data elements. And the test result data element is a drop down. So I'm going to change this. I want this to be an icon based data entity. So let's go to our server now. So I am in my canons, programs, list of programs. I search for my student program. This is the exercise that you will need to do. So I open the program. So we set three things. State data element and color. So icons. Let's start with the stage. You need to go to the stage three lab results. So when we go to the create data entry form, here we need to add a section, which I'm going to call my case. This result, for example, and here is a rendering type. I'm going to use matrix, for example. So I got the section and now I want this data element to be put in this section. I delete it from the previous one, add it to this one and update the stage. So now we have a section, which has one data element and has rendering type matrix. So I want to make sure that that data element is a text and has an option set. So I'm going to the data element. I search for my test result data element. Per core set. This result, I think. Lab test result. So it's a text and has an option set. Test result. OK. So I'm going to go to my option set now, which is in others, option sets, 0, 0, 1. Test result. So this part you also have to do. I have it done because I prepared it, but you have to do it one by one. You need to edit each one of the options and then you need to assign a color and you need to assign an icon. Now for the color. The color picker here, it's very variable. It's difficult to pick the same color twice. So what we usually do here in the slides, you have a hint here. It's also in the exercise. So what I usually do, because sometimes I want to configure different options by using the same color to give you an example. This configuration. I'm repeating the color twice. It looks better. It looks very nice, but it's not easy to repeat a color with our color picker. So I come here, I pick a color, I copy the code, I keep it for me. I'm going to pick a yellow one because the one I'm using. So I copy and paste somewhere. So now here, you need to scroll down a bit. I do put the color that I have selected in the HTML color code space. This is just an example. There are many. So if I want to repeat the same color, it's easier. So option set, options with icon and color assigned. Option set assigned to my data element. I go back. This is already seen. And then one section in my program stage with only one data element, that data element, and rendering type. I'm using matrix. You can use matrix or sequential. So let's save the program stage and the program and go back to our application and sync metadata. In this case, it's enough with the metadata. It's always enough with the metadata. We only need to log out when we are in the server system set. When we are in the metadata domain, it's enough with your sync in your configuration. So I don't see notifications because I'm in demo mode. But it must be still syncing because it has not updated this. Let's give it some time. Now it's on. You will have notifications. I'm using demo mode. And that's why I don't see the notifications. Demo mode is in the device, not in the app. So I open my program again and my track entity instance. I go to the stage. I have modified. Laugh results. So you see now that we have two sections. This is the second one that I created. And ta-da. Hi, man. So here we have the icons. I'm sorry I didn't make a very nice selection. But these are the options in your option sets with the different colors. You can decide your icons, your colors, your listing, or matrix rendering. So this is actually, I'm going to move now to the exercise. We are also on time for the exercise. Three minutes ahead. Eight. So at the end of the session, you need to know how to configure option sets for Visual Data and for the last program stages. So what we would like you to do is what I just did. We would like you to configure the test result program stage in your student program to display Visual Data. And to do that, you need to, A, create a visual data that you need to, A, create a section for the test result data element. And not only that data element, configure the rendering type so your program is ready. And then go to your test result option set, the one for your student number, and then assign icons and colors to your options. Here you have a link to the HTML color codes in case you want to repeat the same color in any of your options. What will we want to see? We want a screenshot of your data entry with colors and icons, so mainly something like this. You can add up to three screenshots, but if you assign one screenshot that we can see, you are at your program and you have Visual Data entry, that would be enough to pass this exercise. And I'm going to leave this in the screen and open for questions. We have until 12 for this exercise. I'm going to leave the recording as before. And in case there are questions that are interesting for those watching the session later. OK, you liked it. Thank you very much. This is a very visual, easy session. And I'm going through the chat now. Check Slack now. Please don't hesitate to share questions if you have about the exercise. Maybe we still have like 10 minutes for this. Afterwards, we're going to have a breakout group session where we will be able to give close support. But in case you are having already issues with this, feel free to ask the questions here or in Slack. And we try to... Yes, or if this one is easy and you have questions about the previous ones, that's also fine. I mean, our main objective is that by the end of today, you are catching up with all the exercises from yesterday and today. So please use this time for that if you can. Also, I know we repeated a lot, but please don't be embarrassed of asking any kind of questions. We really, really understand that this might be sometimes complex or you might think that your questions are not... Okay, thanks, Ibrahim. Yeah, we tried to... So Ibrahim is telling me that it might be better to stop recording, to ease a load of this. The problem is that maybe there are questions related to this session. But yeah, I think we will ask. I think we don't have many, yeah, I can. So then you can. Thank you very much. So what I was saying, please don't hesitate if you have questions.