1. The 3.8 code for Fabrik is now available on github, in the 'master' branch. If you are familiar with updating Fabrik from github, we would appreciate it if you could test this code on J! 3.8 for us. Once we have some feedback, we'll build a 3.8 release.

Cascading DropDown element

Feb 16, 2015
Cascading DropDown element

  • Introduction(top)


    Cascading dropdown allows for the content of a dropdown element’s choices to be dependent on another element. Typical examples of application would be to have state or province drop down adjust to the country selection or a list of libraries dropdown offer different content based on the city entered in another element.

    Options (top)


    cdd-options.png

    • Hidden - is the element hidden
    • Eval - Do you want to evaluate (PHP) the default value Element default examples.
    • Default - The default value to use when adding a record. Note - this is only evaluated on record creation. Use calc, if you need ongoing evaluation.

    Data(top)


    cdd-data.png

    • Render as - How to render the cascading dropdown.
    • Connection The Fabrik connection containing the list we will use as the element's data. Note: Fabrik can not join across connections, so the selected connection must be the same as the list's connection!
    • List - the Fabrik table that we want to use for the dropdown's data
    • ID - the Fabrik list element that contains the value we want to use for each dropdown option - this is the data that is recorded in the database and should normally be the lists' primary key. The primary key field is suffixed with "[Recommended]" (as shown in the screen shot above)
    • Label - the Fabrik table element that contains the data used for the option label - this is the text that the user sees for each of the drop down options.
    • Or Concat label - OPTIONAL MySQL CONCAT statement to use instead of individual element, such as `{thistable}.last_name, ', ', {thistable}.first_name`. Leave blank to use the element selected in the 'Label' dropdown. Use the {thistable} placeholder to ensure correct table name is used (which might have a _N suffix if more than one join is used to the same table)
    • Placeholder - if using 'Render as => auto-complete' then you can specify the HTML5 placeholder text to use when no value is selected
    • Max width - If using 'Render as => dropdown' then you can state the max-width for the element. Useful to truncate very long option labels.

    Watch(top)

    cdd-watch.png
    • Watch element - The element name to watch. When this element's value changes the options in the cascading drop down will be updated.
    • Foreign key - The dropdown's table's field that must contain the same value as the selected 'watch elements' value.
    cdd-advanced.png
    • Where query - filter the drop down options with an additional where query. Don't include 'where' in the text you enter here - e.g "active = 1"
    • Show please select - Add a "please select" option to the top of the drop down's options
    • Please select label - text to show for the "please select" option
    • Eval options - PHP code to run to alter the element options. Each option is an object and can be referenced in the eval code with the variable $opt. It has two properties $opt->value and $opt->text

    Front end (top)


    cdd-frontend.png
    • Link to joined record - If the element is read only and this option turned on the the read only text is turned into a link which points to a detailed view of the joined record. In the front end example above this would take you through to a detailed view of a region record.
    • Description field - In addtion you can select a field from the selected 'Table' which contains additional information about the selected option. This addtional information will be displayed alongside the dropdown and changes as different selections are made.

    Example Form using Country-Region (top)


    Precondition: existing fabrik lists

    Country: elements id, country_name

    Region: elements id, region_name, country_id(which stores the country id, e.g. a databasejoin element to Country) and some additional elements like active, region_abbr


    [​IMG]

    In this above example,

    country is a databasejoin element pointing to the Country list, Value=id, Label= country_name

    Region dropdown is the cascading dropdown element which should be triggered by the country element.


    The setup of the CDD element:

    List: region
    id: id [Recommended]
    Label: region_name [alternatively, or CONCAT label can be used to output region.region_abbr, ' - ', region.region_name to show both the abbreviated and the full name spaced by a hyphen]
    Watch element: country
    Foreign key': country_id
    [Where query: active = 1] optionally a filter can be set up
  • Loading...