 In this session, I think it's the last of today, we are going to do visual data entry. What does it mean? Well, we're going to try to build something like this when your users are entering some of the data. So the thing is that if you don't do nothing, the data element will just so at least drop down that you can select. But if you use the different colors and icons in your option set, then you're going to be able to create something like this using the icons. So let's go and see how you can do something like this. So in this example that we are going to build, you are going to work with the options of an option set. So when you enter an option set, you have different options. If you take here, you have three different options for this option set. And when you edit it, it lets you change the icon. So the first thing that we are going to do is like select the different icons that we want to put to your different options. And then you can select the color. The color selection tool for this one is a bit different. What you can do is just enter to this website here HTML color codes and copy the codes that you want or select it directly in your tool. But if you want to be sure that you always speak the same color, you can come here and then you can select the different color you want. For example, if you want to bring one and then copy this code here. If you copy that, then when you come here, you can put just your color here in the tool color tool selection. So to display an options as images, as I saw you before, the first thing that we have to do is add the data element to a section. So we create a section for that. And there's a site where we will be creating one. Then we are going to find a data element which is linked to an option set. And then we have to set the options with icons. So three steps. These are very important because are the first steps that we have to do in their size later. So create a section, add the data element who is linked to an option set, who has icons in their options. And then when we create the section, we can switch between listing, sequential, or matrix. What does it mean? Well, here you can see these are the three different options. Are the different rendering types for the section. So if you in the section put the listing type, you're going to see a list like here. You can see that you have a list of different entries and that's it. But if you use the matrix one, you're going to see a grid of the different options that you have in your options set for this data element. If you use the sequential one, you're going to see the list like this. So it's on you which one you prefer to use. Okay. If you want to see all the information about this, it's everything in the documentation. You have here the link. You can just click here and then you come, you see how that works. You can see also different options that you have. Everything is here in the documentation. So let's have a look in the app. So I'm going to try to show the screen again now. Okay. Okay. For example, if I enter here to the tragedy type that we created before, I just have here at the end another section that I just created. If you check here, we have these four options for the options set. So it's just a drop down, a regular drop down and that's the default option. So you can check here and whatever. So let's move to the server side and then we can configure everything. So for that thing, first of all, we have to make sure that we have our option set ready. So if you check, we have the, if you put here test, you should see the test type. This is the test type that we are showing. And then you have here the different options. So for that, I'm going to just add some colors here. As I said before, you can do something like this to see the number. So for example, I want that one. And the icon, I'm going to just put some random icons here. So for example, this build is really here. Now for the next one, I'm going to set another color of this green and then put baby, for example. Now the next one, I'm going to edit it. I'm going to select another color, another icon. And for the last one, the same. And you're selecting another color here. Oh, I don't know. You're a yellow one. And now that we have the different options in your option set, you can go back and check that your data element is having the same. So your data element is already created. This would be SPX type of text. So this one, SPX type of text. I'm going to type it. I'm going to copy here as the data element. I'm going to put it in the chat for before. I don't know where the chat is here. And then you can come here and see that the option set is the text type that we already defined. So now if you go to your program, you can go to your program states here. And what you have to do is go to the first state and create a new section. Well, first of all, you have to assign the data element. So you have to go to the data element, make sure that you have here the data element. So if you put here SPX, I have it here already, but you will have here. So you have to move it. And then one that's done, you have to create your data and your form. You can create a section already. So it's that one. And if you create, you can put here the number of the section, the name of the section. And here in mobile under type, that's the tricky part. You have to put sequential or matrix. If you put listing, it will, so that's the default. So you will see the same that we were seeing before. You have to come here and put another of the other for example, sequential or matrix is the same and update. And then you have to add here your data element, which you can just filter here the data element and add it here. I already have here, so I don't have to do it. And then you save everything. Okay. And then if we came back here and we go back and sync our metadata again. So you can come here, come to the settings. That's very important. Then sync configuration and sync configuration now. So if you trigger this, you're going to see like the, the syncing bar here is going to sync your configuration. It will, it could take a few seconds. It's almost done. Okay. I think it's finished now. Okay. You can check now here the date and the time. It's just now. So what I'm going to do is go again to my home, go to my program. Then I'm going to enter the user I created before enter here. And the last, okay. That's kind of ugly because the icons are the colors I selected. But here you have a, instead of a drop down, you have these selectors. So you can just type of need and it will save or you can type the other one will change. Okay. I think that's it for the exercise. Let's go to the exercise now. So what you have to do in this section, what we want you to learn is to know how to configure different options set for visual data entry. And then now how to configure program stages for your visual data entry. So nice your turn and you have a lot of time. You have almost half an hour to try to work on this. And what you have to do is configure the test result of the program stage to display visual data entry. You already have the options set created. You already have the data element created. You have to be sure that they are linked and then assign the icons and the colors to the options of the option sets and be sure that you have the correct configuration in the section. Remember, you have to put the matrix or sequential in the section if you want to see the results. And here you have the website that is so you for the HTML color codes. And here you can just click here, go and select the different colors. And yes, for the submission in this hour, in this half an hour, you have to submit at least one screen shot. So if you do more option sets, you can also send the screen shot maximum three. And it's so the data entry showing that one element with visual data entry for the option sets with the different icons and colors. So you will have to do something like this, sorry, like this one, and take a screenshot of this one and put it. That's it for me. If you need anything else, like a more documentation, it's also here. So you can type here, go to the documentation and see how it's done.