Skip to main content

Configure Button Click Behavior

This article will guide you through how to add a button to the layout and configure it to run an action through the app config.

note

It's possible to configure a button with a command in the VertiGIS Studio Web Designer. However, this tutorial demonstrates the concept of configuring behaviors using the app config directly.

Prerequisites​

Add a Button to the Layout​

Let's create a layout with two components; a map, and a button positioned on the map.

app/layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns="https://geocortex.com/layout/v1" >
  <map>
    <button slot="top-center"/>
  </map>
</layout>

Link the button to the layout using a menu-item in app config, and configure it to run a basic command, zoom-in.

app/layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns="https://geocortex.com/layout/v1" >
  <map>
    <button config="button-config" slot="top-center"/>
  </map>
</layout>

Pass Arguments to the Command​

If the command you want to run takes arguments, you can pass them through the app config.

tip

Check out the commands and operations reference for more info on passing arguments.

app/app.json
{
    "schemaVersion": "1.0",
    "items": [
        {
            "id": "button-config",
            "iconId": "info",
            "title": "Alert",
            "action": {
                "name": "ui.alert",
                "arguments": {
                    "message": "Message from config."
                }
            },
            "$type": "menu-item"
        }
    ]
}

Next Steps​

Commands, Operations, and Events API

Check out the available commands and operations

Get Started

Change Default Behavior with Commands and Operations

Change built-in behavior or add new behavior using app config and layout

Get Started