How to use cascade Command?
The value of the (Bootstrap) Cascade command can be one of the following:
- Path to an xml file
- Path to a json file
- Xml or json string of the data structure.
Cascade displays dropdown list and textbox controls. Changes made to a dropdown affect the trailing controls. For example, the first dropdown can be of a list of countries while the second a list of provinces/states and a third a list of cities. Changing the country will change the values of the following dropdowns accordingly. Province dropdown can be hidden if the country does not have provinces and so on. Text boxes can also be added to enter, for example, default addresses.
Notes:
- The cascade command must start with a dropdown list and can be followed by any number of dropdown lists, text boxes and hidden fields.
- When writing json string make sure that the dropdown, textbox and hidden parts of the data under details are arrays even if they contain one entry, that is, surrounded by [ ].
- A placeholder attribute can be added to textbox type control to show when the box is empty.
Invoking the Cascade command
The cascade block can be used just like other blocks with the block name inside curly braces {Cascade Block Name}. This, however, will insert two pipe characters ‘||’ as separators. Replace command can be used to replace these with other code like <nextline>.
A specific value can be retrieved using the following syntax {BlockName::Field No}
Example:
{BlockName::1} to get the first field
{BlockName::2} to get the second field and so on.
Instead of using the replace command, you can add the replacement string inside the call to the block (provided it is not a number):
{BlockName::<nextline>}
The above will return the whole entry with empty fields ignored.
Sample Xml string (or content of xml file)
<cascade>
<dropdown name="Country">
<data text="Australia" value="Australia" show="City-Australia" />
<data text="Canada" value="Canada" show="City-Canada" />
<data text="France" value="France" />
<data text="Spain" value="Spain" />
<data text="USA" value="USA" show="City-USA" selected="true" />
</dropdown>
<details>
<dropdown name="City-Australia">
<data text="Melbourne" value="Melbourne" show="Address-Melbourne" />
<data text="Sidney" value="Sidney" show="Address-Sidney" />
<data text="Sunbury" value="Sunbury" />
</dropdown>
<dropdown name="City-Canada">
<data text="Toronto" value="Toronto" show="Address-Canada" />
<data text="Vaughan" value="Vaughan" show="Address-Canada" />
<data text="Bolton" value="Bolton" />
</dropdown>
<dropdown name="City-USA">
<data text="Buffalo" value="Buffalo" show="Address-USA" />
<data text="Orlando" value="Orlando" show="Address-USA" selected="true" />
<data text="Los Angeles" value="Los Angeles" />
</dropdown>
<dropdown name="Address-Melbourne">
<data text="Address 1" value="Address 1" show="ClientNo" />
<data text="Address 2" value="Address 2" show="ClientNo" />
<data text="Address 3" value="Address 3" />
</dropdown>
<dropdown name="Address-Sidney">
<data text="Address 1" value="Address 1" show="ClientNo" />
<data text="Address 2" value="Address 2" show="ClientNo" />
<data text="Address 3" value="Address 3" show="Specific-Address3" />
</dropdown>
<dropdown name="Address-USA">
<data text="Address 1" value="Address 1" show="ClientNo" />
<data text="Address 2" value="Address 2" show="ClientNo" selected="true" />
<data text="Address 3" value="Address 3" show="Specific-Address3" />
</dropdown>
<dropdown name="Address-Canada">
<data text="Address 1" value="Address 1" show="ClientNo" />
<data text="Address 2" value="Address 2" show="ClientNo" selected="true" />
<data text="Address 3" value="Address 3" show="Specific-Address3" />
</dropdown>
<dropdown name="Specific-Address3">
<data text="Specific 1" value="Specific 1" show="CLientNo" />
<data text="Specific 2" value="Specific 2" show="CLientNo" />
<data text="Specific 3" value="Specific 3" show="Account" />
</dropdown>
<textbox name="ClientNo" defaultvalue="" show="StartDate" />
<textbox name="StartDate" defaultvalue="" show="EndDate" />
<textbox name="EndDate" defaultvalue="" show="Account" />
<hidden name="Account" defaultvalue="" />
</details>
</cascade>
Sample Json string (or content of json file)
{
"cascade": {
"dropdown": {
"data": [
{
"text": "Australia",
"value": "Australia Value",
"show": "City-Australia"
},
{
"text": "Canada",
"value": "Canada",
"show": "City-Canada"
},
{
"text": "France",
"value": "France"
},
{
"text": "Spain",
"value": "Spain"
},
{
"text": "USA",
"value": "USA",
"show": "City-USA"
}
],
"name": "Country",
"class": "text-danger"
},
"details": {
"dropdown":
[
{
"data": [
{
"text": "Melbourne",
"value": "Melbourne",
"show": "Address-Melbourne"
},
{
"text": "Sidney",
"value": "Sidney",
"show": "Address-Sidney"
},
{
"text": "Sunbury",
"value": "Sunbury"
}
],
"name": "City-Australia",
"class": "form-control"
},
{
"data": [
{
"text": "Toronto",
"value": "Toronto",
"show": "Address-Canada"
},
{
"text": "Vaughan",
"value": "Vaughan",
"show": "Address-Canada"
},
{
"text": "Bolton",
"value": "Bolton"
}
],
"name": "City-Canada"
},
{
"data": [
{
"text": "Buffalo",
"value": "Buffalo",
"show": "Address-USA"
},
{
"text": "Orlando",
"value": "Orlando",
"show": "Address-USA"
},
{
"text": "Los Angeles",
"value": "Los Angeles"
}
],
"name": "City-USA"
},
{
"data": [
{
"text": "Address 1",
"value": "Address 1",
"show": "ClientNo"
},
{
"text": "Address 2",
"value": "Address 2",
"show": "ClientNo"
},
{
"text": "Address 3",
"value": "Address 3"
}
],
"name": "Address-Melbourne"
},
{
"data": [
{
"text": "Address 1",
"value": "Address 1",
"show": "ClientNo"
},
{
"text": "Address 2",
"value": "Address 2",
"show": "ClientNo"
},
{
"text": "Address 3",
"value": "Address 3",
"show": "Specific-Address3"
}
],
"name": "Address-Sidney"
},
{
"data": [
{
"text": "USA Address 1",
"value": "USA Address 1",
"show": "ClientNo"
},
{
"text": "USA Address 2",
"value": "USA Address 2",
"show": "ClientNo"
},
{
"text": "USA Address 3",
"value": "USA Address 3",
"show": "Specific-Address3"
}
],
"name": "Address-USA"
},
{
"data": [
{
"text": "Specific 1",
"value": "Specific 1",
"show": "ClientNo"
},
{
"text": "Specific 2",
"value": "Specific 2",
"show": "ClientNo"
},
{
"text": "Specific 3",
"value": "Specific 3",
"show": "Account"
}
],
"name": "Specific-Address3"
}
],
"textbox": [
{
"name": "ClientNo",
"defaultvalue": "Enter Client Value",
"show": "StartDate"
},
{
"name": "StartDate",
"defaultvalue": "Start Date",
"show": "EndDate"
},
{
"name": "EndDate",
"defaultvalue": "End Date",
"show": "Account"
}
],
"hidden": [
{
"name": "Account",
"defaultvalue": "Hidden Value"
}
]
}
}
Working Sample
<cascade>
<dropdown name="Country">
<data text="Australia" value="Australia" show="City-Australia" />
<data text="Canada" value="Canada" show="City-Canada" />
<data text="France" value="France" />
<data text="Spain" value="Spain" />
<data text="USA" value="USA" show="City-USA" selected="true" />
</dropdown>
<details>
<dropdown name="City-Australia">
<data text="Melbourne" value="Melbourne" selected="true" show="Address-Melbourne"/>
<data text="Sidney" value="Sidney" show="Address-Sidney" />
<data text="Sunbury" value="Sunbury" />
</dropdown>
<dropdown name="City-Canada">
<data text="Toronto" value="Toronto" />
<data text="Vaughan" value="Vaughan" />
<data text="Bolton" value="Bolton" />
</dropdown>
<dropdown name="City-USA">
<data text="Buffalo" value="Buffalo" />
<data text="Orlando" value="Orlando"/>
<data text="Los Angeles" value="Los Angeles" />
</dropdown>
<dropdown name="Address-Melbourne">
<data text="Mel Address 1" value="Address 1" show="ClientNo" />
<data text="Mel Address 2" value="Address 2" show="ClientNo" selected="true" />
<data text="Mel Address 3" value="Address 3" />
</dropdown>
<dropdown name="Address-Sidney">
<data text="Sid Address 1" value="Address 1" show="ClientNo" />
<data text="Sid Address 2" value="Address 2" show="ClientNo" />
<data text="Sid Address 3" value="Address 3" show="Specific-Address3" />
</dropdown>
<dropdown name="Address-USA">
<data text="Address 1" value="Address 1" show="ClientNo" />
<data text="Address 2" value="Address 2" show="ClientNo" selected="true" />
<data text="Address 3" value="Address 3" show="Specific-Address3" />
</dropdown>
<dropdown name="Address-Canada">
<data text="Address 1" value="Address 1" show="ClientNo" />
<data text="Address 2" value="Address 2" show="ClientNo" selected="true" />
<data text="Address 3" value="Address 3" show="Specific-Address3" />
</dropdown>
<dropdown name="Specific-Address3">
<data text="Specific 1" value="Specific 1" show="CLientNo" />
<data text="Specific 2" value="Specific 2" show="CLientNo" />
<data text="Specific 3" value="Specific 3" />
</dropdown>
<textbox name="ClientNo" defaultvalue="" />
<textbox name="StartDate" defaultvalue="" />
<textbox name="EndDate" defaultvalue="" />
<hidden name="Account" defaultvalue="" />
</details>
</cascade>
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article