Change the Default Behavior of Components

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

note

Many behaviors which are configurable through the app config are more easily configurable by using the Geocortex 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.

Prerequisites

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

tip

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 Geocortex 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.

App1/App1/layout-large.xml
<?xml version="1.0" encoding="utf-8" ?>
<layout
xmlns="https://geocortex.com/layout/v1"
xmlns:gxm="https://geocortex.com/layout/mobile/v1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://geocortex.com/layout/v1 ../../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>
</gxm:taskbar>
</layout>

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.

App1/App1/app.json
{
"$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".

App1/App1/app.json
{
"$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 Geocortex Mobile SDK Samples:

Next Steps

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

Commands and Operations

Learn more about commands and operations

Get Started

Change Geocortex Mobile's Default Map Click Behavior

Learn how to Geocortex Workflow to override Geocortex Mobile's default map click behavior

Get Started

Learn more about Geocortex Workflow

Get Started

Commands, Operations, and Events API

Check out the available commands and operations

Get Started
Edit this page