Create a Component

important

This tutorial assumes you are using windows and can run the Universal Windows Version of Geocortex Mobile.

If you can't solve your use case by editing the app layout and config using the built-in components, then it may be time to learn how to extend Geocortex Mobile with custom components. With custom components, you can create completely configurable UI and behavior, interact with other components and built-in services, and more.

Prerequisites

Check out and setup the Geocortex Mobile SDK Quickstart project.

Basic Component

Create a new file components/CustomComponent.cs under the platform agnostic project. In the file, add a new component class CustomComponent and register it with Geocortex Mobile using an assembly attribute.

using App1;
using App1.Components;
using VertiGIS.Mobile.Composition.Layout;
using System.Xml.Linq;
using Xamarin.Forms;

[assembly: Component(typeof(CustomComponent), "custom-component", XmlNamespace = XmlNamespaces.App1Namespace)]
namespace App1.Components
{
    class CustomComponent : ComponentBase
    {
        protected override VisualElement Create(XNode node)
        {
            return new Label(){ Text = "My Custom Component" };
        }
    }
}

Add the Component to your Layout

You can now add the component to your app layout to see it in the application.

Add the XmlNamespaces.App1Namespace namespace with the alias custom to your xml namespaces.
Place your custom component in a taskbar panel.

Layout
App Config
User Interface

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"
    xmlns:custom="https://your.org/layout/app1">
    <gxm:taskbar>
        <map slot="main"/>
        <panel>
            <custom:custom-component icon="info"/>
        </panel>
    </gxm:taskbar>
</layout>

You've now accomplished the basics of extending Geocortex Mobile with a custom component. With custom components, you can create completely new user interfaces and run completely custom logic in your Geocortex Mobile application.

Relevant SDK Samples

Check out the relevant Geocortex Mobile SDK Samples:

Next Steps

Learn how to create a custom service with the SDK

Take a deep dive into components in the Geocortex Mobile SDK

Build a custom, interactive component with a UI defined in XAML

Use app configuration to create easily customizable components