Cascade

Modified on Tue, Jul 4, 2023 at 2:52 PM

Use Casacde Dropdowns in one Block

Usage

The value of the 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.
A title attribute can be added to show as control title. It is applied to dropdown lists and textboxes under details tag.

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 . 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:: } The above will return the whole entry with empty fields ignored.

Recognized Tags

cascade	Main Root Tag
dropdown	dropdown list control (Only one tag Must appear directly under cascade while any number of dropdowns can be added under the details tag.
Tags underneath : data
details	Parent to all controls except the main dropdown
Tags underneath: dropdown, textbox and hidden
data	Appears inside a dropdown tag to hold data (option tag of a select html dropdown)
textbox	Displays a Textbox (input) control
hidden	Adds a hidden field – a default value must be added

Recognized Attributes

Dropdown Lists, Textboxes and Hidden Fields
name	name of the control (Dropdown, Textbox or Hidden field)
show	shows the control with the same name underneath
Dropdown Lists and Textboxes
class	css class – can be applied to dropdowns and textboxes (form-control class is automatically added if there is no class specified, if needed then added it manually to your class)
title	optional title to the control, can appear on top of dropdowns and text boxes
Dropdown Lists
text	text to appear in a data option of a dropdown list
value	text to print when a data option is selected
selected	default selected data of a dropdown – selected="true"
Textboxes and Hidden Fields
defaultvalue	defaultvalue default value of a textbox
Textboxes
placeholder	text to appear when a control is empty

Cascade Structure

Sample Xml string (or content of xml file)

Cascade Structure

Download sample JSON file Download sample XML file

Another view of how the lines in the xml or json are linked:

Cascade Structure

Cascade and User Fields ( 1 & 2 )

A parameter is recognized in status command of the block containing cascade command:
cascade=userfield1 or cascade=userfield2
The first dropdown will be filtered based on its 'value' parameter in comparison with the value (or comma separated values) of user field 1 or 2. Values are case insensitive.

Example:

Status Command: cascade=userfield1
User 1: UserField1="Canada"
The cascade will start with a single value dropdown for Canada, all other dropdowns are removed.
User 2: UserField1="Canada,USA" – can also be entered as "canada , usa"
The cascade will start with a dropdown for country having two options only Canada and USA
User 3: UserField1=""
No option will appear – Error
Special Case: to show all options use UserField1="ALL" (in UPPER CASE)

Cascade with Images

Add a separator command to the Cascade Block with the value: ^The id must be ‘cascade_’ followed by the block name replacing any spaces with underscores. For the above, the Block name is ‘Quote 1’, thus the name is cascade_Quote_1. Notice the capital letter Q in the id.
The idea is to add an image for the cascade dropdown to find and places the image into. The displayed value is what’s been used and not any of the underneath values. For the example above the returned value is just a name, so two more attributes were added to build up the page:
data-path: contains the image path and must end with /
data-ext: holds the extension with the dot
The code simply concatenates the data-path + the text coming from the first cascade dropdown + data-ext.
Example: if the text selected in Lion then the file with the full path would be

/Storage/67/2014/0/Assets/Images/Book/Lion.png

Note:
Instead of the images with a separator commands, the images can be added in the Bootstrap Layout just following the same rules for id, data-path and data-ext.

Cascade with Culture

Multiple cascade xml files can be used to provide culture support. The syntax used is:
File path (that starts with ~/)
Followed by ::::
Followed by comma or space separated cultures like en-us,en-ca
Followed by ; then the structure repeats
A file that is not followed by :::: and a culture is the default

~/FilePath_default.xml;~/FilePath_fr.xml::::fr-fr;~/FilePath_es.xml::::es-es,es-mx

Example
~/Storage/1/1/0/Assets/Documents/Cascade/SimpleCascade.xml;~/Storage/1/1/0/Assets/Documents/Cascade/SimpleCascadefr.xml::::fr-fr;~/Storage/1/1/0/Assets/Documents/Cascade/SimpleCascadees.xml::::es-es,es-mx;~/Storage/1/1/0/Assets/Documents/Cascade/SimpleCascadegb.xml::::en-gb

Attachments (2)

xml

cascade.xml
2.43 KB

json

cascade.json
7.48 KB