How to leverage the cascading drop-down using JS for below mentioned business scenario?

Question

One of the Projects I am working on, I have a SharePoint document library and from a metadata perspective I have 3 choice columns.

First Column: 'Programs' with choices as: Closing Dept, Govt Docs, Capital and Assurance.

Second Choice Column: 'Type' with choices as: Debt, Equity, Loans, grants, waiver, memorandum, facts, terms and correspondence.

Third Choice Column: 'Document Type' with choices as: surcharge, legal docs, accounting, tenant draft and subleases. All of the above choice columns are mandatory fields.

Now when a user comes in and uploads a document and as the choice columns are mandatory they will have to select appropriate value from each of them. So this where a tricky part comes into picture.

1. Let's say user uploads file called Document 1 and selects Closing Dept from 'Programs' choice column and then they go to the next choice column called 'Type' to select a value. So now based on selection of value "Closing Dept" in 'Programs' choice column, they only want to see Debt and equity as available choices in the Type choice column rather than seeing all choices that I listed above.

2. Going one step further, let's say they select Debt from Type column then they go to select value from third choice column called 'Document Type'. So in here again they would want to only see surcharge and legal docs rather than seeing all the values for Document Type column.

To cut the long story short, I would want to see filtered list of choices based on selection in a certain choice column. Is this something doable by leveraging the JSOM approach as I am working with SharePoint online/Office365.

Many Thanks in advance.

Answer 1

I think you need to go for lookup columns instead of Choice columns means you need to create three lists naming "Program","Type","Document type" referencing each other and then, you can use SPService Cascade Dropdowns to achieve your goal

Sample code

    $().SPServices.SPCascadeDropdowns({
  relationshipWebURL: "",
  relationshipList: "",
  relationshipListParentColumn: "",
  relationshipListChildColumn: "",
  relationshipListSortColumn: "",
  parentColumn: "",
  childColumn: "",
  CAMLQuery: "",
  CAMLQueryOptions: "<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns></QueryOptions>", // Added in 2013.01
  listName: $().SPServices.SPListNameFromUrl(),
  promptText: "",
  simpleChild: false,            // Added in v0.6.2
  selectSingleOption: false,    // Added in v0.6.2
  matchOnId: false,             // Added in v0.7.1
  completefunc: null,
  debug: false
});

Refer

Cascading Drop down in SharePoint Online

Working With 2/3 level Cascading Dropdown In Sharepoint List

All the best,