KPI cards are used to dynamically display GIS data in a dashboard-like view within Geocortex Web. This data can be displayed via a search, performing an identify on the map, or directly from Geocortex Workflow. KPI cards can also present information using a custom Arcade script, allowing users to customize the experience even further.
In this Geocortex Tech Tip, we will show several real-world examples of this in action, and then walk through some of the available configuration options.
Video Transcript
“Hi, this is Paul Van Haaren, I’m the Technical Sales Manager here at Geocortex. Today, we are going to have a look at one of the ways that you can configure your Geocortex Web application to have that dashboard like feel using KPI cards. Let’s have a look!
So, as I said KPI cards are used in Geocortex Web to dynamically display data from layer fields when a selection is made on a map.
For example, when running a search or performing an identify on the map or even running from Geocortex Workflow.
I’m going to show you a few examples here first as I said then we’ll jump into the Geocortex Web Designer to see how these things are built. In this example, you can see on the top right-hand side here, these are the KPI cards themselves and they are sort of embedded inside of this frame here in Geocortex Web.
In this example here, we’re identifying survey control points on the map. So, this is horizontal, vertical control points.
You’ll notice here that as I pan the map, those values will change, and each time I pan the queries made, it updates those values. So, it gives the user an idea of how many points are contained within this current extent and use it in that application that way. Very cool example there.
I’ve got another example here as well with an application that we did with the City of Toronto. This is the same idea here. This one here, as we pan the map, we’re able to see these service requests and work orders values change as I pan the map. You can see that there.
The beauty with Geocortex Web is that you are able to design these KPI cards in any number of different ways. You’ve got a banner look here. In the previous example we had it in a frame, so Geocortex Web gives you that flexibility to put these things wherever you want on your application and design them as you see fit.
Here is the last example where we are actually calling the KPI cards from a workflow. I’m going to quickly run this Geocortex Workflow here on the left-hand side. This is an application that just basically runs a tally of PPE equipment (Personal Protective Equipment), in the LA County area.
I’m going to choose Santa Clarita. Once it comes up here, you’re going to see a list of schools. So, specifically schools that I can select. I’m going to choose the ‘Cedarcreek’ and when I do that you can see on the right-hand side that we’ve got KPI cards presented.
You’ll notice that there are different color values. I’ll jump into Geocortex Web Designer here in a minute to show you how these are designed.
Essentially, the colors change based on the number of equipment is in each of those locations.
So, if they are a little bit short, it’ll be turned red as you can see there. If they are good, they are sort of in the accepted range, then it’ll be more in the green color.
Let’s actually jump into Geocortex Web Designer to see how this one is actually built specifically. I’m just going to bounce back here. You can see all of the different components in this application. I’m going to scroll down to the ‘N95 Masks’ KPI card here. I’m going to open that up.
In here, you’ve got a list of all sorts of different configurations options that you can choose. What you want to do initially, is select a source. So, what do you want to actually display as the source value in your KPI card?
In this case, I’m going to chose ‘Covid Supplies’ as a value and then inside that attribute, I’ve got a field called ‘n95masks’ that I want to just generate a sum for. So, give me the total value of N95 masks for that specific school.
So, it’s displaying that there. We are going to come back to Advanced Mode, we’ve got another example to go in – you can actually specify some Arcade scripts that you can add into your application in the Advanced Mode, I’ll show you an example of that in a second.
Reference Type is, I’m going to show you an example in the next one as well, but it is essentially a way to present a secondary value based on your initial values. So, if you wanted to run some calculation based on the previous value that you selected or using the number that is currently there or run another calculation on top of it. For example, running an ‘Average’ or ‘Count’ or something like that on a secondary value display.
Again, I’ll show you another example of that in a second. The app colors themselves, you can choose to apply the branding of your Geocortex Web application inside your app or you can choose your own colors.
Here are the different sections of the KPI Cards itself. So, this is just simply the title, so you can see here ‘N95 Mask Count’ is the title. You can specify the size of the font and the value there as well. In the middle is where you are going to actually, in this example, display the value. In this case, we’re just using a replacement token indicating the value. Value is the number up here that we’ve calculated. Again, it’s a fixed point value. We’re just going to have whole numbers there. At the bottom, we just have static text that is just at the bottom there. Just pointing out the required values there.
At the bottom here, is just the conditions. This is where the colors come into play. So, if your value is less than 50, you’re going to get this red color here. So, it’s just a simple condition here to change the color of that KPI card based on the value that is presented there. Very simple example there.
You can see the rest of the conditions there. We’ve got some other expressions here based on if it’s between 50 and 100, or 100 and 150, or above 150. So, you can get a little bit creative with the expressions that you add here and display any number of different value types there.
Of course, you can change the size of the KPI cards as well.
Let’s jump into another example. This example we’re doing a calculation on the fly here. What this application does is that it calculates the average area of the selected buildings on the map.
So, I’m going to select a bunch of buildings there and in a second, you’ll see this KPI card up here. So, this is just the average building area of the features that I selected. Those building features that I selected on the map. I’ve got 9000 square meters there.
What this app actually does as well is that it gives me a secondary value basically showing me the difference of square area.
The previous value was 9000 something, the value that I’ve selected now is 7000 and it shows me the difference there. We’ve gone down 2000 square meters or so there. Just shows you the difference of your selection.
I can select something bigger and it will show me a green ‘Up’ arrow, showing that the value is obviously bigger. So, it’s a simple example, but you can imagine the type of applications you might have to show those calculations on the fly. Also a neat little trick: you can change the theme to show a different color there, if you want as well.
Let’s have a quick look at the configuration of this application. We’ve got our source, which is obviously the building layer, and here’s our editor here. Let’s just show a quick little arcade script that we’ve built here. We’re declaring some values, we’re getting the area of the features that we selected and then we are turning the average of the selected features there.
In the ‘Reference’ here, this is what we’ve looked at before as well, but in this example, we’re using the previous value. So, you’ll notice that we’re looking at the difference of the two values that we’ve returned. So, we’re interested in that ‘Previous Value’ and I’ll show you the condition that we are setting based on that reference type.
Let’s say that the value is greater than the reference. So, the original value is greater than the referenced value, then we are going to get the difference of those. Return to absolute value, we don’t want to return a negative value here. That is the simple calculation there, we do at the bottom here to return that. Obviously green is going to be our color that we showed there as well. We can see that if the value is less than the reference, then we do the same difference calculation and then return to red text.
So, pretty interesting to have a different look at the conditions and the different ways that you can present these values. It really jazzes up your application and presents the values in an interesting way.
Hopefully this was useful for you and have yourself a great day!”
Want to learn more about Geocortex Web or see it in action? Click the button below to find out more or to schedule a demo!
Contributors