Skip to main content

Use Launch Link Workflows to Modify App UI at Startup

Updated

In certain situations, you may want to modify the look of your app at startup based on URL parameters. This would allow you to offer different user experiences of the same app just by changing part of the URL. For example, if you have an app that shows outdoor recreational areas in public parks, you may want an elevation overview map and legend to load for users accessing the app from a "View hiking trails" hyperlink on your website, but display a panel with campground rules if someone accesses the app via a "Camp here" hyperlink.

This is possible in VertiGIS Studio Web with the use of Launch Link Workflows.

How to set it up

The configuration requires some planning and use of both VertiGIS Studio Web Designer and VertiGIS Studio Workflow Designer. Before you begin, please make sure your Web app is fully set up, and includes any components you would like to show or hide based on URL parameters.

This article is broken down into the following sections:

Gather information from the Web app

If you want to show or hide entire components, such as the legend, you will need to note down the Model URI or Layout ID of each one. To do so:

  1. Open your app in VertiGIS Studio Web Designer.
  2. Select the desired component in the Components list.
  3. Click the gear icon in the upper left of its settings.

  1. Copy down either the Model URI or the Layout ID.

Build the workflow

Though the workflow can be made to be much more complex, here are the basics for activating or deactivating app components based on URL parameters:

  1. Create a new blank workflow in VertiGIS Studio Workflow Designer.
  2. Add a Get Workflow Inputs activity. This will get the inputs from the URL parameters.
  3. Add a Delay activity. This is important because it ensures the components in your app have had time to load before you try to activate or deactivate then. You may need to adjust the duration of the delay based on your app. A good starting point is 1000 (milliseconds).
  4. Add a Switch activity.
  5. Now, choose a name for your URL parameter. For example, if you plan on having a different layout for camping and hiking, you might set the name of the URL parameter to "parkUse". Make note of this name, as you will need to use it later.
  6. Set the input for the Switch activity to the output of your Get Workflow Inputs activity followed by the URL parameter name you chose. For example:  
    =$getWorkflowInputs1.inputs.parkUse
  7. Set the default path of the Switch activity to an Exit activity. This ensures that your app loads the standard layout you've built in VertiGIS Studio Web Designer if no URL parameters are supplied.
  8. Add a Run Command activity for each component you would like to activate/deactivate, but do not connect them to anything yet. Set the inputs as follows:
    • Command Name: ui.activate or ui.deactivate
    • Command Parameter: Model URI or Layout ID of the component
  9. Connect the Run Command activities to each other based on the layout you want displayed. For example, all Run Command activities that activate or deactivate components for the "hiking" view should be connected, and all Run Command activities that activate or deactivate components for the "camping" view should be connected.
  10. Connect a path from the Switch activity to each separate "view". Set the name for each path based on what you would like the URL parameter to be. For example, one might be called "hiking" and another called "camping".

  1. Save the workflow.

Add the workflow to your app

Once the workflow is configured, you'll need to set it up so it runs when the app is launched with a certain URL.

  1. Open your app in VertiGIS Studio Web Designer.
  2. Click on the Services tab.
  3. Select the Launch Link Workflows section.
  4. Click the Add Workflow button and select the workflow you just created.
  5. Save your app.
  6. In the left toolbar, select Deploy.
  7. Use the three dots next to your app to open its menu and select Get Links.
  8. Under "Workflow to run (optional)", select your recently added workflow.
  9. Copy the Launch URL.
  10. Paste it into into your address bar, but don't navigate to it yet.
  11. Add the parameter name and value as a key-value pair in the "workflowParams" section at the end of the URL. For example:  
    workflowParams={"parkUse":"hiking"}
  12. Navigate to the address. Your app should load the desired initial view.

Demo

Try it out with this demo app:

Related articles

Comments

0 comments

Article is closed for comments.