A deeper dive on advanced View Designer configuration [Geocortex Tech Tip]

Do you need to configure straight-line diagrams and alignment sheets quickly and easily within a graphical interface?

The Geocortex Inline View Designer is a web-based interface that lets you create interactive straight-line diagrams and alignment sheets, allowing you to present your linear referenced data to your users in a dynamic way.

In this week’s tech tip, we’ll give you a deep dive on some advanced configurations that you can deploy in the Geocortex Inline View Designer.

Watch on Youtube.

Video Transcript

“Hi, my name is Michael, I work for the Products division on Geocortex Inline. I’m here to give you a deep dive on the Inline Designer.

Today, we are going to go over advanced view configuration in the Geocortex Inline View Designer.

The first thing you want to do is add a new band to your view. The bands will contain all the charts, and the charts contain all the data displayed in your view. After you’ve created a band, you want to give it a name. So, we’ll call this one ‘ILI Data’. We also want to give it a short name, so we are just going to call it ‘ILI’. The short name is just what shows up in this little bubble here, to make your band quickly accessible and recognizable.

Once we’ve done that, we can add charts to the bands, so we are just going to add one chart right now. With the chart added, the first thing you want to do is select a data source. The data sources can be configured however you want, as many as you want. Charts will not work without a data source configured.

We are going to choose this ‘ILI Data 2016’. Once that’s done, the next thing you want to do is add a Y value. You have a couple of options here. You can either add a Y value, which is just a number, an integer. We can just put in a zero or we can add a Y value field. That’s going to be a field on your data source. If we use this orientation here, then it’s going to use the orientation field describe at this data source.

The other option we have is to hit this ‘Advanced’ tab and it allows us to enter in a function. This function, it’s not quite a JavaScript function, it’s an ArcGIS Arcade function. They use very similar syntax and there is documentation available on ArcGIS’s website. There is a lot of helper functions that they’ve got as well as how to get started and they’ve got a little bit of a playground where you can test out some functions.

So, with that, we are going to create our function. What this function is, is it uses the same field from the data source that we could use for our regular field, but it then takes the value and returns from that and divides it by 30. This syntax here, ‘d[‘ORIENTATION’]’, that’s how you access fields within functions in the Inline Designer. You’ll see that come up in a couple of other places.

Once that’s done, you are going to want to choose a chart type. You can choose any of these three chart types, different data sources will work with different chart types. Linear specifically requires a begin and endpoint versus line and scatter, which need just one single point.

So, for this specific data source, we are going to choose ‘scatter’ and once that’s done we can go into the ‘Chart Display Options’, which will let us customize what the chart looks like.

Once we are in here, we’ll have a couple of different options. We have the symbol color, the symbol size, and shape as well as the border color. We can change any of theses on the fly, and it will get immediate feedback in the Designer to see what it’s going to look like.

We also have the option to hit the ‘Advanced’ button on any one of these fields. This will allow us to put in a function, just like we did before, and really get things looking unique. Using these functions, we’ll allow us to create much more, intricate charts and designs. We can have symbols of different types appear in different spots, instead of just having these static values.

So, I’m going to just create this function right here and this function will allow us to have different colors of symbols in our charts here. If we start at the top, we declare a couple of variables, just based on the fields and the data source, the same way we did before. We then go into an if L chain here, and we are using this ‘When’ syntax which is very similar to if L’s, it just has a condition, and then if the condition is true, we get the first value, if it’s false, we get the second.

We are also using the right function and that function will take the characters from the right side of the string. We are using the type variable that we declared earlier, as well as the nine characters from the right, which – if it matches corrosion – we are going to use this color, otherwise, we will use this color, and that is repeated for a couple of different cases.

After that, we can add a function for symbol size, and this function is very similar to the last one. We declare a variable, we use this ‘Max’ function that will take the largest of two numbers that you pass it, and then it is a simple if L that will change the size symbol depending on how big the fields provided are.

The next thing we can do is add a function for the symbol shape. The symbol shape is another if L, the symbol shape has a couple of reserved keywords that we can use. So, if we use ‘circle’, we get a circle, there’s ‘cross’, there’s ‘square’, there’s ‘diamond’, there’s also a ‘triangle’, there’s ‘triangle-down’, there is ‘valve’, and I believe there is ‘star’. You can use any one of those strings to select the different symbols provided here.

After that, we can add a function for the symbol border color. That is going to be a quick simple ‘when’ function. This is doing the same thing that I described before when the depth is greater than 40. When the depth is less than 40, we are going to return to one color and elsewhere we are going to turn to another.

Finally, we will add a similar function for the border width and that is just setting up thicker and thinner width depending on the depth.

If we back out of here again, back to the chart options. Once we are right here, we can add a text function for the tooltip. The tooltip is just this little thing that pops up when you hover over a value. Right now, it’s just displaying the Y value of the point, but we can have it display custom values.

So, we are just going to use this function here, and this is still using that field accessor as well as some string concatenation and this ‘round’ function that is just going to round a number to the closest integer. This will generally just return a simple string, you can make it as intricate as you want, as long as it’s returning some sort of string value.

Finally, we can customize the Y-axis of the chart. To do that, we can go back to the band options, and we can go to this ‘Y-Axis Options’ section. We’ve got three options here; ‘Auto’, ‘Custom’, and ‘Hide’. Auto is going to automatically generate the Y-Axis based on the data provided, Custom will let us set our own values, and Hide will just not show it at all.

If we switch it to Custom, we’re given this ‘Min’, ‘Max’ here to be able to choose the range of our data. So, we are going to change this one to 12 and then ‘Steps’ is just how many points you want to display. We are going to drop that down to 5, and then we want to hit this ‘Reset Step Values’, and that is just going to put our steps back into a nice position between our min and our max. Now, we’ve got it going up by three, and one other thing we can do with these step values is that we can change the number to display any sort of string we want. So, we can set this one to just be ‘Low’, and we can set this one to be ‘High’, and we will see it change over here.

We can also change where the values are. So, this one is at 9, but we can change it to be a 10 if we wanted to, and now you can see it’s a little bit switched up, up there. I’ll change that back to 9, and then that’s good.

Finally, you’ll notice that a lot of the functions that we applied didn’t actually show up as any changes here on the Designer. That is because the Designer doesn’t evaluate most of the functions for you. So, it’s just going to assume default values when you enter functions.

In order to test if your functions work, you can go over here to ‘Info’, and hit ‘Run in Sandbox’, this is going to run a live preview of your view. Once it loads in, we can enter our route name, we can choose a start value and an end value, and then we can see that all our functions are applied. We’ve got our different shapes, we’ve got our different colors and our different borders over here. As well as our Y-axis is matching our configuration that we set earlier. We’ve got our tooltip function showing up correctly and it looks like everything is working.

So, that was just some of the things that you can do with functions in the Geocortex Inline View Designer, there’s a lot of other stuff you can do. Esri has a lot of documentation on other functions that you can use, there are all supported within the Designer. It’s just up to you on how creative you want to be.

Try it out when you can and good luck!”

Want to learn more about the Geocortex Inline View Designer or about Geocortex Inline in general? Click the button below!

Discover Geocortex Inline