How To Send Data To My App (Including Caching Introduction) Xmpro Lunch & Learn
This is a recorded version of XMPro's weekly live Lunch & Learn sessions. To join us live, sign up at https://xmpro.com/go/lunch-learn/
Transcript
hi all and welcome to another lunch and
learn
so today what we're going to go through
is how do i send data to my app
we're also going to touch on a brief
intro into caching
we'll uh we'll go through that in a
future lunch and learn as well
so today we're going to be talking
around apps and and data
so
first things first is what is it
apps have two modes where they can
essentially render data to
to the end users the one is what i would
call static which means when you design
the app it'll appear there the second is
what i would say is dynamic
so information that's going to change
information that gets calculated
information that could be from an
expression etc so static values are done
at design time
dynamic value is either provided now
there's a few mechanisms of how you can
provide it we'll touch on both of them
one is through a data stream
and the second is a connector inside the
app designer
we'll also touch on caching so when you
do caching in a data stream
it is how often and how much data should
be cached that is made available to the
app
when it is rendering
some of the concepts we're going to
touch uh example action agent that'll be
the first one with inside a data stream
the second is going to be connectors
inside the app designer
we'll also touch on briefly caching all
or per an entity
some basic requirements that you're
going to need
it's going to
require access to the app designer
access to the data stream designer and
you need a basic idea of what data is
that you're looking to to display so
what information are you looking to
present to the screen
and where do you want it to be how do
you want to access it is any filters etc
skill level for this we're still in the
beginner friendly area
it can start to go into the intermediate
area
as well
so first area is let's jump into the
actual software itself
so
before we can actually start tying data
to to an app let's go and create
ourselves a new app
we're just going to call this
lunch and learn for today
we're going to put it into
my sandbox
and we're going to keep everything else
as the default
now if i go into this actual app itself
and i try and launch it it's going to
not give me anything
it's going to be bare basics there's not
much information in here
as well
now what i can start doing is i can
start going through here and i can start
configuring information
so let's say i want to to actually
create
some additional columns
i can do that
if i want the first one to be
asset information i can just double
click and change that information there
if i now want to start bringing in um
a little bit more
like dragging a box into there
i can now go back and from layouts i'm
going to drag in a stack layer and bring
that into the other side as well so you
configure your form exactly the same way
as you would have previously
however now what you can start doing is
when you start bringing information into
the screen here
so i could very well call this asset
number
and if i go and duplicate that and i'm
just going to change the flex so that we
go from left to right
so i can see that
i can come into the asset number
and i can rename it from a static
perspective and if i go and render the
screen
you'll see as asset number will come
through so you can very quickly create
static information on a screen however
that's not very useful
most of the information you want to have
changed so you need to pass this
information through to the form
so that you can actually access it and
make it available
so we're just going to go back into the
edit mode for this particular app we'll
come back to to the app itself
so the first area of where datic is
made available to an application
is inside the data stream designer
i've got an example
here but i'll show you how we can
actually create one
so for this particular example
we are using the event simulator to
generate some data so we've got specific
data that we're interested in
we are then creating
some asset numbers we are rounding it to
make sure that when we get to the ui
side that the information is consistent
two decimals three etcetera
if you don't round here
you can still round inside the app
designer
then you start going into
the expressions on an actual data source
we'll start covering that in a in a
future session as well
we're then going to broadcast and then
we publish to an app
however what i'm going to do with this
example
is i'm going to
clone it
and we're going to configure it
for different bits and pieces
so for now what i'm going to get rid of
is the last two pieces to my data stream
it does not matter where your data is
coming from there's a lot of different
listeners of where my information coming
from to the point i made earlier
you need to have at least an idea of
what data are we trying to present on
the form
what shape should that data be and where
is it coming from do i need to join data
from different data streams etc
if i were to run this particular data
stream now
and i go into my live view
and i bring the rounding and i bring my
generate data
up
you'll see my values will come through
if i expand that
i can see the generate column and i can
see the rounding column so my data is
flowing through my particular data
stream
however it is not available
on my upside
um i can't actually view it or see it
now how i know that is i'm looking for
lunch and learn from a data stream
perspective so if i go back to the app
now
how we bind data to an app
is on the page data side of things
if i scroll all the way to the left
you'll see there is app data on the
application level
the page level allows me to use data
sources that have been defined
data sources get defined at an
application level
now do i have to remember every single
time to scroll left and go to the app
data to create them no you don't
if you've forgotten
or you haven't got that for yet you can
click the plus on the data sources side
of things
it's going to ask you for a name but
you'll see in the connection
it'll give you some options in there
however if the one you're looking for is
not available
in the section here you can actually
click the plus and it'll bring up a list
of a lot of different connections that
you can actually use as well
so how do we actually do that
if i go all the way to the left
i'm going to go and
delete these two
let's say we go and get rid of those and
they're not available
if i want to add a new data source to
this page i go to the page data and i
click the plus
so what we're doing is we're trying to
bind a data source to be able to be used
on this particular page
on the right you'll see connections we
have nothing it says no data to display
there
if i click the plus it's going to give
me some options so i'm looking for the
data stream we're going to give it a
name
and everything else we can leave as
default and we can click save
now what will happen is under the drop
down you'll see i have a data stream
that is now available
so what we've just done there is instead
of me scrolling all the way to the left
and clicking app data to add it i'm able
to add it at the page layer as well
very handy if you
haven't done it or you only get to it
halfway through the app page when you're
configuring it versus having to remember
every single time
we can now give it a
name at the top
however if i go into entity
and i search for lunch and learn i don't
get anything
nothing's available here
and the reason for that is
the only data streams that will appear
here are ones that have been configured
to make its data available to a data
stream so what do i mean by that
under action agents if you scroll all
the way to the bottom
or you can type in the search at the top
and it'll filter the list view you need
to drag on an xmpro app
and add it to your data stream
so i'm going to unpublish my data stream
and we're just going to save that so the
first thing is you need to tell
the
data stream you're going to be making
your data available
to the app designer so that's step one
step two
make sure you give it a name that is
appropriate the reason for that is when
you come into the app designer here
it's going to
register those different endpoints and
you can have multiple
so i can have one in here as an example
so let me say i have a broadcast
and
i send that to the broadcast
and my first value
comes to that x and pro and then if i
search for x
again
now we put that here
i could have the next one go to the same
you can have multiple
of these on a data stream
why would you want multiple
if your data stream is doing different
calculations on the data you may want a
certain section of that to be in a
certain area on the app you may want the
results of the calculation in another
area of the app
so there are reasons why you want to
have
duplicate
example apps on a data stream
it'll become obvious when we go into a
lunch and learn around caching
and making data available to charts why
you would have to
but just remember you can have multiple
of these
on a data stream
the second thing is
if you double click that
you need to configure it you can't just
drag it on and leave it there is
configuration that you do need to do on
the xm pro app first thing is
where is the url this will point to the
app designer url
integration key this will point to your
app designer key as well
if you scroll down
you can ignore the cache settings for
now it's going to ask you for an
identifier so what is the identifier for
this data flowing through
typically it is an asset number
um
but you have flexibility to use other
fields as a identifier as well
if i go in there i can pick asset number
it's also going to ask you what's my
primary key 9 out of ten times it'll be
an asset number as well
if i go back to the second one
and i do the same thing there
we're going to configure both of those
and i go all the way to the bottom
identifier is going to be asset number
and primary key is going to be asset
number make sure you click apply at the
top
if you don't you'll notice if i go back
to the first one it hasn't saved my
changes
very important to remember that
so we go into the first two
we're going to scroll down
we're going to fill the asset number in
and select it
make sure you click apply to persist the
changes you made and then make sure you
click save or ctrl s on your keyboard to
save the data stream
now if i go back to my
my app that i am configuring
and if i try and
close that out and i go back to the data
source side
and we select data stream and in here
we're looking for for lunch and learn
so now if i expand that
it'll show me my lunch and learn coming
in there as well
for it
so previously
it was not available here you can see i
have availability to pretty much
everything that has an end point
for all the different data points coming
through
so if i go down to my
my examples they'll appear in here as
well
however
what we forgot to do on this side is we
forgot to name them appropriately
now because we haven't named them
appropriately it's going to be quite
hard when we get to the app side to make
sure we're using the correct one
as i mentioned you can have multiple of
these on a data stream so it's good
practice to make sure you name them
appropriately
for now we're just going to say
then data to app and i'm going to leave
the other one we'll come back to this in
a future lunch alone as well make sure
we name our broadcast so that
we understand what this particular data
stream is doing
if i go back into
the
configuration for
for this
you'll see there's a caching section
here
what the caching section here is saying
what's my initial cache size
so how much data do i want to keep in
cash
and then you have a few options
the first one says replace cash what
that does is
if my cash size is 20 and i have
21 items coming through my payload by
the time it gets here it's going to drop
off the first one and add a new one at
the back and it's going to keep doing
that
as the data is coming through the data
stream and being made available
if i tell it replace cache what that
does
is any new payload that comes all the
way through to this endpoint replaces
the prior cash payload
so
if you have a record that only comes
through let's say every five minutes but
your data is flowing every minute
what will happen is if you were to set
replace cache you could end up with a
situation where in that four minute
window you might have no data displaying
on your actual app side itself as well
so replace cache will allow you to
replace everything every time but just
be aware if your data comes in at
different intervals for different asset
types as well
the other one is cash for entity
cash per entity allows me to make use of
this cash
but per
the identifier that we've got at the
bottom
if i was to select that what this is now
saying
is my cash size is going to be 20
per asset number
so if i have 10 assets and each of those
has
records coming through i can catch 20
percent so suddenly my 20 has gone up by
a factor of 10. so my cash size is going
to be 200 in that scenario
the defaults
is everything unchecked
so replace cash is unchecked and cash
for entity is unchecked as well
if i run this now and i go to live view
i can now
open up the send data to to app and we
can keep the top one
so generate data is coming from my event
simulator
send data to app is what's coming
through my endpoint here so step one
before you can get data into your app
designer is to make sure do you have an
excel pro app agent on your canvas and
have you configured it correctly
now we can go into our app designer here
and i can actually go into my data
source
and i can say we're going to connect to
some live data
and in here you'll see i have access to
a lot of different
areas for it
if i go back and i have a look at
the launch unknown
just rename that differently
here
and it's in display data so let's
unpublish that
and let's republish that
so if i go down in here to
my display data
and i scroll all the way down
i'll be able to see there is my lunch
and learn
and there are my two fields
that have been bound
this is why naming is important if you
were to leave them both as x and pro
underscore zero x and per app underscore
one x and pro up under school two
you won't know
which of those endpoints are the ones
you're looking for which of them has the
calculations you may have done which of
them has the raw telemetry data and
which of them maybe has data with a
different caching option that you want
to use for charts as an example
if you haven't named them appropriately
you're going to struggle
getting to this point
especially if you are sharing this data
stream with other users
and they are using them to consume the
data but they're not necessarily fully
across how the data stream functions
where it gets its data etc
so the first thing we want to do
is we select
the send data to the
app itself
what you'll notice it'll do is it
interrogates it and gets the primary key
now what you'll notice is i made the
entire configuration
maximized and the reason i do that is
that i can see everything on the screen
to do that
you can double click the header
or you can click the maximize option at
the top there
this is especially useful if you have a
lot of data streams to go through that
have been bound to the example app
connector
and you want to find what you're looking
for
so it's interrogated the configuration
and it's automatically brought in the
primary key
as you've configured it down the bottom
here so if i go down here remember we
set the primary key was asset number
primary key is important over here
for the data when you start doing
advanced data
manipulation and advanced data work in
the the app designer
the next thing to make sure you tick
is when you're accessing live data
make sure you tick live data updates if
you hover over the eye it'll tell you
what it actually does but the live data
updates is what enables you to get the
record constantly
it allows you to automatically update
the values without refreshing the page
there are some
connectors for instance if you're
connecting to
sql
and the options not enabled on sql you
won't get this option here
but when you're connecting to data
streams there's no reason for you not to
take this option
um it's also
one of the first things i suggest people
check when they're saying well my data
is not flowing through to my app
even though i am getting data in the
data stream first thing to check and
make sure is have you enabled live
updates um here
we're going to click save
and as soon as we've done that what
you'll notice is data sources here has a
new option underneath it
it's got the name that we've defined so
again make sure the names you're using
inside your app here
make sense
and if someone else wants to use them
and look at them make sense to them as
well
we bring in all the data fields
they're also bound to what their data
type is so you can see
their decimal strings date times etc
there is an area for you to calculate
and create expressions we'll cover that
in another lunch and learn as well
so if you're not sure what fields i'll
be made available what can i actually
view and read
just go to the page data
expand the data sources and you have
access to the information here
now what we can do is we can actually
bind this information to the
element we're looking for
again if you're looking for a data
source that's not here so let's say we
don't want to bind this to live data you
can click the plus
brings you to exactly the same place
so you do not have to go back to the
page data and click the plus here every
time to add a new data source you can do
it from within the area that you're busy
with
pull the information in
once you've done that it'll refresh the
drop down for you here
close that out and we can now select the
data source as soon as we've done that
you'll see we get a yellow border that
comes around
and if i go into the text
and i go to the appearance i can now
click the a
which is static
it then turns into a dynamic and now i
get a drop down this drop down is now
bound to that same data source so now i
can actually bind it to the asset number
field coming in
if i was to save that and i run the
you'll see the asset number now is being
passed through from the actual app
now what i can start doing is if i go
back and edit the the app
i can actually go through this
particular box and i can duplicate that
and this one here we can say is reading
number
and i can go into that field
go to its appearance
and change it to reading number as an
example
we can now save that
now what you'll notice
is the number keeps going up so the live
data
the checkbox that we selected is what is
enabling this to constantly change its
value without me having to refresh the
screen
there are areas where you get i would
say static type information coming
through
but
without taking that you would have to
refresh the screen every time to get
that information to come through
the second area where you can actually
configure it in a
an app
is if i go to the app data side
they are
specific
um
[Music]
sql
there are specific connectors that will
allow you to connect directly to data
sources as well
each of those is available
for you to connect as you need to
the primary one that gets used is the
data stream connector here
but there are other connectors that do
not require a data stream and you can
connect directly to the systems
the the only
functionality that you might lose by
doing that is the live view option
so again if i click the pencil next to
my existing
data stream here
this option might not be supported if
you connect directly to the systems of
choice
it's not all of them supported which
means if you are connecting to those
systems and you do want that data to
refresh
the the screen will need to be manually
refreshed to do that
as well
so just to recap
if we come back to
the data stream so where's the first
area that i go to to connect data to
my app
inside a data stream
what you want to do is under x and pro
agents right at the bottom you'll see
the axon pro app
that is the key that allows you to
connect it
to a app and make it available
make sure you name them appropriately
otherwise when you're configuring it on
the other side you might have some
problems trying to remember which one is
for which one
we'll go into a lot more detail on
caching options in a future lunch and
learn as well for now
you can use the the defaults
to return the data coming in
step one is done in the data stream step
two you do in the app designer side
again you can scroll all the way and at
an app data level add a new connector
or you can do it at the page level
so page level is where you're creating
an instance connecting to a specific
data stream connecting to a specific
table
um or whatever system it is that you're
connecting to
the plus will walk you through the steps
so if there's something in the
connection that you know is available
but you can't see it here click the plus
there again and it'll walk you through
that as well
once you've selected your items make
sure you remember the live data update
section
otherwise what's going to happen is your
information is going to stay static on
the screen
and you're not going to get the
information constantly refreshing itself
coming through as well
you all for attending today um
how do i bind data to to my app
most of it gets done through a
data stream using the app agent
there are ways to do it directly through
data sources in the app designer you
however will lose some functionality
there as well but it is very possible to
do that as well
thank you again for attending today's
lunch and learn hope to see on some
future ones
Last updated