With Geocortex Web, users can easily copy layout components. This is an excellent way to streamline the app design process and enhance development efficiency. Further, it simplifies the process of adding high-performing and high-value components into future applications.
This Geocortex Tech Tip describes two methods for copying layout components – copying elements within the current app and importing elements from other existing apps. Additionally, this Tech Tip demonstrates how you can modify and customize copied components to maximize their usability in each of your applications!
Video Transcription:
Hi everybody, my name is Patrick Fingler. In this Tech Tip video, I’m going to show you how to copy different components from one layout to another inside of Geocortex Web. Let’s dive in!
Here we are in Geocortex Web. What I’ve done is opened the “Web GIS – Default” template. I’ve made a few modifications to it but not too many.
You’ll see here at the bottom that there’s the option to “Add Components”. This is how you would add new components to your Geocortex Web app such as a new basemap picker. For example, we can drag this “Basemap Picker” from the “Add New Component” menu into this “Tabs” list over here on the left. We can see now that we’ve added a new component.
But, in this Tech Tip video, we want to show you how you can copy components from within your existing layout or app, and also from other apps or layouts that you’ve created. So, let’s get started!
The first thing we’re going to do is click on this down arrow icon on the “Add Component” button in the bottom right. It’ll come up with an option that asks whether you want to “Copy from current app” or “Import from another app”.
Let’s first go ahead and click “Copy from current app”. As an example, maybe we want to include this toolbar we have up here in a panel also alongside our home panel. So, let’s go ahead and find that “Toolbar” component in the “Copy from Current App” menu options, and let’s drag it into our “Home” panel.
When I drag it in you will see that it’s now listed on the top here. I can also move it around, so now it’s at the bottom. And let’s adjust the toolbar and make it “Vertical”. We can see that the sizing is a little bit off so let’s just adjust the “Rows” and make the “Home Height” 15%.
And now you can see we’ve just copied this toolbar component from the top of our app, and we’ve added it to our “Home” panel here.
This is a nice feature; it saves you a lot of time from having to replicate this entire toolbar component. Instead, we can simply copy it and then you could modify and adjust these tools as you wish.
Another thing that you can do is import components, or the configuration of a component, in from another app.
So, let’s go ahead and, as an example, select this “I want to…” menu. I can see when I select this “I want to…” menu that I’ve got the default menu options. But maybe I’ve built a really cool I want to… menu in a different app and I want to pull that configuration into my current app. For any component there should be a “Get Configuration” option. Go ahead and click that.
You can get configurations from our default templates or from any of the apps that you’ve created. So, if we scroll down, I’ve got this “Sample Template” where I’ve built a nice I want to… menu. I’ll click that Sample Template and click “Next”. And here I can say I want to get the “I want to…” component from this Sample Template and replace the “I want to…” component in my current app. I’ll click “Next” and click “Apply”, and now we should see that I have some new “I want to…” menu options.
I’ll just give this a moment to reload. And now you will see if I go to the “I want to…” menu, that I’ve got a number of new options. This is useful if there are specific workflows that you want to implement, or maybe some specific commands. For example, I now have this “Set Dark Theme” option that allows users to swap the light and dark themes. That’s a nice little tool. I’ve also got other workflows listed here to “Search Projects” or “Issue a Service Request” and so on.
So, that’s how to get the configuration of one component in another app and replace it in your current app.
The last thing you might want to do is copy an entire component or layout and apply that into your underlying app. That’s done by using that import from another app option.
I can see here at the top of my app that I’ve got this toolbar with an image. I might want to instead replace this whole toolbar panel with a tabbed toolbar. So, I’m going to go ahead and delete this entire toolbar column here. Let’s click “Remove Component” and now we’re left with just an image.
Let’s now click “Import from another app”. I’m going to go ahead and select my “Sample Template” here. Within this template I can see all the individual components. For example, here there is a “Tabs” control which has a bunch of different types of toolbars within it. I’ll select a tabbed toolbar and drag this into my “Columns” panel here. Now I’ve got a nice, tabbed toolbar with my branding on the right. So, there I was able to grab an entire component and drag it and implement it in my existing Geocortex Web app.
So, hopefully that gives you an overview of some of the options that are available for copying and importing components. This can help to streamline your process as you’re designing and developing Geocortex Web applications. Bye for now!
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