Still pretty new at this. Trying hard not to be the guy who avoids doing his own research first -- I've done the entire set of courses for Reactive Web Developer, but of course the lessons don't cover everything :) and I've spent a whole day trying to figure this out.
Here's what I am trying to do:
I have a REST call that returns a structure, including one element that is a list of people and their countries, like this:
{attributeA: "value A",... // some other stuffpeople: [{ Name: "person1", Country: "England" },{ Name: "person2", Country: "France" },{ Name: "person3", Country: "England" },{ Name: "person4", Country: "England" },{ Name: "person5", Country: "France" }]... // some more stuff}
What I want to do is to turn that list of people into a DataPoint list, grouped by Country with counts, to be used in a pie chart. I know that what I want to end up with is a list of elements that use the OutSystemsCharts DataPoint structure, so using the above example, I would like to have something like this that I can pass into the Pie Chart widget:
{{ Label: "England", Value: 3 /* and other elements */},{ Label: "France", Value: 2 etc. }}
My first impulse is to create an OnAfterFetch client action that does this transformation, with the list of people items for the input and the DataPoint list as the output (the goal here would be to assign the output to a local screen variable which would be the data source of the pie chart widget so that the page displays the pie chart), but I am having a great deal of trouble and confusion about how to make this happen. I first assumed that I would need some Javascript in the client action, but I seem to be limited to basic data types for the JS input parameter.
I am sure this is not as hard as it seems to me, but again I am just learning the low-code way of doing things and it does not come naturally to me yet. Am I going about this all wrong? Should I be thinking about the solution differently? Or am I on the right track but missing some important details?
Any advice will be appreciated.
**********************
Side question: can I use the DataPoint structure to create the new items? Something like:
//pseudocode!var Items;var Item = new DataPoint();Item.Label = ;Item.Value = ;Items.push(Item);//end pseudocode and side question
Thanks.
what you are still missing is knowing if the current team member's nationality is already in the datapoint list or not. You can do that with a ListIndexOf.
IF you find it, you can update the list by counter++ at the index instead of the current position. IF you don't find it, you can do a ListAppend.
See attached oml for an example.
Dorine
Dorine,
Spectacular! Your .oml with the example was exactly what I needed to learn how to do this! It seems I have some work to do learning the built in Server Actions! It's going to be a while before I am actually good at this, but you have helped me out a lot here, thank you so much. You can see from my flow that I get my data from the REST call, then assign the basic result to the first output parameter.
I am then using the GetTeamResponse data to build the DataPoint list (I now better understand how to use a structure to create a list that does not yet exist). I was even able to add a sort by country name after the ForEach so that my countries are in alphabetical order. The result is that now I can use the GetCountries DataPoint list as the source for data in my chart:
Thanks again for your help!
Hi Joseph,
There is no need to resort to Javascript for this type of thing.
Typically, you would consume the api method, which would hide all the json parsing for you and give you a callable server action with an output list of a structure.
In reactive, you do a fetch data from other sources on your chart screen. Inside that you call the api server action.
And here you have 2 choices.
1. Your fetch has output as list of api structure, simple assign. Then you designate that as the source of the chart, and right there in the chart properties you have to do the mapping.
2. Your fetch has output as list of DataPoint. You can still do an Assign of output of fetch to output of api action, and you'll be asked to do the mapping on that assign.
So it's a matter of choosing where you like to do the mapping, I personally prefer option 2.
In case 'mapping' doesn't mean anything to you yet : in Outsystems, you can, in some cases, assign or use structures that don't match with the expected data type, and in those cases, OS asks you to specify for each target attribute how it is determined based on the source attributes. You can even use expressions, so it is pretty powerful.
I didn't read all the details the first time. If you need to do some grouping, only option 2 is valid.
Instead of assign, do a Foreach, and add to out group if not yet there, otherwise up the counter.
Thank you for your responses.
I am already doing a fetch data from other sources to the get the data used in the screen. Other elements are being used in the page and the "people" collection is even being used to populate a table widget on the page.
So if I understand you correctly, I should do something like this:
Everything above the "for each" is what I had before your response. I have added stubs to show what the logic might be for a solution. What I am missing is how to actually accomplish what I want to do. I suppose I will need a second output parameter, but I am not sure how to actually implement the grouping and counting and adding of records to the DataPoint list I am wanting to create.
Thanks again.