Sage 200 uses the Redux library to store mainly, client-side Form data that is retrieved from and sent back to the API.
Form inputs, like
Textboxes, etc. typically have their values bound to the Redux store (usually keyed by the control id) and so being able to see the current state can be helpful when developing with the Sage 200 web platform.
The best way to do this is by using Redux dev tools extension for Chrome/Firefox (available from their respective extension stores).
After installing and opening the Developer Tools window, you will see a new tab, like this:
In the schema, when you use the
set function, such as:
id property of
myTextbox, will try to display the value listed in the Redux store. (See:
baseSelect documentation for information on extra requirments for select controls.)
If you were to run the code above, then look at the Redux dev tools, you would see this change made via a “batch” action. Note: We’ve selected the “Diff” tab which will only show what was changed by this action.
And the control with a matching
id will automatically display that value:
Sage 200 will also use Redux to facilitate the setting of control properties. While the Redux store is primarily used to store data that drives the form, it is also checked by controls to see if there are any property values it should pick up.
For example, if we set the field we created earlier to
This dispatches an action of type
SKIPCLEAR/field_metadata_ext and appends the store, appending any other properties already set.
The control will then re-render, respecting whatever state is specified here:
It is not recommended to manually set this state, instead you should use the provided
set > properties instead. This is because the underlying implementation may change in the future and it will automatically merge with existing values for other controls, too.
When troubleshooting your schema, it can be useful to check the expected values appear here, if they’re not appearing on screen as you’d expect. Combining this with the provided Log functions in the schema can help identify where the issue is coming from.
Setting pageExtensions and componentExtensions
In the same way properties are set, the Redux store is utilised when using pageExtensions and componentExtensions to add UI components. In the screenshot above a similar action can be seen called
SKIPCLEAR/page_extensions_ext/name. If that option is selected:
A similar type of structure can be seen to how properties are stored. Just like a
Textbox component will check the property’s state for anything it needs to do, the
childExtenders inserted around fields and Pods, will check this area, to see if there’s any UI they should display on the page. If your UI isn’t showing as expected, it is definitely worth checking that the values you would expect to see, appear in the Redux store, like this.