Using Resource Templates

Resource templates can be passed using the resource middleware to any widget that has a resource property exposed with the resources middleware.

MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

import MyResourceAwareWidget from './MyResourceAwareWidget';

const resource = createResourceMiddleware();
const factory = create({ resource });

interface MyResourceType {
    value: string;
}

const template = createResourceTemplate<MyResourceType>({
    read: (request, controls) => {
        // use the request to get the required data
        // use the controls to populate the resource
    }
});

export factory(function MyWidget({ middleware: { resource }}) {
    return (
        <div>
            <MyResourceAwareWidget resource={resource({ template })}>
        </div>
    );
});

Passing Initialization Options

Initialization options can be passed with any template created using the createResourceTemplateWithInit factory and are passed to the template's init function to initialize the resource. The initOptions include an id used to identify the backing resource and optional data that can be added to the resource on creation.

MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

import MyResourceAwareWidget from './MyResourceAwareWidget';

const resource = createResourceMiddleware();
const factory = create({ resource });

interface MyResourceType {
    value: string;
}

const template = createResourceTemplate<MyResourceType>({
    read: (request, controls) => {
        // use the request to get the required data
        // use the controls to populate the resource
    }
});

export factory(function MyWidget({ id, middleware: { resource }}) {
    return (
        <div>
            <MyResourceAwareWidget resource={resource({ template, initOptions: { id, data: [{ value: 'foo'}, { value: 'bar'}] } } )}>
        </div>
    );
});

Transforming Data

When a widget has been configured with to use resources middleware with a different data interface to the template a "transform" descriptor is required. The transform is an object keyed by a key of the resources middleware type that maps to a key of the resource template type.

MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

import MyResourceAwareWidget from './MyResourceAwareWidget';

const resource = createResourceMiddleware();
const factory = create({ resource });

interface MyResourceType {
    custom: string;
}

const template = createResourceTemplate<MyResourceType>({
    read: (request, controls) => {
        // use the request to get the required data
        // use the controls to populate the resource
    }
});

export factory(function MyWidget({ id, middleware: { resource }}) {
    return (
        <div>
            <MyResourceAwareWidget resource={resource({ template, transform: { value: 'custom' }, initOptions: { id, data: [{ custom: 'foo'}, { custom: 'bar'}] } })} />
        </div>
    );
});