Did you know Geocortex Workflow allows you to create custom forms you can present to an end user?
Implementing a custom component in Geocortex Mobile gives you the highest degree of flexibility with what you can do. Components can display custom, dynamic UI, register operation implementations, store persistent data, and more. They are also one of the most complex ways of customizing your Geocortex Mobile app, so it might be worthwhile to review simpler options like Commands and Operations or Workflow first.
By the end of this article, you'll have the knowledge to build a component that displays a progress bar that is advanced by a button.
Check out and setup the Geocortex Mobile SDK Quickstart project.
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 Autofac.
First, the layout needs to be told where to find your component. In the assembly attribute of the
CustomComponent, we declared it to be part of the
App1Namespace which is defined in
XmlNamespaces.cs We need to add this xml namespace as an attribute on the layout. In this example, it's added with the alias
Now that the
custom namespace has been added, the component can be added to the layout. For this example, it was added into a Panel that lives in the taskbar.
- User Interface
- Right click on the
Componentsfolder and select "Add" > "New Item" > "Content View"
- Rename the files and classes within to
- Modify the
CustomComponentto return this new view for its content.
- Code Behind
Congratulations! You've built a working component with UI that is exposed in Mobile.
Learn about how to extend this component to participate in app config.
From here, you can implement your own business logic and interfaces, create custom Commands and Operations that are powered by and/or interact with your component, and much more. The Xamarin Forms Documentation has excellent guides to implementing user interfaces in Xaml.
Geocortex Mobile comes with built-in Enhanced Components that can ease development and styling of custom UI.
Here's an example of a component with a progress bar that is advanced on a button click. It uses a MVVM pattern to power the user interface, as is best practice recommended by Xamarin.
- Code Behind
- View Model
- User Interface
This example refactored the original example to use Autofac dependency injection to instantiate the View and ViewModel. Setting up your classes so dependencies are handled by Autofac in the constructor allows you to allow inject other Geocortex Mobile classes registered with Autofac, like how the
UIOperations class is injected into the view.
Learn more of this ViewModel's use of the Geocortex Mobile helper class
Check out the relevant Geocortex Mobile SDK Samples:
Learn more about components in Geocortex Mobile
Component and Service Interactions
Learn how components and services interact in Geocortex Mobile
Implement a Custom Service
Learn how to implement a custom service using the Geocortex Mobile SDK