Street - smbc-digital/form-builder GitHub Wiki
Refer to Stockport Design System for styling information and reference images
DSL properties
Property | Type | Required | Default Value | Description |
---|---|---|---|---|
QuestionId | string | ✔️ | ❌ | Unique question id allowed charatcers are [a-zA-Z] only |
StreetProvider | enum | ✔️ | ❌ | Street provider used for street data lookup |
Label | string | ✔️ | Street name | Label associated with the search term |
SelectLabel | string | ✔️ | Select the street from the list | Label associated with the select dropdown |
Hint | string | ❌ | ❌ | hint which appears above the street input |
SelectHint | string | ❌ | ❌ | hint which appears above the select input |
StreetIAG | string | ❌ | The street must be in Stockport. You can only enter letters A to Z and spaces, for example, Stockport Road. | Inline altert which appears on the street search page |
Optional | bool | ❌ | false | |
CustomValidationMessage | string | ❌ | ❌ | Set a custom validation message for when user does not enter a street) |
SelectCustomValidationMessage | string | ❌ | ❌ | Set a custom validation message for when user does not select an street from the dropdown |
TargetMapping | string | ❌ | ❌ | Used for custom object mapping when creating submit data |
StrongLabel | bool | ❌ | true | Labels associated to inputs are strong |
MaxLength | int | ❌ | 200 | |
LabelAsH1 | bool | ❌ | false | Display the inputs label as a h1 and not a label (if this is set to true, HideTitle in the Page properties should also be set to true) |
SummaryLabel | string | ❌ | ❌ | Change the label associated with this input on the summary |
StreetMissingText | string | ❌ | ❌ | Shows hint text to the user when they are unable to find their street in the returned list |
Validation
The street search query must only contain characters a to z and spaces to be valid.
Street examples
DS Json for street:
{
"Title": "Enter your street",
"PageSlug": "street-search",
"Elements": [
{
"Type": "Street",
"Properties": {
"QuestionId": "customersstreet",
"Label": "What street are you asking about?",
"StrongLabel": true,
"SelectLabel": "Select your street",
"StreetProvider": "Fake"
}
},
{
"Type": "Button",
"Properties": {
"ButtonId": "nextStep"
}
}
]
}
All possible properties example:
{
"Title": "Enter your street",
"PageSlug": "street-search",
"Elements": [
{
"Type": "Street",
"Properties": {
"StrongLabel": true,
"QuestionId": "street",
"Label": "What street are you asking about?",
"SelectLabel": "Select your street",
"Hint": "This is an additional hint",
"SelectHint": "This is an additional hint",
"StreetProvider": "Fake",
"Optional": true,
"CustomValidationMessage": "Custom street validation message",
"SelectCustomValidationMessage": "Custom street select validation message",
"TargetMapping": "customer.street",
"StreetMissingText": "This is shown when user can't find their street"
}
}
]
}