Sunbird-ED Forms

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

---

Getting started

How to use @project-sunbird/common-form-elements in your projects

Table of Contents

• Using library locally
• Step 1: Install the package
• Step 2: Include the library selector in view( Eg .HTML file)
• Step 3: Form component emits values on every input , To get value include event callbacks
• Steps to Integrate the form
• Versions

---

Using library locally

1. Build library

npm run build-lib

2. link library -> cd dist/common-form-elements

npm link

3. Link the library to your project

npm link @project-sunbird/common-form-elements

---

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

Step 3: 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>

Versions

Release branch	npm package version	Angular Version
release-5.0.1	5.0.1	Ng V9
release-5.1.0_v10	5.1.0	Ng V10
release-5.1.0_v11	5.1.1	Ng V11
release-5.1.0_v12	5.1.2	Ng V12
release-6.0.0_v13	6.0.0	Ng V13
release-6.0.0_v14	6.0.1/6.0.2/6.0.3	Ng V14
8.0.0_v15	8.0.0	Ng V15
8.0.0_v16	8.0.1	Ng V16

Code Quality

The project maintains code quality through automated checks that run on every pull request:

1. Linting

   • ESLint for code style and quality
   • Command: npm run lint

2. Dependencies

   • Uses npm ci for deterministic installations
   • GitHub Actions cache for faster builds (e.g., node_modules). See GitHub Actions workflow for caching configuration details.

3. Code Formatting

   • Ensures consistent code formatting
   • Can be automatically fixed using npm run lint:fix

4. Testing

   • Unit tests using Karma
   • Command: npm run test

These checks ensure consistent code style, secure dependency management, and reliable testing.

Package Publishing

Workflow automatically builds and publishes NPM packages whenever a new tag is pushed to the repository.

Publish Workflow

The workflow is triggered on:

• Triggered on push events for any Git tag

Key features of the workflow:

1. Automatically builds the project
2. Creates NPM package
3. Publishes to NPM registry using NPM authentication token (must be provided as GitHub secret NPM_TOKEN)