Geocortex Web has a powerful app configuration model which can be used to easily change the behavior of an application without modifying custom code. Using app config to power a components behavior increases its reusability and customizability.
By the end of this article, you'll have the knowledge to build a component that displays relevant news items at the top of your map. These news items will be populated from config, along with a value that tells the news component whether or not to be visible by default.
- Download and setup the Geocortex Web SDK.
- Check out the deployment instructions to learn more about deploying custom code to a Geocortex Web App.
We are going to add configuration to a custom component that displays news items. This component currently is following bad practices and does not treat the model as the source of truth for its data. We are going to move the
newsItems list to a configurable property on the model, and add a new configurable property,
This example uses Geocortex Web layout components
- Empty Model
- Component Index
- App Config
First, we need to create a
NewsFeedModelProperties interface which we use to inform the
NewsFeedModel about which properties it should populate from configuration.
Next, we have to inform Geocortex Web about how to serialize and deserialize these properties between the app config and the model, as well as provide default values. We do this by implementing the
Finally, we need to update the
NewsFeed component to treat the model as its single source of truth for data. First, we update the props passed into the component to include the relevant model.
The model will initially populated with values from configuration or defaults. The component can use
props.model values to set the initial state, but we also want to update the model and re-render on model changes. Since the data state is contained within the model, we can't use the
useState React pattern.
To respond to model changes, we can do the following.
Upon user interaction that affects state,
- The component updates the model values.
- The component listens for changes on the model values and re-renders with the
Learn more about the helper React Hook functions like
Following is a complete example where news items are configured in the
app.json, populated into the
NewsFeedModel and finally consumed and presented by the
- App Config
- Component Export
Check out the Component Reference
Take a deep dive into components in the Geocortex Web SDK