Databinding

General information about data binding

Those controls that can bind data, can only support some kind of data binding. In the most cases it is request some kind of lists.

Control	Binding property	Binding Types
DropDown	options	Sync and Async
CascadingDropDown	options	Sync and Async
ComboBox	options	Sync and Async
PeoplePicker	filteredPeoples	AsyncFilter

Binder Type

The Databinder Object has to implement different type of interfaces. Here a mapping List:

BinderType	Interface	Return Value	Parameters
Sync	IDataBinder	any[]	controlConfig: Control, lang:string
Async	IDataBinderAsync	Promise<any[]>	controlConfig: Control, lang:string
AsyncFilter	IDataBinderFilterAsync	Promise<any[]>	controlConfig: Control, lang:string, filter: string

Input Parameters

Here an explantion what you get for the different parameters

Parameter	Type	Description
controlConfig	Control	Represents all settings for the control
lang	string	Language used in the form (e.g. en, de or it)
filter	string	If user can filter then here the input from the user

Type Name

The type name is the full control name + the bindign property name. E.g. if your form has the id "testform" and your dropdown control the id "dropDonw1" then as you can see at General Infos the name of the binding property is "options". Then the typename for this binder and this control has to be "testform.dropDonw1_options". In the json you has den define in the attribute

"databinders": [ "options" ],

Example

Definition for the dataBinders (here are tree databinders implemented):

const binders:DataBinder[] = [{
  typeName:"testform.dropDonw1_options",
  binderType: BinderType.Sync,
  binderFunction: {
    retrieveData(controlConfig: Control, lang:string):any[] {
        let dropDonwEntries:IDropdownOption[] = [{
                key: 1,
                text: "Option for DropDown 1"
            },{
                key: 2,
                text: "Option for DropDown 2"
            }];
        return dropDonwEntries;
    }
  }
},
{
  typeName: "testform.pepople_filteredPeoples",
  binderType: BinderType.AsyncFilter,  
  binderFunction: {
    retrieveData(controlConfig: Control, lang:string, filterText: string):Promise<any[]> {
     return new Promise<any[]>((resolve, reject)  => {
        let dropDonwEntries:IPersonaProps[] = [{
          primaryText: "Muster Hans"
        },
        {
          primaryText: "Muster Fritz"
        },
        {
          primaryText: "Müller Roger"
        },
        {
          primaryText: "Müller Mia"
        }];
        let filtered = dropDonwEntries.filter(item => _doesTextStartWith(item.primaryText as string, filterText));
        setTimeout(() => resolve(filtered), 2000);
      });
    }
  }
},
{
  typeName:"testform.cascader1_options",
  binderType: BinderType.Async,    
  binderFunction: {
    retrieveData(controlConfig: Control, lang:string):Promise<any[]> {
      return new Promise<any[]>(resolve => {
        const optionsEN = [{
          'label': '1st Level EN 1',
          'value': 'l11',
          'children': [{
            'label': '2th Level EN',
            'value': 'l2',
            'children': [{
              'label': '3th Level EN',
              'value': 'l3',
            }],
          }, {
            'label': '2st Level EN 2',
            'value': 'l22',
          }],
        }];
        
        const optionsDE = [{
          'label': '1st Level DE 1',
          'value': 'l11',
          'children': [{
            'label': '2th Level DE',
            'value': 'l2',
            'children': [{
              'label': '3th Level DE',
              'value': 'l3',
            }],
          }, {
            'label': '2st Level DE 2',
            'value': 'l22',
          }],
        }];
        let options = lang == "de" ? optionsDE : optionsEN;
        setTimeout(() => resolve(options), 2000);
      });
    }
  }  
}]

Form Definition to set the dataBinders:

ReactDOM.render(
 <Form 
 dataBinders={ binders }
 jsonFormData={jsonForm} />,
 document.getElementById('form') as HTMLElement
);

JSON Definition for thos two binders:

{
    "id": "testform",
    "title": "Test EN",
    "rows": [{
       "columns": [{
            "controls": [{
                "id": "cascader1",
                "title": "Cascading DropDown",
                "databinders": [ "options" ],
                "control_type": [ "CascadingDropDown" ]
            },{
                "id": "dropDonw1",
                "title": "Dropdown",
                "databinders": [ "options" ],
                "control_type": [ "DropDown" ]
            },{
                "id": "pepople",
                "title": "Dropdown",
                "databinders": [ "filteredPeoples" ],
                "control_type": [ "PeoplePicker" ]
            }]
        }]
    }]
}

Now you have bound all tree controls the a databinder with all types