Tutorial - Create Your First GXM App

The objective of this tutorial is to introduce you to the basic actions required to use the Geocortex Mobile Designer and Geocortex Go to build your first app.

The tutorial walks you through the following: 

Before you begin...

For this tutorial, you need:

Your First GXM App

Sign in to Mobile Designer

  1. Go to https://apps.geocortex.com/mobileviewer/designer/.

  2. Click Let's get started!

  3. Use your ArcGIS credentials to log in.

    Geocortex Mobile Designer opens.

Create and Save a New App

  1. In Geocortex Mobile Designer - also called Mobile Designer - in the New section, click Mobile Default.

    The default template opens.

    The template contains all the basic components you need for a GXM app.

    Let's save it under the name we want to call the new app.

  2. In the taskbar, click File, and then click Save As in the panel that opens.

  3. In the Title box, type in the name you want to give your app, and then click Save.

    Your new app opens in the Mobile Designer with the name of the new app now in the title bar.

Link to Your Esri Web Map

The basis for all GXM apps is an Esri web map. So the first thing we need to do is tell Mobile Designer which web map we want to use and link to it.

  1. In the Configure Components panel, click Map.
  2. When the Map panel opens, click Select.

    The Select Items window opens.

    You can type in the name of the web map and click Search, or change the filter from My Content, to Shared With Me or Public and then browse to find the map you want.

  3. When you find your web map, click it, and then click Select.

  4. Click File | Save.

View Your New App in Geocortex Go

Before we go any further, let's take a look at the new app in Geocortex Go.

  1. On the device where you installed Geocortex Go, open the app and sign in using the same ArcGIS account that you used for Mobile Designer.

    The screen displays a list of all the apps that you have permission to view.

  2. In the list, scroll down and find your new app.
  3. Click the white box that has the name of your app.

    Your new app opens in Geocortex Go and shows the map with your location showing as a blue dot.

    If your location is outside the visible part of the map, you may not be able to see the blue dot.
    If your location is not on the current map, you will see an error message.

    You can explore the interface.

    For more information about the elements of the UI, see Geocortex Go UI.

    Leave Geocortex Go running as you continue with the next part of the tutorial.

Edit the Configuration of a Component in Mobile Designer

Let's make a simple change in Mobile Designer and then take a look at how it immediately takes effect in Geocortex Go.

  1. In Mobile Designer, in the Configure Components panel, click Branding.
  2. In the Accent Color drop-down, select a different color from the default blue.

  3. Click File | Save.

  4. Return to the Geocortex Go app and open the I want to menu.

  5. Click Refresh App to load the change we just made.

    The changes appear immediately.

    You can now make any changes to your new app that you want to by following these basic steps; make a change in the Mobile Designer and then preview the change in Geocortex Go.

Integrate a Workflow

The Geocortex Mobile license includes an entitlement to use Geocortex Workflow. The ability to add a workflow to an app is a useful feature, so we are going to create a simple workflow and add it to the new app.

To add a workflow to a GXM app:

  1. To open Workflow Designer, do one of the following:

    By default, Workflow expects you to create a new workflow, which is what we plan to do.
  2. In the Toolbox on the left, scroll down until you find Display Form activity.

    You can use the filter at the top of the Toolbox to find it; type in "display" to list only that activity.
  3. Drag the Display Form activity out of the toolbox and onto the work area beneath the Start box.

    When you drop the activity, a Display Form dialog appears for you to configure this new activity.

  4. For now, ignore the Display Form dialog and double-click the green Display Form box so that we can edit the Form Title.

  5. Click the Form Title text and in the Title box in the Header section, type My GXM Workflow.

    As you type, the words are added to the Display Form title.

  6. From the Toolbox on the left, drag the Text control onto your Display Form.

    This text will display when you run the workflow inside your new app.

  7. In the panel to the right, type in a Description like "This is my first GXM Workflow”.
  8. Click File | Save in the side panel, and then in the Title box, type a name that's easy to remember; My GXM Workflow.

  9. Click Save.

To add the workflow to your app in Mobile Designer

  1. In Mobile Designer, in the Configure Components panel, click I Want To Menu, and then click +Add Menu Item.

  2. In the Menu Item panel, in the Title box, type in a title for your workflow, for example, Run My New Workflow.
    This title appears in your app in the I Want To menu as an option.
  3. Click Select Icon and choose an icon to be displayed beside your menu option in the I want to menu.

  4. In the Command box, delete the existing text and start typing "run".


    When the Run Workflow option appears, click it.

    The Select Items dialog opens and displays your workflows. You can change the list to display workflows Shared With Me or Search for the name of a workflow.

    When you select a workflow from the Select Items, it is immediately translated into code in the Command box.

  5. In Mobile Designer, click File | Save to save the workflow option to your new app.

  6. Return to Geocortex Go and in the I want to menu, click Refresh App.

    The map refreshes.

    The new workflow appears in the I want to panel as a new option.

  7. When you click the new option in the I want to menu, you see the text you added to your workflow.

    The new workflow has also been temporarily added to the taskbar.

    You have successfully created a new GXM app using Mobile Designer and Geocortex Go and even added a workflow to the app.

© 2019 Latitude Geographics Group Ltd. All Rights Reserved.

Documentation Version 5.2