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"
          }
        }
      ]
    }