# SunbirdEd Forms

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

#### Video on Extensibility Framework

{% embed url="<https://youtu.be/QFv5rEv-NXc?si=xlMjxYVCOtiX_Bp1&t=82>" %}

{% hint style="info" %}
<https://github.com/Sunbird-Ed/SunbirdEd-forms>
{% endhint %}

| 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                       | <https://www.npmjs.com/package/@project-sunbird/form-service> |
| 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

<https://github.com/Sunbird-Ed/SunbirdEd-forms/blob/release-4.1.0/projects/common-form-elements/src/lib/form/form.component.ts>

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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ed.sunbird.org/use/source-code/reference-apps/independent-libraries/sunbirded-forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.