 Okay. Thank you. Hello, everyone. My name is Komuna Ibrahim. I'm a developer from Hizpah, Western South Africa. So this morning, we will show you our report, the Builder app, and we'll show you how it's worked and how we did it. Okay. So we will present you a little bit of the apps and after that you will jump to the demo. Okay. So what is the report with the app? Okay. Please, do you see my screen? Yes, I can see it. See the problem. Okay. Thank you. So the report with the app, it is an app that allows for generating a report based on aggregate or tracker data. So the user also have the ability to design their own form using a HTML editor. So that means if you want to have like a report in which you want to display some information, with this app, you can create this report and you can display the data from aggregates or data from tracker. Okay. So you have also the ability to create your own reports or make a HTML outside of the app and come and paste in the app and make the configuration. You can also customize the legend. So you can decide to display the result as image or as color or as label. So it is a legend. So you have also the possibility to send SMS to a person. And you can also print your report in PDF file. Okay. So I'll show you some example. Okay. So that is an example for tracker case. So this example is a student card. So you can see in this student card, we have the information of students. We have his name, his surname, date of birth, sex, and so on. And even the school name. See. And you can also see we have the place where you can create, design your reports. Okay. So that is an example of a tracker data. So let us continue. This is also another report. And there you can see we have aggregates data there. And it is, the things there, we can see we have the image there. That is because rather than display the value, we have decided to display image. So the image is a legend. So as I already said, you can display image or color or label. Okay. You know with me, sometimes the image is more easy to understand. So if you show this report to another person, they can quickly understand what this report means. Okay. So that is the case of aggregate data. Okay. So there we have the legend part where you can contribute or create your legend and use the created legend to display in the report. So there you can see some example of the legend creation there. Okay. Okay. Let us continue. There also, it is where you will create your SMS template. Because if you want to send a message to a student, you need to send something. So there you can configure your message to send. So in your message, you can decide to insert some attributes. So the app will make an interpretation before sending the SMS to students. Okay. So that is a little bit a presentation. So we will go into the demo. Okay. So before the demo, I don't know if someone want to have the question. No questions are in yet. You can continue. Okay. Thank you. So let us see. Let me refresh the page. Okay. That is the interface of the reporter builder app. So you can see at the left side, you have some menu there. You have a report, the current menu. We have a design menu. There you will create your report. We have a legend menu. There you will create your legend. So I will show you how you can create it very soon. So we have also this menu, SMS config. There you will create your SMS template. Okay. So quickly, let us come back on the report and show you what I already said in the presentation. So there, if you are there, that means you already created your report. Please. Someone was unmuted. You can continue. Okay. Thank you. Okay. So if you are in this page, that means you already created your report. If, yeah, you already created your report. So you just need to come there, select your report. For example, let us take a student card. Okay. You select your report like that. And now, first of all, you can see the report there. Now you will select the program. So you can see you have just one program. It's because when we are creating our report, it is just this program. We are used to configure the reports. So automatically, the app detects the available program in the report and display it to you there. Okay. If you have a more than one report, a more than one program in your report, the application will list these reports to you there. Okay. So you will select your program like that. And now the organization unit, there it is where the app will fetch a T. Okay. In our case, I will select Gambia. Okay. Like that. And okay. Now we will click on this bottom to search all T like that. Okay. We have a lot of T, but you can also filter the students. Let me close this. Okay. You have this option search by attribute. So if I select this, I can open like that. Okay. And I can select the attribute that if I select one, two, three, at the top, you can see you have the field there. And you can enter your texture in the field there. Okay. So in our case, I will search the students by just a surname. Let me remove these two attributes and keep just a surname. Okay. And let me search. Like that. I know you will click on this button. Okay. No, it is not the right. It is by first name. Excuse me. Okay. Okay. Ibrahim. Like that. Okay. Yeah. You have a one T and at the end of the table, you can see this bottom report. So you need to click on this button and they will populate our report for us. Okay. In the report, you can see the image of Ibrahim. His surname, his first name and so of sex, class, and so of. Even though he's a school name there. Okay. And there before this bottom, you can send SMS. Okay. If I click on this bottom, you can see no SMS template configured. That is why I, that's what I already said. You must create the SMS to send to these students. So the SMS or the app will use the attribute phone number to send SMS. Okay. So if you have the number in this attribute, so the app will send to this number. Okay. So let me show you quickly the SMS template. Let me duplicate this page like that. Okay. Okay. Okay. There. This menu, SMS config. There you can create your SMS template there. Okay. For example, you can see Halo. Okay. Or you can also write or customize your SMS outside of this application in HTML file. Okay. And you just need to come there and paste your HTML file there. So for example, let us write like that. Halo. I will create this spam quickly like that and put maybe send him, send him like that. Okay. So point that you design your template outside in a HTML file and you come and paste it like that. You will click like that. You see Halo, send him. If you click there, you will select the attributes. Okay. First the program. Let me take this. Okay. And now the attribute. We have first name or surname like that. And if you click add, so they will replace our value like that. So and when you are, you will send the SMS, the app will replace this attribute by the surname of our student and send it using this number, the full attribute number. Okay. That is the SMS part. So of course you must contribute first the gateway in your instance. Actually, we don't have a gateway configured so we can't send it. Okay. So let me show you quickly how you can design. Oh, let me continue first. Hello. Yeah. You will go on for a second. Okay. Sorry. So let me continue with the aggregate example. Okay. Let me duplicate this page again. Okay. So again, let me take this report. This report. So it is an aggregate case. Okay. In this report, you can see we have a lot of information there. So there you must select the period. But first you need the period type. So if you click, you will click on this thing. You can see we have a three type there daily, monthly and yearly. In our example, let me take yearly. Okay. Now you will select the period. For example, let me take 20, 20. Okay. 20, 21. Like this. Now you will select the organization you need. Okay. You will select it like that. And you see the organization you need three. Let me search I'll be on like this. Okay. I'll be on. And you need to click on a cable Now you will update the information like that. And you can see our report is filling. Okay. Okay. So there you can see we have image. So at the left, left side, you can see we have the value. But there in the table, we can see we have the image. And this is a different image. So each image have his owner's invocation. So I will also explain you very soon. Okay. So that is the aggregate case. Okay. And so now you can print the report by clicking on this button. Print the report. Okay. And it is a PDF file. If I could save and you can give the name and save it. Okay. Like this. Yeah. Of course. Okay. So let me also show you another report where in which we can have all case. So the legend a the color, the image and the label, because I always said in the presentation that's for the legend, we can have image. We can also have color and label. Let's me for example, let me take this report. Okay. This report. Okay. And let me take 2020, 2020, like this. Okay. For the arguments, let me take a come here. Like this. Okay. So what will happen there? So we have this, this place, it is, it must be a color. This must be image and this must be label. Okay. Let me generate the report. And you can see if you decided to display rather than image or value, the color, you will have it like this. If it is image, you will have it's like this. And if it is label, you will have it like this. So very soon, I will show you how you can create the legend. But for now, suppose that you already have a legend and what that is the results. Okay. And the update at the top, we have the dates there, the dates, the selected dates. If I select the, for example, 2019 and update. Okay. You can see the color has changed. And the period also. Now we have 2019. Okay. That is the example. Now we also have something. If I take 2020, 2021. Okay. And I update, you can see a normally displayed. We must have the image, but we have the value. And we have got this one. You try to display some image that has not been configured for the selected periods. So it is because in the legend, I didn't configure it. The image for this legend. So I will show you very soon. So let us quickly jump to the reports, how we can create our reports. And after that, you will come back on how you can create the legend. Okay. So to create the reports, again, let us duplicate this page again. Okay. So it's this menu, the design. Okay. We have the list of the report there. Okay. Let us, if you want to create a new report, you will, you need to create and you click, you need to click on this button, new reports like this. Okay. And there you can design your reports like this. So you can put the test name, maybe say name. And there you will select your value. So you can also, because rather than create your report using this builder, okay, you can create it outside of this app. So in the HTML file, you customize very well your report and you come, you click on this icon, you paste your HTML code there. And automatically, this builder will interpret the HTML. Okay. So let me close this and show you already a report. So let me take this report you will see. Yeah. This report, for example. Okay. So we have this report. Okay. If you want to insert data, okay. For example, you want to insert data, you will suppose that you are creating your report. Oh, you already create your report outside and you can paste it there. Okay. You will select in the place. Okay. You will click on this button. So there, you will select all your elements that you want to use to populate your report. Okay. For example, let me select all. Okay. Like this. Okay. And you will close this pop-up. It is just to select the elements. Okay. Now, at the right side, you can see you have a lot of session there. And you can see you have data elements. There is some list there. We have indicator, some list there, data set also. Okay. Okay. So there, you must select now your, your element. Suppose that there at this place, I want to insert a data element. Okay. You must click on the place where you want to select, you want to insert the element. Okay. Now you will click on the element like this. Okay. Now we have a new pop-up there. Now they ask us to select the arguments. Okay. You will click on this field. Now you have some list there. We have first the current organization unit. Now we have something like parent 1, parent 2, parent 3, parent 4. So this is a dynamic. So first it generates it based on the available organization unit level. So that means if you have more than four organization unit level, they will generate using the number of organization unit level. Okay. So you must select your organization unit level. So for example, I will select this current organization unit. So what does this mean? Current organization unit level mean, no, it is not level. Please, excuse me. It is organization units. So that means if you select this, let me show you there. Okay. For example, okay. If you select like this, you see in this case we have selected Gambia. That is the current organization unit. The selected organization unit. It is the current organization unit. Now if you select parent 1, that means if we come back there, when you select your own unit there, the app will go up one time and take the organization unit. Suppose that I take Albion like that. Okay. This. Okay. The parent 1 means the app will go up and take Albion LBS admin. This. You see. Okay. Now the parent 2 mean the app will go up two times. Okay. First time and second time and take Banjul for us and solve parent 3, parent 4, until parent 4. Yeah. Okay. So that is the syndication of the parent and the current organization unit. Okay. Suppose that in our case you want to put a data for this tool for the selected organization unit. So in this case, we need to select the current organization unit like that. Okay. For a moment, let us keep this selected or this field. I will come back it soon. Now we have the way we want to display our result. So we have value and legend. If we take value, that means let me come back there. Okay. That means we will have the result like this. It is not a legend. It's just the pure value which is come from the result, our result. Okay. But if you take the legend, that means you will select your legend. Of course, that means you already configurates your legend and you just need to come and select your legend. Okay. For example, let me, no, for example, let me take this. Okay. And really click on okay. Okay. You see, you have some label there. There's the elements and the organization unit. It is the code which is displayed there. Okay. So that is what we are done there in this report. So let me show you for a legend. Suppose that there you want to display a legend there. Okay. I select the place. We select the elements. We select parent one or parent two. Okay. Let me take parent two for example. Okay. Now there I will select a legend. Okay. I click on legend. And now you will select your created legend. Okay. Suppose that is this legend. Okay. Now we have a new field there. Choose the legend to display. Okay. If I click there, you can see we have color, we have label, we have image and the pie chart. So let us leave a pie chart. Okay. And just keep the tree first. Okay. We have color, label and image. So you will select one of them. Color, for example. And you will click on okay. Now you see the display. We have the elements. We have the organization units code there, parent two. And now the name of the legend. Now behind how it works, they write it in HTML attributes. Okay. So I will show you also it very soon. And that is the case of a pure value and a legend. That we have done in this report there. Okay. There we have selected the elements. You have selected the organization units. You have selected our legend. And now the legend type. There it is color. There it is image. You can see image. And there it is label. Okay. That is what a that is the result we have there. Now you have also the period. Let me show you for the period. Okay. Suppose that you want to insert period. Let me take just one case, one table. Like this. Okay. I click on, I click, I will select the place where I want to insert the period. Okay. Now let me close the section like this. Okay. We have this section. Other elements. If I open it, you can see we have organization unit level. Hey, sorry organization unit name and the dates. The name means the school name. And this is the selected dates. Okay. So what we have there, you have the selected date there. Now you just need to click in the place. You select the elements like this. Okay. The dates. That is what we have done there at this place. You just select the place and we select the elements and automatically if we come to generate a page, we select the needs element there and we click on the generate. You will have our period and other elements. Okay. You see. Okay. So let me show you now how you can create the legend. Okay. Okay. So let me duplicate again. Let me reflect this page and show you how you can create the legend. So quickly, it is a legend menu. Okay. You will need to click on this button, new legend like this. Okay. Now you must create like a legend sets. Okay. First, let me take like this. Okay. Let me select. So you might select the start and the end. The end is optional. So I will explain you why it is like that. Okay. Or what does it mean? Okay. So for example, let me take the 1st January 2022. 1st January 2022 like that. And the end, it is December. Of course, 2022 December 31 like this. Okay. We have the starts 1st January to December like this. Now you will save the legend set like this. Now you need to create the item. Quickly, you will click on this edit like this and you will generate the item. It is the same thing like the what we have in GHS 2. Okay. You will select the mean value and the max value for example 100. And you will select the interval for example 4. And you will click on the generate legend like this. We can see the generate as an item. Okay. And now you will edit each item like this. Okay. Now we have the name. Of course, you can change the name. Okay. Now we will select the image and the color. For example, I will select this quickly. Okay. Like this and this the color. Okay. After that, you just click on this. You see, we have the color and we have the image. It is the same thing for others. So let me show you existing legend and I will explain you very quickly. Okay. Let me take this legend, Abraham legend. Okay. Like this. Okay. Now there you can see we have just a start date. But we don't have the end date. That means, so if that means if we have the legend like this, so let me first explain this. You will understand more easily. Okay. The first the start date and the end date mean when we are there. Okay. We are there with the period. The app will take the legend corresponding to the selected period there. For example, in our case, I select 2020 to 2020. That means the app will come there. Okay. And take the legend, this legend set 2020. So the 2020 January, the first January of this year and the 31 December of this year. They will take this period set for us. If I open it, you can see that is the item. Okay. So you see the way how we got developed is because the app selects the appropriate legend for us. Okay. So 2020, we have this color. All right. And some information there. Okay. And there, let us take 2020. Okay. Okay. So no, it's not the right legend. Sorry, it's not the right legend. Okay. This 2021, for example, no, sorry. I am lost. Yeah. Let me refresh the page. Okay. Quickly. Okay. I select the report like this, the period. Okay. The organization units like this. Okay. Let me take this period. Yeah. This period. Okay. Now let me come back there. Okay. It is this legend. Okay. It is this legend. Yeah. Yeah. It is this. We can see you have this image. And if I come back there, okay. There we have this image there. If you can see, you have also the right color. You can see also the right color there. That means the app takes the latest legend 2019. You see, if I select another period, 2020, like this. Okay. The app will take this period for us 2020 and make a history using the item on present there. Okay. This period. You see, that's where we have there. You can see the image and the color. Okay. And the label. It is bad. If I come back, it is bad. Okay. That is the specification of this kind of period set. Now for the first, the first one which has not have the end dates. That means the app will consider from the start date until now. That means if I select, okay. For example, if I select 2020, 2023, okay. Like this. Okay. You can see in this legend or in this period set, we don't have 20, 23 legends, but we have our results there. It is because the app will consider this period until today. So that means if you don't have the end date, automatically the app will consider the start date until the current date. Okay. So quickly, let us go to, so the time also. Okay. So quickly, let us go to the data store. Okay. Quickly. Okay. So there it is the data store. I want to show you how we, we insert data in data store. Okay. Let me open. This is the data store key. Okay. There we have this key, the legends. We have some list there. We just have the name, the ID and the period there. But you can see we have a lot of key there. Legend underscore some ID there. Okay. Some ID there. Like this. So you can also see we have the image as base one card. If, when you, you are configurates your, your, your legend, the, the image is storage as base one card string in data store. And each key corresponding to each elements for the legend or for it for the reports, you see, you have also for report there. So you can see we have this prefix report underscore our legend underscore, you see. So each item is storage as a new key in the data store. And we have the list self there. So, and so if we come back in there, for example, in the design part, we just get the list from this key. This report, let me show you the report, this key, the report. We just have this list there, but the content, we get it's there. You see. Okay. So quickly let us, let me show you the tools you have used. Okay. So for the tools. Okay. So we have a user fetch and assures. So quickly, let me show you the source code. Okay. Okay. Second. There, for example, there. Okay. Let me open the first, this first function, do you see the screen? Maybe I cannot zoom it. Yeah, we can see it. That's indeed a little small. Yeah, that's perfect. Okay. Okay. So in our code, you use a assures and fetch for our request. Okay. If I'm going to this function, you can see, we have assures for the request. So that is just an example of our request. Okay. So you can see we have also this, we put our key in this file. Okay. We put our data store key there and also the app name there. And we use it in our function, this function. We use it like that. You see. So I want to also notify something in our code stretcher. You can see we didn't have a lot of code there, a lot of file there. And also if I take this file, app.js, we have a lot of code. It is because in the past, in the past, at this time, we, we were, we were need to, to deliver this app very quickly. And the delay also was very small. And also the idea it was, it was a simple idea. Okay. That is why we have begun with this way. That's why you have begun with this way. Now during the timer, the, the idea and the feature was growing and until now. So that's why we have a lot of code in one file. And you can see we didn't have a lot of file in the, in the project. So we plan to the next version to speak to the disk code to make it more light and more optimized. And also we can see we didn't use the, the access to data query. It is, as I always said, in the past, the idea was very basic, very simple. That's why we just take this way to develop the app. So we, of course, we have the link, our repository link. Okay. So I, I will show you the link. Okay. So let, let me go into the link. Let me copy the link. New tab. Okay. Like this. So there is our repository where, where you can, you can see the source code. Okay. So quickly, let me continue. Okay. Okay. So our UI component. So you are using some component of GH2. Okay. And also and design. So for and design, we are using it. Let me show you where we are using it quickly. If I'm come back there. Okay. This component, this organization, you need component three. So it is on design. And also for the legend part, you see the way where we, we are create this component, the period component, it is also also on design. It is because, so the access to, the access to have the period components, but it's not easy like for Ant. That is why we are using, we are using Ant for these components. Okay. So quickly, we have also used the red color. And you see how we are also insert the color. Okay. If I'm come back there, this, this, yeah, this color picture. So we have used the red color to build these components. Okay. So quickly, we are also use a day is just for our data formatting. Now our builder, it is a summer notes. So our builder, this builder, it is summer notes. Okay. And also our icon, we are use a red icon for our icon. So the time is very, okay. I think I done. If you have question, thank you.