Geocortex Web offers a capability to use workflows to load different layouts on startup. By configuring a startup workflow, you can prompt your web applications to change from a desktop to a mobile view based on a user’s device type. Configuring your web applications to load different layouts on startup is an easy way to simplify development requirements while enhancing viewer experiences!
This Geocortex Tech Tip demonstrates how to customize startup workflows. Additionally, it gives an overview of possible viewer capabilities that can be used in a workflow to determine whether a user is using a desktop or mobile device.
Video Transcription:
Hi, it’s Paul here from the Technical Sales team. Today we’re going to have a look at how you can configure your Geocortex Web application to load different layouts based on specific startup parameters that you’ve configured. Let’s have a look!
Here we are inside of a sample application. We’ve got two layouts configured currently. We’ve got a “Desktop Landscape” view here and we’ve also got a “Handheld Portrait” view.
I’m just going to load the handheld view so you can see what it looks like. You can see that the toolbar is not there anymore, and we don’t have a home panel anymore.
So, we’ve got two different layouts. The idea here is that upon viewer or application startup, the layout will change based on certain criteria. And the way it does that is by running a startup workflow. In order for the workflow to run on startup, it needs to be in two locations.
We’ll place the workflow here inside of the “App” configuration. We place it here because inside of the workflow there’s a viewer command that runs called get capabilities and that command will return results which are properties of the viewer. So, we need to place the workflow here in the “App” configuration to run that viewer command. Once the viewer command has been run then the “Launch Link Workflow” kicks off and runs the workflow itself.
If we have a look at the workflow, we can see a couple of things. We’ve got a “Run Operation” activity here. And the get capabilities viewer command that I was referring to is here in the “Operation Name” field as “viewer.get-capabilities”.
One of the results of that get capabilities command is the “width”. We can see here in the “Input Editor” that we’ve got a simple expression based on the results of the command. We return the width and check if that width is less than or equal to 1024. If it’s “False”, or greater than 1024, then we “Set Desktop” view. If it is “True”, meaning that it does meet that criterion of being less than or equal to 1024, then we “Set Handheld” view. So, you can see the commands that are run here to load these layouts based on whether it meets the criteria.
There are a few other capabilities you could choose for this.
I’m in the Geocortex Developer Center looking at the “ViewerCapabilities” command that we were just looking at in the workflow. These are the available results. One of them is “width”, you can see that here. Other ones are asking whether it supports a “hover”, if it has a “pointer”, or supports “touch”.
The “touch” and “pointer” commands could be used to differentiate between a desktop and a handheld device. You’d be asking whether it’s a touch device or if it has a pointer. That might be an easy way to load layouts based on whether it’s a mobile device versus desktop.
So those are the available commands.
Let’s just give our app a quick look and see what it looks like. I’m going to launch the application.
I’m going to launch it by default here, so it should launch the desktop view to begin with. It loads as expected here with a toolbar and a home panel.
Let’s just break it off here to make it more handheld size. We want to meet that less than or equal to 1024-pixel width criteria. We’ll refresh the application, and we should see that handheld layout displayed. And we do. We see that short search panel here, the “I want to…” menu, there’s no home panel and no toolbar.
You can imagine the different possibilities with this sort of thing. It’s a simple workflow that runs on startup and it can really allow you to customize your viewer experience. Instead of rebuilding new applications, you can just simply use layouts to improve the user experience for mobile applications that you’re looking to build.
That’s all I have for you today. Have a great day!
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