Configurable UI Tutorial
This feature is currently in beta and may be subject to change. Before using it in production, please contact your Socotra representative.
In this tutorial, we will build a UI configuration for a homeowners (HO3) product, from a minimal configuration to a full quote editor, policy pages, and transaction flows. Each exercise gives you a task, a screenshot of the result, the properties to use, and an answer to compare against.
You can follow along by deploying the configuration in the tutorial repository. Each exercise is one commit with its own branch, ex-01 through ex-21, so you can see what each step changes. The sample configuration is a homeowners product with a dwelling exposure, a policyholder account type, and the plugins the tutorial's buttons call.
Deploy the start branch to a tenant of your own, since a deploy replaces the tenant's configuration. Then create a policyholder account and an HO3 quote, and add a dwelling on the quote's Dwelling step. Exercises 1–16 work on that quote.
For the concepts behind Configurable UI, see the feature guide. For the full list of options for each concept, see the configuration guide. Each exercise links to the page that covers it.
What You'll Build
The tutorial follows one quote. You edit it through exercise 16, then price, bind, and issue it. Exercises 17–21 work on the resulting policy, and on a renewal and a cancellation started from it.
| Page | Exercises | Covers |
|---|---|---|
| Configure Fields | 1–3 | Labels, help text, inputs, computed and read-only fields, and data types |
| Build Sections | 4–6 | Sections, plugin and reusable sections, and conditional access |
| Build Steps and Workflows | 7–12 | Steps, built-in section types, workflows, and field conditions |
| Add Buttons, Menus, and Editors | 13–16 | Buttons and actions, the menu, the sidebar, the exposure editor, and issuing the quote |
| Arrange Policy and Account Pages | 17–18 | Account 360, Policy 360, Policy Details, and create dialogs |
| Set Journeys, Scope, and the Landing Page | 19–21 | Journeys, scope by transaction type, and the landing page |
How Each Exercise Works
- Read the task, open the page listed under "Look at", and compare it with the After screenshot.
- Make the change in the file listed under "Where", using the properties under "What you can use". For a start, open "Hint": it shows part of the change.
- Validate and deploy your configuration, then reload the page. See Configuration Deployment.
- Compare your configuration with the answer, the exercise's branch in the tutorial repo. Its "what changed" link shows only that exercise's changes. If you're stuck or want to skip ahead, check out the branch, such as
git checkout ex-05, and deploy.
Catch-up exercises (9 and 11) repeat what you've already practiced: check out the branch, deploy, and read the list of what it changes.
To move between steps, click "Continue", or open a step you've already visited from the step list. Steps you haven't reached are grayed out. After a deploy that changes the steps or workflows, the quote may reopen at the first step; click "Continue" on each step to get back to where you were.
Terms and Conventions
- Section: A block of content on a step: a group of fields, or built-in content such as pricing or documents
- Card: A block on a Policy 360 or Account 360 page
- File paths: Relative to
socotra-config/uiConfigs/operationsWorkbench/in the tutorial repo - Labels: Buttons, menu items, and field labels are in quotes, such as "Continue"; step and section names are plain, such as Submission Details