Dropdown List Server Side Basic Data Binding

Server side data binding allow users to bind large data sets that are not directly accessible as a full collection in client side due to various reasons. Server side data binding can improve performance drastically for large data sets but integration is fairly complex compared to Client Side Basic and Client Side Stream Data Binding techniques. This data binding technique can be used to fetch data via HTTP GET requests on demand.

Unlike in Client Side Basic, Server Side rendering will request for data on dropdown initialization and whenever user performs Filtering or Infinite Scroll operations. Ornamentum has provided an optional opinionated service to integrate external data sources. However, you can build a custom data provider depending on your requirement.

What You Will See

Select
import { Component } from '@angular/core';

import { DropdownDataBindCallback, DropdownHttpResourceFactoryService } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-server-side-basic-usage',
  templateUrl: './server-side-basic-usage.component.html'
})
export class ServerSideBasicUsageComponent {
  public onDataBind: DropdownDataBindCallback<ExampleData>;

  constructor(private resourceFactory: DropdownHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    // 2nd argument is optional. It is used to remap the response schema to dropdown data source interface.
    this.onDataBind = exampleDataResource.onDataBind('/api/data', (response: Observable<any>) => {
      return response.pipe(map((source: any) => {
        return {
          options: source.items,
          count: source.count
        };
      }));
    });
  }
}

Basic Usage

onDataBind: DropdownDataBindCallback<any>   Default Value: undefinedTarget Component: <ng-dropdown>

Server side data bind functionality can be integrated via onDataBind callback function input property. Data source associated logic is decoupled from Ornamentum core module to make it data source agnostic adm easy to customize.

  1. Import DropdownResourceModule along with DropdownModule.

    import {HttpClientModule} from "@angular/common/http";
    
    import { DropdownModule, DropdownResourceModule } from 'ornamentum';
    
    @NgModule({
     ...
     imports: [
        ...
        HttpClientModule, // Import http client module which is required for server side basic data binding
        DropdownModule.forRoot(), // Import dropdown module
        DropdownResourceModule.forRoot() // Import dropdown resource module
      ]
    })
    
  2. Within the target component use DropdownHttpResourceFactoryService to construct an instance of DropdownHttpDataFetchService<T> class. Invoke onDataBind method with the API resource path to get the data bind callback function reference.

    @Component({
      ...
    })
    export class ServerSideBasicUsageComponent {
      public onDataBind: DropdownDataBindCallback<ExampleData>;
    
      constructor(private resourceFactory: DropdownHttpResourceFactoryService) {
        const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
        this.onDataBind = exampleDataResource.onDataBind('/api/data');
      }
    }
    

    or else you can write your own custom data provider without using getResourceProvider in DropdownHttpResourceFactoryService service. Please refer Custom Data Provider documentation for more information.

  3. Set the obtained onDataBind function reference and loadOnScroll input properties of dropdown component.

    <ng-dropdown
      ...
      [loadOnScroll]="true"
      [onDataBind]="onDataBind">
    </ng-dropdown>
    

Data fetch HTTP request (Your backend REST API) should support following

  1. On demand data loading query parameters

    • limit - The limit parameter controls the maximum number of options that may be returned for a single request. If limit is not specified, it will default to 30.

    • offset - Number of records you wish to skip before selecting records with specified limit. For example, if offset is 10 and limit is 5 it should return 5 items starting from 10th index. Note that offset is zero index based.

    Usage scenarios and examples

    1. Page 1 request when limit is 10:

      https://yourapi/resource/path?limit=10&offset=0

    2. Page 2 request when limit is 30:

      https://yourapi/resource/path?limit=30&offset=30

    Refer Infinite Scroll documentation for more information.

  2. Filtering query parameters - query parameters with field name and filter value will get appended when filtering is applied. The format of these query parameters are as follows.

    <field name>=[<name of the field>]&<filter value>=[<applied filter value>]

    • field name - Dropdown filter field. Target field is appended as a query parameter only when filtering is applied on dropdown by enabling filterable.

    • filter value - Filter value is passed when filterable input is true. Filter value is passed as string.

    Usage scenarios and examples

    1. filtering applied - filter and sort order values are appended to the request URL via a query parameter with target field name.

      i.e: data GET request URL generated when Product Type filed is filtered by 'cook' keyword.

      https://yourapi/resource/path?limit=30&offset=0&field=productType&filter=cook

    2. filtering not applied - field name and filter value is not appended to the request URL as a query parameter.

      i.e: data GET request URL generated when Product Type field is not filtered.

      https://yourapi/resource/path?limit=30&offset=0

    Refer Option Filtering documentation for more information.

  3. Service should respond follow DropdownQueryResult<T> schema. However, you can pass a custom response mapper callback function to onDataBind and map the response to DropdownQueryResult<T> schema without making changes in backend API response.

You can inspect network traffic of this page with "/api/data" filter in browser developer tools to understand backend service requests and behaviors of above example.

  Request URL: https://ornamentum.app/api/data?limit=30&offset=0
  Request Method: GET

Custom Data Provider

Server side and client side data binding can be implemented via a custom data provider as Ornamentum data sources are fully decoupled from component logic. Please refer Custom Data Provider for more information.

Client Side Basic Data Binding
Client Side Stream Binding
Server Side Web Socket Data Binding
Custom Data Provider
API Doc - Data Source Input