How to add dynamic drop down for mdms data

Common container name : DynamicMdmsContainer

Dynamic Container Work Flow :-

The MDMS data will get from this API “/egov-mdms-service/v1/_search“ and it will fetch JSON data based on Module name and Master name .
The JSON need to be array of objects and every object must need code as key .
Once get response data from API after that this function “getTransformData“ will transform the data as required format ( The transform will be based on split of '.' separator ) and will store it in “`DynamicMdms.${moduleName}.${rootBlockSub}.${rootBlockSub}Transformed`“ and Original MDMS JSON will be store it in “`DynamicMdms.${moduleName}.${rootBlockSub}.MdmsJson`“.
The first Drop down values will automatically fill when the transform completed . Once you select first drop down after that the next drop down data will fill all values from transformed data based on previous drop down selection and it will continue for next next drop downs.

Ex:

For example consider TL Module : You have 3 drop downs ‘Trade Category' , ‘Trade Type’ , 'Trade Sub Type’

and the MDMS data for this will be in :https://github.com/egovernments/egov-mdms-data/blob/master/data/pb/TradeLicense/TradeType.json

Ex : "code": "GOODS.MANUFACTURE.TST-1”

So here Goods goes into ‘Trade Category' which is first drop down .

Manufacture goes into ‘Trade Type which is second drop down .

TST-1 goes to Trade Sub Type’ which is third drop down .

UI screen configuration for namespace :

Need to form a JSON like below format for Dynamic drop down :-

Example JSON for Trade License - Trade Unit section .

dynamicMdms : {
        uiFramework: "custom-containers",
        componentPath: "DynamicMdmsContainer",
        props: {
          dropdownFields: [
            {
              key : 'tradeCategory'
            },
            {
              key : 'tradeType'
            },
            {
              key : 'tradeSubType',
              callBack: tradeSubTypeChange, // Optional
              isDisabled: false , // Optional,
              defaultValue : '' , //Optional
              fieldType : "autosuggest" // Optional
            }
          ],
          moduleName: "TradeLicense",
          masterName: "TradeType",
          rootBlockSub : 'tradeUnits',
          type : 'TL',
          callBackEdit: updateMdmsDropDowns,
          isDependency : "DynamicMdms.common-masters.structureTypes.structureSubType"
        }
}

isDependency mean - The MDMS api will trigger for given JSON Module and response will save in to redux when the dependency path got value .

callBackEdit mean - It’s for Edit functionality and it will call only for Edit action .

defaultValue mean - If default value exists the Object then the drop down will automatically select mention value if its available in MDMS JSON .

The “dropdownFields” Values are the main picture to manage number of dynamic drop down’s .

In Common container Level Functionality :

First it will trigger API call to get MDMS data Based on Module name and master name after that it will make filter the data based on type ( “TL“ ) .

Once we get response after that this function “getTransformData“ will handle to transform to required format .
First drop down array of value’s will be auto fill once we get response from MDMS Api and transformed.
Then other drop down array of value’s will be transform based on previous drop down selection .

Note : The values are will save to Dynamic path ( redux path ) based on Module name and MasterName .

Ex :-

`DynamicMdms.${moduleName}.${rootBlockSub}.MdmsJson` - In this path the API response will save .

`DynamicMdms.${moduleName}.${rootBlockSub}.${key}` - In this path you can get selected drop down value based on Drop down key which we will get from “dropdownFields” value.

For more functionality please refer this File "dev-packages\egov-ui-framework-core\src\ui-containers\DynamicMdmsContainer\index.js".