Breadcrumbs

Overview

Breadcrumbs are links for meaningful navigation. Typically a website has a hierarchical navigation structure. That show the use where they are in the website. However since the forms are not integrated into the CMS they have to be inserted manually. If you don't add a Url it will treat it as a simple string.

DSL properties

Property	Type	Required	Default Value	Description
BreadCrumbs	array[object]	✔️	❌	array of breadcrumbs to be displayed

BreadCrumbs object

Property	Type	Required	Default Value	Description
Text	string	✔️	❌	text to be used for breadcrumb link
Url	string	❌	❌	url being breadcrumb link

Putting breadcrumbs in a form

Syntax

The Breadcrumbs are placed in the root node of the json

{
  "FormName": "UI Breadcrumbs",
  "StartPageSlug": "page0",
  "BreadCrumbs": [
    {
      "Text": "Text of Link, typically Home Page",
      "Url": "Home Page Url"
    },
    {
      "Text": "Sub-Section Title",
      "Url": "Sub-Section Url"
    },
        {
      "Text": "Sub-Sub-Section Title",
      "Url": "Sub-Sub-Section-Url"
    },
  ],
  "Pages": [
  ]
}

Example

{
"FormName": "UI Breadcrumbs",
  "StartPageSlug": "page0",
  "BreadCrumbs": [
    {
      "Text": "Home",
      "Url": "https://www.stockport.gov.uk"
    },
    {
      "Text": "Bins and recycling",
      "Url": "https://www.stockport.gov.uk/topic/bins-and-recycling"
    }
  ],
}

Example

{
"FormName": "UI Breadcrumbs",
  "StartPageSlug": "page0",
  "BreadCrumbs": [
    {
      "Text": "Home",
      "Url": "https://www.stockport.gov.uk"
    },
    {
      "Text": "Bins and recycling form"
    }
  ],
}

Displaying Bread Crumbs

DisplayBreadcrumbs is a property of a page. if DisplayBreadbrumbs is set to 'true' (json boolean) the breadcrumbs are displayed. If set to 'false' or not set at all the breadcrumbs are hidden

Display Breadcrumbs

Here DisplayBreadbrumbs is set to true and displays breadcrumbs

 {
      "Title": "Page 0",
      "PageSlug": "page0",
      "HideTitle": true,
      "DisplayBreadcrumbs": true,
      "Elements": [
       /*Element Stuff*/
      ],
      "Behaviours": [
        {
          "conditions": [],
          "behaviourType": "GoToPage",
          "PageSlug": "page1"
        }
      ]
    },

Hide Breadcrumbs

Here DisplayBreadcrumbs is not set and hides breadcrumbs.

 {
      "Title": "Textbox example",
      "PageSlug": "page1",     
      "Elements": [
         /*Element Stuff*/
      ],
      "Behaviours": [
        {
          "conditions": [],
          "behaviourType": "GoToPage",
          "PageSlug": "page2"
        }
      ]
    },