Links

SunbirdEd Forms

Contains Form component powered by angular. This component expects a configuration and renders form according to the view.

Video on Extensibility Framework

Criteria
Info
Current Release Branch
release-4.4.0
NPM Published version (Latest)
0.0.14
NPM Package Name
@project-sunbird/form-service
NPM Link
Works
In Angular Projects Only

Getting Started

Step 1: Install the package

npm install common-form-elements --save

Step 2: Include the library selector in view( Eg .HTML file)

<sb-form [config]='config'>

step3: Form component emits values on every input , To get value include event callbacks

<sb-form (valueChanges)="function($event)" (statusChanges)="function($event)" >

Steps to Integrate the form

Please refer following link for sample config
The Form Can render following elements:
  • Text Box
  • Text Area
  • Drop Down (Single)
  • Multi Select Drop Down
Drop Down Data Sources: Drop Down can be provided with multiple types of Data Sources:
  • Static List
  • Closure which is called as MARKER in above config (A function which returns Promise of FieldConfig)
  • API Source - Currently Not Developed (Open For Contribution)
Example of Closure Implementation
buildStateListClosure(config: FieldConfig<any>, initial = false): FieldConfigOptionsBuilder<Location> {
return (formControl: FormControl, _: FormControl, notifyLoading, notifyLoaded) => {
return defer(async () => {
const req: LocationSearchCriteria = {
from: CachedItemRequestSourceFrom.SERVER,
filters: {
type: LocationType.TYPE_STATE
}
};
notifyLoading();
return this.fetchUserLocation(req)
.then((stateLocationList: Location[]) => {
notifyLoaded();
const list = stateLocationList.map((s) => ({ label: s.name, value: s }));
if (config.default && initial) {
const option = list.find((o) => o.value.id === config.default.id || o.label === config.default.name);
formControl.patchValue(option ? option.value : null, { emitModelToViewChange: false });
formControl.markAsPristine();
config.default['code'] = option ? option.value['code'] : config.default['code'];
}
initial = false;
return list;
})
.catch((e) => {
notifyLoaded();
this.commonUtilService.showToast('NO_DATA_FOUND');
console.error(e);
return [];
});
});
};
}
The Logic Inside can be customised to own needs of project.
Function Signature should be as follows:
functionName(config: FieldConfig<any>, initial = false): FieldConfigOptionsBuilder<T>
Last modified 3mo ago