With Geocortex Web, editing built-in web layouts is simple. Using layouts provides an easy way to create applications that are visually appealing with inviting end-user experiences. With countless functionality and formatting options, you can effortlessly create applications to meet any goal!
This Geocortex Tech Tip demonstrates how to use and edit layouts in Geocortex Web. Additionally, it provides examples of functionalities that can be added to applications and provides an overview of how to customize the available formatting elements.
Video Transcription:
What’s up everybody? My name is Aaron Oxley and I’m a Technical Sales Specialist. In this video we’ll be looking at layout editing in Geocortex Web. Layouts are how you control the overall look and feel of an application and the positioning of all the different components in your app. In Geocortex Web you have almost unlimited control, there’s a lot of options. Let’s take a look at some of the different ways that you can edit a layout in Geocortex Web!
When we first open Geocortex Web we have a bunch of templates available. Each of these comes with at least one layout. There’s also a blank layout. Let’s pick the blank to start from scratch.
First, I’ll “Save” my app. We’ll call it “Editing Layouts in Geocortex Web”. Now here we are with an empty layout. There’s nothing in the “Components” list. An easy way to get started is to “Add Component”.
There are three component categories available. The first one, “Map”, involves everything having to do with the map. It’s probably going to be a part of the map. Under “Layout” are the container components. They’re very important when we’re editing layouts because they can contain other components. They’re kind of like the frame of a house. They provide all the structure for our layout. The last tab is “Other”. Some of these are used for displaying data, some give users access to functionality.
Today though, we’re going to focus on the layout components.
“Columns” allows components to exist side by side horizontally. “Dialog” is a popup. “Expand” is a really minimal container. It just shows up as an icon and when a user clicks it, it expands to show the contained component. “Panels” are containers that can be manipulated. They can have buttons like minimize, maximize, close and back, and they’re often used with workflows. “Rows” allows components to sit above and below each other vertically oriented. Lastly “Tabs” is a set of tabs.
To add components, we just drag and drop them from this “Add New Component” list into the “Components” list. Generally, the first thing that gets added to an app is a “Map”.
By default, this map is just the world topographic map, so we don’t have any layers. Let’s switch the map. If I click on it, I get taken into the map configuration. I can select a different web map. This one should have some functional feature layers for us.
That looks good but it doesn’t really look like an app yet. It’s just a map. So, why don’t we give a toolbar with some basic tools, maybe up across the top. From a structural standpoint I want this to sit above the map so I’ll use a “Rows” component to set that up.
I’ll just drag this “Rows” from the “Add New Component” list to the top of my app. Then I’ll go to the “Other” tab, grab a toolbar and drag that right onto “Rows” in the “Components” list. We can see that take effect right away. But my “Toolbar” is empty so let’s add some tools.
If I click on the “Toolbar” I can “Add Menu Item”. Let’s add the “Add Layer” tool. We’ll add the “Draw” tool. And we’ll add “Identify”, that’s a popular tool.
Maybe I know that “Identify” is going to be my most popular tool. So, I can actually shuffle the order of my tools in the “Toolbar” really easily. I just hit “Edit Items” and drag the one I want up to the top of the list. And now because “Identify” is the first one in this list in the “Toolbar” settings, it’s also now the first one over here on my map.
We’ll now go back to our main “Components” list. I haven’t added my “Map” to my “Rows” yet so let’s do that. I’ll just drag it up into my “Rows”. And now we can see them stacked, but the “Toolbar” is below the map. I want the “Toolbar” at the top, so I’ll just drag it up above. Now it’s at the top of the map.
Next, I’m thinking I probably need some space for my users to view data. So, let’s grab a “Tabs” and drag that over here to our “Components” list. But I can’t just have my “Tabs” and my “Rows”. In order for those to live side by side, I need them to sit in a set of “Columns”.
So, I’ll drag “Columns” over to the “Components” list as well. I’ll drag my “Tabs” into my columns. I’ll drag my “Rows” into my columns. Now the “Tabs” are below and if I drag them up, that moves them to the first spot. Columns work from left to right.
Now if I go into “Tabs”, we can see a bunch of different configuration options, but really what we need to do is add some other components to our tabs. Let’s start out with a “Results List”. I’ll drag that into our “Tabs” in the “Components” list.
By default, the “Results List” is huge. Geocortex Web gives each component an equal space to start. Let’s deal with that first. If I come up to my “Columns”, I can see the “Nested Sizing” here. Let’s set the “Tabs Width” to “25%”. That looks about right to me.
Now if I do an “Identify” and just select some of these buildings, I will get results in my “Results List”. Excellent. Now if I click on one of these results, I would like to get some details. So, let’s drop a “Result Details” component into our application. I’ll drop that onto my “Tabs”. There we go!
Now if I come back to the “Results List” and select one of these results, the “Results Details” panel will populate with all of this great information about the feature that I selected from the list.
I would like to close this “Results Details” tab though. I don’t necessarily want to have this tab open all the time. So, let’s use a “Panel” to do that. I’ll drag a “Panel” into my “Tabs”. And then I’ll drag “Result Details” into the “Panel”.
Now we can see the “Minimize”, “Maximize” and “Close” buttons in the “Panel” tab on the map. Minimize and maximize are probably not going to be super useful for my users, so I’ll turn those ones off.
Then I’ll change the name of my “Panel” to “Details” so that the tab has a more appropriate title. I’d also like “Details” to be the second tab, so let’s drag the “Results List” up in the “Components” list. There we go. It’s starting to look how I want it to look.
Now, just to show how flexible Geocortex Web is and how easy it is to change things up, let’s say I actually want these tabs to be on the other side of my app. I can really easily just move the things around within my “Columns”. I’ll grab “Rows”, put it up here at the top. Now it’s the “Rows” and then the “Tabs”.
Or maybe I want my “Tabs” across the bottom. I’ve got my “Results List” and “Details” tabs and maybe I want them at the bottom so that I get more screen width for my map. I can take these “Tabs”, and if we think about how the “Rows” work, let’s drag the “Tabs” into our “Rows”. And it did the right thing but now our “Tabs” are at the top. So, let’s drag our “Map” up above our “Tabs”, let’s drag our “Toolbar” up above our “Map”. Now that looks about right. It’s really easy to move things around and get them looking the way that we want in Geocortex Web.
Now there’s a couple other layout components that I want to show. Let’s start out by adding a “Basemap Picker” to our “Map”. We can see it here on the map. I can also move it around by selecting the “Slot” in the configuration menu. I’ll select “Top Left” and it will move over there.
But it’s taking up a fair amount of screen space and it’s just overlaying my map. So, I’d actually like to tuck that away a bit. I’m going to add an “Expand” component to my map. I’m going to put that in the “Top Left” slot and I’m going to put my “Basemap Picker” into the “Expand”. Now we have this “Expand” here tucked away. We can pop it open and pick our base map. When we get the base map that we want we can close it away by clicking on that “Expand” badge again.
Now the last layout component that we haven’t looked at is “Dialog”. It’s basically a pop-up box.
What I might do is replace this “Basemap Picker” and the “Expand” component with a “Dialog”.
We’ll drag “Dialog” over and drop that into our components list. Then in the “Dialog” we need to decide what information we want. Let’s go with the “Basemap Picker”.
And here we have a pop up. We see the back gets grayed out and we can pick our base map.
We see that take effect back in the application. Perfect, let’s close this.
So, this is a pretty long Tech Tip already, so I think I’ll wrap it up here. To put it in a nutshell though, layouts in Geocortex Web are super flexible and easy to configure!
Hopefully this video gives you a feel for what’s possible. The idea is really that you can give your users an inviting experience that caters to their needs. Sometimes the look and feel of an app can make all the difference!
That’s layout editing in Geocortex Web. If you want to know more, just let us know. You can email info@geocortex.com. If this video was helpful for you, please like, share, subscribe, and check out our other videos. Thanks for watching!
Want to learn more about the capabilities of Geocortex Web? Click the button below for more information on what is possible with Geocortex Web.
Contributors