Greetings and welcome to another OutSystems How-to Video. My name is Andrew
Duthie and in this video I'm going to show you how to work with JSON in an
OutSystems app. In this video you'll learn how to easily create complex structures
in memory from your existing JSON data you'll also learn how to serialize and
deserialize JSON within your application you might be aware that out systems
makes it easy to work with JSON data coming from REST API Zoar going to REST
API so if you go to consume a REST API or for that matter a soap web service
and you point to a rest end point out systems will automatically parse the
JSON data coming back from that rest service and create structures in memory
for you the scenario that we're talking about here is more of how to deal with
JSON when you're retrieving it from a database or some other source that's not
actually from a REST API
imagine a scenario where you've been asked to create an application based on
JSON data that's stored in a relational database the example that you see on
screen is a simple table that contains customer information that's embedded in
JSON structures within the relational database table itself we're going to
bring this into the out systems world and leverage it within an application
as a quick side note I actually generated this application using JSON
generator comm which you can see the URL here it's a nifty tool that makes it
easy to create complex structures of JSON data using some simple placeholders
and repeats
all right so now I've been service studio and I've created an application
working with JSON to demonstrate the procedures we're going to work with here
I've opened the application and to make life a little easier in terms of using
the external data I leverage integration studio to create an extension that would
allow me to access my external database that's sitting inside of sequel server
so I can access this by simply opening up my dependencies window typing in JSON
which I know is the name of my extension JSON data and selecting the customer
data entity once I've added this I can switch over
to my data tab and I can see my extension here once we have the
extension we can simply drag and drop it on to our flow and quickly scaffold out
a screen with a basic table records widget to show the JSON information from
that external table to keep things fairly simple I'm gonna
go ahead and make this accessible by anonymous users and we'll go ahead and
publish this and take a look at what the resulting table looks like
go ahead and open that in the browser and we can see here is our json
information so we can see it has information like name which is its own
structure with first and last company email tags and we can see there's a list
of accounts with the account type and the balance so let's go ahead and grab
one of these records and copy the text from that record what we can do now is
go into our data tab and under our structures area here I can right click
and select add structure from JSON and then I can just plug in the structure
itself and give it a name I'm going to call this customer and I'll go ahead and
add that structure what you can see is we have the customer which is the
original structure that I created it also has a name which is a complex type
which is represented as its own structure as is accounts which is also
represented as account item which has the ID the name and the balance so you
can see if we drill down into these we get the individual parts of that JSON
structure as complex structures within our application next we'll take a look
at actually using the JSON data to bind into a table structure by deserializing
that JSON data into our objects or structures
back in our interface tab I'll right-click on the main flow and add a
web screen we'll just make this an empty screen and call it customer
now I'm going to grab a table records widget and drag it into the main content
area and we'll add a title customers and now what we need to do is get our data
and tie that into the table records widget so I'm going to add a preparation
to my screen and in my preparation I want to return the data from the
customer data table or entity so I'm going to bring back that customer data
now I need to get this into a format that it can be bound into my screen so
to do that I actually need to have a local variable and I'm going to call
this local variable customer list notice that we've set the data type to a list
of the customer structure that in-memory structure that we created and if I open
this up you can actually see it's the same shape as the structure of that data
back in our preparation now that we've got the list of the customer data coming
back we actually need to loop through that list we're going to use a for each
for that and I'm going to start with the record list being the list that comes
back from there I'm going to start at 0 and I'm going to iterate through this
for the length of that list for each of the records in the list
I want to deserialize the record into an in-memory structure that matches the
shape of the JSON
so I'm going to find the JSON string which is coming out of my list and then
I want the data type to be customer
now what I need to do is add this to that local variable that list I'm going
to do that by using the list append Action server action so I'll connect
that the list that I want is my customer list and the element is going to be the
data that's coming out of the JSON deserialize customer object then I
simply need to link back to my loop to complete the cycle and I'm good to go
now going back to my screen my table records needs to know what it's going to
be based on and the source records of course it's not going to be the customer
list it's going to be or the it's not going to be the aggregate result it's
going to be the customer list because that's what's going to have the shape of
the data that I want now if I come over back to my structure and expand this I
can decide what I want to see on screen for example I can choose the name and
you can see it can do either first or last here and I do need to do a quick
correction here so I want this to be tied to the first and last name and
actually I can just customize this so that I have the first and last name in
the same column and we'll just change that to the name and we can delete this
column entirely and then we'll put the ID to the left so we've got our ID we've
got our name and we also add the company name okay so we've got three attributes
coming out of our structure we've bound into this local customer list a couple
more quick things we want to do again we're going to want to take the screen
and make it available to anonymous users again just for the simplicity of the
demo and then I'm also going to grab this customer screen drag it up onto my
menu block so that I automatically get the navigation and then we'll go ahead
and publish and test
so we flip back to our browser
reload our application now we'll see our customer screen we should have a list of
all the customers that are coming out of that table and so we can see the name
the company name and the ID so now let's dig into details on these items
so in most scenarios when we're working with detail information we want to link
that back from our table so I'm going to select the expression that's showing our
ID I'm going to right-click link to new web screen and we'll just call this
customer detail
in order for us to know which customer we're going to add an input parameter
and I'm just going to call this customer ID now because the data that I'm getting
is just JSON data I'm just going to pass it as a text string now I'm also going
to want a local variable and again I want that to be this time of the
customer type and note that it defaults to the type of that customer structure
then we'll add a preparation so that we can retrieve the data and again we'll
get the customer data and we're going to again loop through that data so we'll
have our record list we'll start at zero and we'll iterate
through to the length of that set of Records but this time we're going to do
something a little bit more complicated so we're still going to deserialize
so our JSON string is going to come from e get customer data customer info JSON
same as before the data type is going to be customer
and this time what we want to do is determine whether or not the IDS match
so I'm going to test if the data coming out of here the ID is equal to the
customer ID that's passed in if so then I want to go ahead and assign that
record to my customer object so I'm going to say the customer is then equal
to the data that's coming out of my DC realization process if that's not true
then we want to just loop back to the cycle until the cycle is done and then
we also want the assigned to loop back there so that at the end will come out
the end with a customer record assigned to our customer assuming that we have
one
now one thing that we missed along the way here is that our link actually does
have to link to a customer ID so we're just going to take that and select it
from the table records there
now inside our customer detail obviously we need some way to display our customer
so I'm just going to grab a form I'm going to drag it onto the screen going
to set it source record to our customer and then again I can just come in and
select entities or attributes rather that I want to drag and drop onto the
screen so I can take the first and last name the company and let's grab the
email I'm great so far so good now one thing is that this is actually
going to default to the customer form record ID as the variable I actually
want to point this to my customer variable and you'll see why in just a
second here so I'm going to just quickly modify these to point to the variables
and there we go so let's go ahead and publish this and take a look at how it
looks in the browser so now we're back in the browser we can see that our IDs
are now linked and if I click on one of the links we now actually see data from
the individual person there but what if I but what about if I want to see the
account information for this particular user well that's pretty simple too so
let's take a look at that back in service studio I'm still on my
customer detail screen now to add the accounts I can simply grab a table
records widget drop it on to the screen I need to set it to a source record so
what I'm going to do here is go ahead and get my customer and accounts and
we'll set that to the customer accounts and then I can simply open up the
account item structure and grab the attributes that I want to add to the
table and display them in the table records
widget go ahead and publish
switch over to the browser go ahead and
click back through again and you can see and we see the accounts that are
associated with this user we flip back over here again we can see this user
only has one account all right so far so good what if we want
to serialize the data from the form back into a JSON object well that's pretty
straightforward as well so to demonstrate this I'm just going to drag
a button onto my form and I'll set the label to serialize and its destination
I'm going to make a new screen action so to serialize pretty straightforward just
like we have the JSON deserialize we also have a JSON serialize action so I
can drag that into my action I'm going to have it serialize the customer record
that's why I bound my variables or my fields to the the properties from this
customer local variable and then I'm just going to pop up a feedback message
with that information so I'm going to set the message text to your serialized
customer plus JSON serialize one dot JSON so we'll just display that JSON
text and we'll make the message type an info message let's go ahead and publish
and take a look at the result
so if we go grab a customer
change the first name click serialize we should see that the name change indeed
did show up in our C realized content so now if we wanted to save this back out
or pass it into a web service we'd be fine to do all of that
so in this video you've seen how to easily take JSON data coming from say an
external database and turn that into in-memory structures that make it really
easy to bind those in to your UI elements in your OutSystems application
you've seen also how to serialize and deserialize json data and use that to
bind into UI elements before I go I'd like to remind you
please subscribe to our YouTube channel where you can find many videos just like
this one on our developer advocacy playlist
thanks for watching and hope you'll come back soon