DataProvider in OJET

Content

• Quickly show data provider usage
• DataProvider implementation

What is data provider?

A data provider:

• is a container of data set

• provides APIs to view components so then can interact with data

• emit data mutation events

​

Basic use

protected render(): VComponent.VNode {
  const browsers = [
    { value: 'IE', label: 'Internet Explorer' },
    { value: 'FF', label: 'Firefox' },
    { value: 'CH', label: 'Chrome' },
    { value: 'OP', label: 'Opera' },
    { value: 'SA', label: 'Safari' }
  ];

  return <oj-combobox-many options={new ArrayDataProvider(browsers)}></oj-combobox-many>;
}

Use raw json or data provider?

Use data provider if you want to:

• Handle async process
• Prevent built-in features provided by view components
• Use buffer/cache
• Share data between multiple view components
• Get rid of unnecessary rendering (OJET 10)

Types of data provider

1. Data container
2. Decorator
3. Data View

Use as a view

protected render(): VComponent.VNode {
  const employees = [
    { id: '1', firstName: 'Alex', lastName: 'Li' },
    { id: '2', firstName: 'Jack', lastName: 'Rui' }
  ];

  const dataMapping: any = ({ data }) => {
    const { firstName, lastName, id } = data;
    return {
      data: { value: id, label: `${lastName}, ${firstName}` },
      metadata: { key: id }
    };
  };

  const dataProvider = new ListDataProviderView(new ArrayDataProvider(employees), { dataMapping });

  return <oj-combobox-many options={dataProvider}></oj-combobox-many>;
}

Class hierarchy

Key APIs

• fetchFirst
• fetchByKeys
• fetchByOffset
• getCapability

fetchFirst

getCapability

Pre-defined features:

• fetchByKeys
• fetchByOffset
• sort
• filter
• fetchCapability

Filter capability example

Q & A