Skip to main content

Change the Default Behavior of Components

Many of the behaviors of VertiGIS Studio Mobile's built-in components are configurable through the app config.


Many behaviors which are configurable through the app config are more easily configurable by using the VertiGIS Studio Mobile Designer. App config should be used if you need to modify a property not available in the app config, or use a custom command as part of a command chain.


Follow along by setting up the VertiGIS Studio Mobile SDK and editing the minimal layout and app config provided.


If you just need to make a small change to the layout and app config of an existing application, you can download the config and layout files for the application, tweak them, and then re-upload them.

Change the Behavior of the Feature Details Component#

The following example demonstrates changing the onFeatureDelete property of the <feature-details> component. The default value of this property is the command chain,

[    "highlights.remove-focus",    "highlights.remove",    "edit.delete-features",    "results.hide-details",    "results.remove"]

We are going to extend this behavior to add a notification that says "Feature has been deleted". The onFeatureDelete property is not available to edit through the VertiGIS Studio Mobile Designer, but can be edited through the use of app config.

First, let's create a basic map with a feature details component using the layout and app config.

<?xml version="1.0" encoding="utf-8" ?><layout    xmlns=""    xmlns:gxm=""    xmlns:xsi=""    xsi:schemaLocation=" ../../ViewerSpec/layout/layout-mobile.xsd">  <gxm:taskbar id="taskbar" orientation="vertical">
    <!-- Taskbar main content -->      <map id="default" config="default" slot="main"/>
    <!-- Taskbar / Results -->    <panel id="search-panel">      <feature-details config="feature-details"/>    </panel>

Next, configure the onFeatureDetails property of the feature details component to replicate the default behavior. You can test this behavior out by deleting a fire hydrant feature from the map.

{    "$schema": "..\\..\\ViewerFramework\\app-config\\mobile\\mobile-app-config.schema.json",    "schemaVersion": "1.0",    "items": [        {            "$type": "layout",            "id": "desktop-layout",            "url": "resource://layout-large.xml",            "tags": ["mobile", "large"]        },        {            "$type": "layout",            "id": "handheld-layout",            "url": "resource://layout-small.xml",            "tags": ["mobile", "small"]        },        {            "$type": "map-extension",            "id": "default",            "webMap": "c6008288a95247428fc55d9aaa72b670",            "onClick": [                "tasks.identify",                "highlights.pulse",                "results.display-details"            ]        },        {            "$type": "feature-details",            "id": "feature-details",            "onFeatureShow": "highlights.add-focus",            "onFeatureHide": "highlights.remove-focus",            "onFeatureDelete": [                "highlights.remove-focus",                "highlights.remove",                "edit.delete-features",                "results.hide-details",                "results.remove"            ]        }    ]}

Finally, add a ui.display-notification command after the existing command that displays the message "Feature has been deleted".

{    "$schema": "..\\..\\ViewerFramework\\app-config\\mobile\\mobile-app-config.schema.json",    "schemaVersion": "1.0",    "items": [        {            "$type": "layout",            "id": "desktop-layout",            "url": "resource://layout-large.xml",            "tags": ["mobile", "large"]        },        {            "$type": "layout",            "id": "handheld-layout",            "url": "resource://layout-small.xml",            "tags": ["mobile", "small"]        },        {            "$type": "map-extension",            "id": "default",            "webMap": "c6008288a95247428fc55d9aaa72b670",            "onClick": [                "tasks.identify",                "highlights.pulse",                "results.display-details"            ]        },        {            "$type": "feature-details",            "id": "feature-details",            "onFeatureShow": "highlights.add-focus",            "onFeatureHide": "highlights.remove-focus",            "onFeatureDelete": [                "highlights.remove-focus",                "highlights.remove",                "edit.delete-features",                "results.hide-details",                "results.remove",                {                    "name": "ui.display-notification",                    "arguments": {                        "message": "Feature has been deleted."                    }                }            ]        }    ]}

Congratulations! You just changed the default behavior for a built in component using config. All components can be configured through the app config JSON in this manner.

Relevant SDK Samples#

Check out the relevant VertiGIS Studio Mobile SDK Samples:

Next Steps#

VertiGIS Studio Mobile comes with many built-in commands and operations to help you accomplish your goal. If these are not enough, VertiGIS Studio Workflow can help you implement custom behaviors without writing custom code. If you cannot create the behavior you want with VertiGIS Studio Workflow, it might be time to look into using the VertiGIS Studio Mobile SDK to implement a custom command or operation.

Commands and Operations

Learn more about commands and operations

Change VertiGIS Studio Mobile's Default Map Click Behavior

Learn how to use VertiGIS Studio Workflow to override VertiGIS Studio Mobile's default map click behavior

Learn more about VertiGIS Studio Workflow

Commands, Operations, and Events API

Check out the available commands and operations