Launching Gov.UK components on OutSystems
After working with several public sector clients in Northern Ireland, we decided to package up our GDS learning into reusable components. Today we launch our components for the GDS UI Design System on the OutSystems Forge, together with the Gov.UK Notify and Gov.UK Pay integrations.
It’s our hope that we grow public sector adoption of OutSystems, and with these tools as easily available as the SDKs for traditional development, it’s perhaps one less barrier to entry. We’d love you to try it out and feed back to us at OutSystems@Version1.com
Links
- Demo site* — https://neuedaltd.outsystemscloud.com/GOVUK_GDS/ — note as agreed with the GDS team we have removed the Crown Branding and replaced it with Version 1 icons for the demo website, otherwise, the content is replicating the GDS pages in OutSystems.
- Design System on Forge — https://www.outsystems.com/forge/component-overview/16834/gov-uk-gds-ui
- Notify demo* — https://neuedaltd.outsystemscloud.com/GOVUK_Notify/
- Notify on Forge — https://www.outsystems.com/forge/component-overview/17065/gov-uk-notify
- Pay demo* — https://neuedaltd.outsystemscloud.com/GovUK_Pay/
- Pay on Forge — https://www.outsystems.com/forge/component-overview/17093/gov-uk-pay
Design System
The GDS Design System is a well-researched and commonly implemented system for styling government pages and forms in an easy-to-use, consistent manner. There are patterns, components, and styles that make up the style guide — and we created a set of OutSystems components to implement those.
At the simplest, we have incorporated the CSS from GDS and made it available in the OutSystems theme.
From there, we have pulled each component into its reusable web block with input parameters and output events to add to the output. Some of the complex patterns are also web blocks now, in the same way. In many cases, we use JavaScript to bridge between OutSystems built-in objects like tables and use the GDS classes.
Finally, we have created a demo app and style guide that lets you see an implementation of each component both on the browser and in Service Studio. The intention is that you can pull in the component, modify it for your department or public body branding if needed, and bind it to your data model quickly and efficiently.
Notify
The Gov.UK Notify service allows public bodies to use a centralised email, SMS, and paper mail distribution service, from a common and trusted core domain, in a cost-optimal way.
We realised we had several different versions of integrations with the Notify service, depending on when it was pulled into an extension, or which version of the extension was copied across between customers.
In going back to create a reusable library, we have stayed with the REST API integration rather than packaging the SDK into an extension, so that we can more easily remain in control of versioning as the Notify service evolves.
We also realised that admin support was varied across the consumer organisations and that by implementing a bit of storage and some call-backs in the reusable objects, we could present a starting point for admins to see the delivery status from within their day-to-day app rather than hopping out and searching the Notify platform.
The demo app contains a how-to-use guide for the initial setup and each of the actions. It also shows how the call-backs work, and creates a message store with updated status and error information.
Pay
The Gov.UK Pay service enables organisations to set up their collection methods through WorldPay or Stripe and integrate that either through a redirect to a payment page or programmatically through the API. Here we consider the API, since the payment page is just a redirect and configuring a return URL.
Whilst it is on the face of it simpler, we again took the approach of creating some core services for admin tools and enabling organisations to use multiple API keys if they need to for different parts of the organisation.
Through the demo, you can see how each service is implemented, which should help you build your app to take payments faster, and allow you to update the payment requests with the status automatically.
Note there is still some setup required in the Pay service and with the payment provider that you choose — to use the demo you’ll need your own API key and demo account set up.
Considerations
Liability: We make these assets available on the Forge marketplace as seen; it is up to the implementing organisation to inspect and satisfy themselves that they are fit for purpose. We’d love your suggestions and improvements, but we are under no obligation to implement those.
GDS “Progressive Enhancement” principle: if you scratch the surface, OutSystems relies heavily on JavaScript, even in traditional web apps — and the current standard is to build React-based web applications. As such, this principle, where a site should work as HTML only, before adding in CSS and JavaScript, is not one that can be supported easily from a low-code platform. This should form part of the conversation before choosing OutSystems for rapid development of public-facing services if you require strict adherence to the full GDS Service Standard.
Branding: Please do note the Gov.UK Crown logo and Transport font are reserved for Crown bodies — for more information see the branding guidelines here or reach out to the GDS team for guidance. We include them in the theme class for ease of use, but please ensure you have the right permission to use them.
URLs marked *: Note Neueda Ltd was acquired by Version 1, but our demo environment URL has not been updated to match yet.
About the Author:
Andy Borthwick is a Solutions Architect at Version 1.
