Cascading DropDown Using List
Overview
Template by Sruthy Lal | December 15, 2015

CascadingDropDown enables a common scenario in which the contents of one combobox depends on the selection of another combobox. The Cascading Dropdown Menu allows you to drill down through hierarchical data by using one dropdown menu as a filter into the next. The purpose of this template is to be a reference for any person wishing to implement or any person interested in the architecture of the cascading dropdown for the ClaySys AppForms or how to configure the combo boxes in AppForms with cascading dropdown effect.

Prerequisite(s)
  • Sharepoint 2013
Cascading Form
Data Structure

Sharepoint list is used as a datasource for Cascading. SharePoint lists consist of rows and columns that store data in a similar fashion to a traditional relational database management system such as SQL Server. However, a benefit of lists is that SharePoint includes Web Parts that provide simple methods for managing the data. If the data was stored in a database, it would require custom user interface components to access it and manipulate it. Also, specialized skills are required to design, implement, and maintain a custom database. Another advantage of using lists is that custom workflow and event handlers can easily be registered to them.By default ID, Title, Modified, Created, Modified By, Created By, Attachments columns are available in sharepoint list. Apart from these default list columns , user can add more columns depends on requirement.

SharePoint List
List NameColumn NameData Type

Color

'Color' list is used to populate the color combo box

ColorSingle line of text
MakeIDNumber
ModelNameSingle line of text
SharePoint List
List NameColumn NameData Type

CascadingDropDown

'CascadingDropDown' list is used to fill saved data in cascading home page.

MakeSingle line of text
ColorSingle line of text
ModelSingle line of text
SharePoint List
List NameColumn NameData Type

Model

'Model' list displays model of automobile with respect to make.

MakerSingle line of text
NameSingle line of text
SharePoint List
List NameColumn NameData Type

Make

'Make' list displays the name of automobile manufactures.

NameSingle line of text
Design And Configuration

The Dashboard form contains an "Add New" button, it will navigate to a popup form. In that form we can create a new cascading combination. When the user selects maker from “Make” combo box, model of the car should populated in “Model” combo box and when the user selects model, color of the car should be populated in “Color” combo box. Click "Save" to save the values into a SharePoint list called 'CascadingDropDown' and it will refresh the dashboard form with new item. If the given combination is already existing, then it shows a message so that we can change the combination. We can update the values by clicking on the 'Edit' link button provided in the dashboard form and delete the item by clicking the 'Delete' link button. The values in the combo boxes are populated from SharePoint lists. The ‘Make’ list contains the car maker names. The ‘Model’ list contains the model of the car and the ‘Color’ list contains the color of the cars.

List Of Forms Used
NameFunctionality
Cascading Form Design Rule Design Cascading form is used to understand the cascading combination of dropdowns.
CascadingHome Form Design Rule Design CascadingHome contains all the datas saved in the list via cascading form. User can modify these details from cascadingHome.
Cascading
Cascading Form Design
01
Create Form

Folders are used to store and organize forms that have a logical association or relationship.To create a new form click ‘New Folder’ button on the toolbar of the designer.On clicking the New Folder option, it will create a new folder and the name will be in the edit mode. You can type a new name for the folder.

02
Rename Form

Then click on the ‘New Form’ link on the toolbar. Give an appropriate name for the form. Click ‘Save’ to save the form.

03
Publish Form

You can drag and drop controls format the styles easily.‘Check-In Form’ to save the changes and publish to get the completed form for the end user to use. A form must be checked-out to make modifications while all aspects of the form can be examined while checked-in.

04
Datasource Tab In Quick View

Following steps will explain about the DataSource configuration of ComboBox control.Click on the 'Make' ComboBox and select the DataSources tab to edit the DataSource.

05
Datasource Type

A pop-up window appears to select the item source. Select the appropriate Item source and click ‘OK’ to continue. Here we select the Item Source as ‘SharePoint’

06
Select List Name

Select the SharePoint List in the next window. Click ‘Next’ to continue.

07
Add Criteria

Click “Add” button in the criteria window to Write the appropriate criteria for filling the 'Make' ComboBox in the Criteria Builder . Click ‘Next’ to continue.

08
Select the value member and display member

Select the value member and display member from DataSource wizard. Click ‘Next’ to continue.

09

Click “Add Trigger” in the miscellaneous window.We can select and add the trigger by clicking the check box corresponding to the control.

Control List
Choose Trigger(s)
10

Click ‘Create Rule' in the Manage Rule window to create FilldataSync( ) rule associated with the corresponding control/Event as trigger. Choose whether to Sync the command. By default, the ‘IsSync’ check box is selected.

Rule Created
Sync or Async
11

If you need to display items in any sorting order, select the column name from “Column” and select the "Order". Click “Add” button without fail. Click ‘Finish’ to end the process. Click “Preview”. You can see that Maker names are populating in combo box.

Sort Items
Form Preview
12
Model Criteria

When the user selects ‘Acura’ from Make, Model names should be populated in the 'Model' combo box.To configure the ‘Model’ ComboBox follow the steps for configuring the 'Make' ComboBox upto the list selection. Give the criteria for filling the ‘Model’ combo box as given below

13
Model - Form Preview

Click “Next” to continue. Follow the configuration steps of ‘Make’ combo box to add the trigger for 'Model' combobox. Add trigger as ‘Make’ and complete the configuration.When you select the value from the combobox ‘Make’, the ‘Model’ will populate the Names of corresponding Maker. Click “Preview”.
You can see that Model names are populating in combo box.

14
Color Criteria

Click 'Color' and follow above steps that you followed for 'Make' and 'Model' upto selecting the List.Give the criteria for filling the combo box ‘Color’.

15

Give ‘Make’ and ‘Model’ as a trigger and complete the configuration.Click “Preview”. You can see the Color names are populating in the combobox, corresponding to the values in the other comboboxes.

Adding Trigger(s)
Form Preview
Cascading Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
Rule - FormLoad

In Form Load, temporary variable 'tmpVar' set to zero and fills the combobox control 'cmbMake'.

02
Rule Name : Make | Trigger(s) : cmbMake
Rule - Make

Fill the combobox control named 'cmbModel' and 'cmbColor' if the value of temporary variable 'tmpVar' is zero.

03
Rule Name : Model | Trigger(s) : cmbModel
Rule - Model

If the value of 'tmpVar' is zero then selected value of 'cmbModel' control is passed to the hidden control 'hdnModel' and fills the combobox 'cmbColor'. If the value of 'tmpVar' is one and the 'hdnColor' contains value then fills the 'cmbColor' and pass the value of 'hdnColor' to 'cmbColor'.

04
Rule Name : Save | Trigger(s) : btnSave
Rule - Save

Check the validation. The rule for executing the Insert and Update command on the basis of the value in the hidden control 'hdnID'

and pass the value of 'hdnID' to 'hdnRefresh' in the form 'CascadingHome' to refresh the dashboard.

05
Rule Name : Select | Trigger(s) : hdnSelectID
Rule - Select

The rule is for setting the value of temporary variable 'tmpVar' to one
and executing select command. After executing the 'Select'
command, the value of 'tmpVar' set to zero.

06
Rule Name : Cancel | Trigger(s) : btnCancel
Rule - Cancel

On clicking the Cancel button the popup form is closed.

07
Rule Name : FillDataModel | Trigger(s) : hdnModel
Rule - FillDataModel

If the value of the temporary variable 'tmpVar' is one and hidden control 'hdnModel' contains any value then the combobox control named 'cmbModel' will be filled and set the value of 'hdnModel' to 'cmbModel'.

CascadingHome
CascadingHome Form Design
01
Create Form

Folders are used to store and organize forms that have a logical association or relationship.To create a new form click ‘New Folder’ button on the toolbar of the designer.On clicking the New Folder option, it will create a new folder and the name will be in the edit mode. You can type a new name for the folder.

02
Rename Form

Then click on the ‘New Form’ link on the toolbar. Give an appropriate name for the form. Click ‘Save’ to save the form.

03
Publish Form

You can drag and drop controls format the styles easily.‘Check-In Form’ to save the changes and publish to get the completed form for the end user to use. A form must be checked-out to make modifications while all aspects of the form can be examined while checked-in.

CascadingHome Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
Rule - FormLoad

To fill the search control named 'srcTemplate'

02
Rule Name : Refresh | Trigger(s) : hdnRefresh
Rule - Refresh

'hdnRefresh' gets the value from the 'Cascading' form and fills the search control 'srcTemplate' on its trigger.

03
Rule Name : Delete | Trigger(s) : hdnDelID
Rule - Delete

Executing delete command for delete the item form list and refresh the dashboard search control 'srcTemplate'.

Template Summary

One dropdown content display depend on its parent one, that is called cascading dropdown. In this template, we will get the architecture of the cascading dropdown for the ClaySys AppForms or how to configure the combo boxes in AppForms with cascading dropdown effect.

How To

A how-to is an informal, often short, description of how to accomplish a specific task. A how-to is usually meant to help non-experts, may leave out details that are only important to experts, and may also be greatly simplified from an overall discussion of the topic.

  • Add Web Part

    01

    Click on Site Settings Wheel in the upper right corner of your site and then select “Site Contents Page”.

    02
    SitePages

    Select site pages or simply pages library on site content page.

    03
    Wiki Page

    Click on “new Wiki page” to add new site page.

    04
    New Page

    Give the New page name into the pop-up window and click ‘Create’ to add new page.

    05
    ClaySys HTML WebPart

    To add a new web part, click on the ‘Insert’ tab and then click on the ‘Web Part’ button. Then select ClaySys -> ClaySys HTML Web Part.

    06
    Edit The WebPart

    Click ‘Add’ button to add the Web Part. Click on the ‘edit the Webpart’ link to edit the page.

    07
    WebPart Configuration

    A new pop-up window appears and here we can configure the ClaySys AppForms by clicking on the ‘Configure’ button.

    08
    Selecting Form

    Pop-up appears with listed published forms. We can select the appropriate form by clicking on the form and add the form by clicking on the ‘Select’ button.

    09
    WebPart

    Once the configuration is finished, click on the ‘Apply’ button to see the changes. Click ‘OK’ button.

    10
    WebPart

    Now you can see the web part page you just created, as shown in the following image. Click ‘Save’ button to save the changes.

    11
    Title

    The Forms added to the WebPart may contain "Claysys HTML WebPart" as Default title. The title can be changed by editing the Title in the "Appearance" after configuring the form.

  • Import Tenant

    01
    Backup and Restore

    Click on the “Back Up and Restore” on the left side of the AppForm Designer window. Then click on ‘Import Site’ -> Browse the Tenant and click Load.

    02
    Mapping Site

    Select the ‘Zip File’ and ‘Site Name’ and click ‘Next’.

    03
    Datasource Mapping

    Click ‘Next’ button.

    04

    Click on ’Import’ button . Once it done you are free to work with the form in the new site.

    List Mapping
    Import Tenant
  • Upload List Template

    01

    On the right corner of the window, click on settings.

    02
    List Template

    Click on 'Site settings' from the drop down menu , then we can see the following window appearing.

    03
    List Template Gallery

    Click on 'List template' option as shown in the above image. And we can see 'List Template Gallery'. Click on 'Files' at the leftmost corner as shown in the following image.

    04
    Uploading Document

    Click on 'Upload Document'.

    05
    Add Template

    Following Pop up will appear where we can browse a list template stored in our computer and click 'OK' button.

    06
    Template Naming

    Following Pop up will appear where we can change the name of the List Template and enter the Description as required and click on 'Save button'.

    07
    Adding an App

    Now go to the Required sub site, click 'Settings' on the right corner (as done in step '1'). Then click on 'Site Contents'. Following Screen appears in which click on 'add an app'.

    08
    Apps

    Following screen will appear where we can type the uploaded template name and click search.

    09
    Uploaded Template

    Then you can see the Uploaded template ,Click on it .

    10
    List Naming

    On clicking it ,we will get following Pop up . Enter the name for the List template and click 'Create' button.

Downloads
No downloads has been associated with this template.

Sruthy Lal

I love pushing the limits to see what I can do next. I do what I love and I love what I do.

Leave a Reply