When extending Geocortex Web, you may find yourself creating multiple components that have a shared concern, like a data source, or a REST endpoint call. Shared concerns like this present a good use case for creating a custom service. Implementing a custom service in Geocortex Web allows you to implement logic and shared resources that are available on startup to any component. Custom Services are also the recommended way of registering implementations for custom commands and operations.
- Download and setup the Geocortex Web SDK.
- Check out the deployment instructions to learn more about deploying custom code to a Geocortex Web App.
In this article, we will build a custom service that mocks a periodic fetch of data from a REST endpoint and stores that data for consumption by components. This service will populate a list of news items which will be consumed by a news feed component.
Create a new folder structure with the following files. These files define a new service and export it from the
Every service needs to be registered with the Web SDK in order to be discovered and initialized.
Add a call to
The purpose of this service will be to create a mock data source for the a news feed component. We can mock a sporadically updated news feed data source, simulating what a real news feed, with data arriving at unknown intervals, might behave like. This service will expose a single public property,
newsItems which will act as a dynamic data source for the news feed component.
Now that we have the news feed data being populated by a service, we need to consume that data in the news feed component.
Following the best practices for implementing components, the news item data should be managed by the news feed model. Component Models can inject services as properties, and doing so allows us to directly access the dynamically updated
newsItems property on the service.
Finally, we can bring it all together, and add the news item component and styling to the application. The news feed component watches for changes on the news feed model's
newsItems property, which is in turn linked to the custom service's
newsItems property. In this way, we've built a service which exposes shared data to components. Multiple news feed components could be created, and they would all rely on a single copy of the news items. For more information on how the news feed component was built, see the article on custom components and linking app config to custom components.
This example uses Geocortex Web layout components
- News Feed Component
- News Feed Model
- Data Service
Check out the Component Reference
Take a deep dive into components in the Geocortex Web SDK
Check out the Service Reference
Take a deep dive into services in the Geocortex Web SDK
Learn more about Referencing Services in Components
Learn the dependency injection pattern for referencing services