Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Type Alias ViewFactory<TView, TData>Beta

    ViewFactory: (
        data: TData,
        scope: ContextScope,
        view?: TView,
    ) => TView | undefined

    Factory function to create or transform a view from data

    View factories are pure functions that take input data and produce a view representation. They can create new views from scratch or transform existing views created by previous factories in the chain.

    Whatever a factory returns becomes the view the next factory receives, and the result of the chain if it is the last one. To leave the view untouched, return the view argument. Returning undefined does not skip the factory, it clears the view for every factory after it.

    A factory owns only the object it returns. The view argument was built by another factory, often one from another package, and that factory still counts on the object being what it made. Writing to it changes data the factory does not own, and the result then depends on the order factories were registered in. The factory that made the change is rarely the one that looks broken.

    Copy the view, change the copy, and return the copy. Do not assign to view.title, and do not call view.items.push(...) or view.items.sort(). A spread copies only the top level, so any nested object or array is still the one the previous factory made. Build new nested values too, as the last example below shows.

    To leave the view as it is, return the view argument.

    Nothing in the type stops a factory from changing the view today. The rule is a convention, so a factory that breaks it still compiles. Keep views shaped like plain data, which makes copying a nested value straightforward.

    The same holds for data. Read from it and never write to it.

    A factory should also check that view exists before spreading it, and handle a single concern so that several can be combined.

    Type Parameters

    • TView = unknown
    • TData = unknown

    Type Declaration

      • (data: TData, scope: ContextScope, view?: TView): TView | undefined

      • Parameters

        • data: TData

          the data to create a view for, typically a LimeObject

        • scope: ContextScope

          the ContextScope the view is rendered in. Bound to the consumer's host element so values like the current context, limeobject, user etc. resolve correctly.

        • Optionalview: TView

          the view as it was created by the previous factory, or undefined if this is the first factory in the chain

        Returns TView | undefined

    import { LimeObject, ViewFactory } from '@limetech/lime-web-components';

    interface ListItem {
        id: number;
        title: string;
        icon: string;
    }

    const factory: ViewFactory<ListItem, LimeObject> = (data, scope, view) => {
        return {
            id: data.id,
            title: data.getValue('name'),
            icon: 'file',
        };
    };

    import { LimeObject, ViewFactory } from '@limetech/lime-web-components';

    interface ListItem {
        id: number;
        title: string;
        subtitle?: string;
    }

    const factory: ViewFactory<ListItem, LimeObject> = (data, scope, view) => {
        if (!view) {
            return view;
        }

        return {
            ...view,
            subtitle: data.getLimetype().localname.singular,
        };
    };

    import { LimeObject, ViewFactory } from '@limetech/lime-web-components';

    interface ListItem {
        id: number;
        title: string;
        actions: string[];
    }

    const factory: ViewFactory<ListItem, LimeObject> = (data, scope, view) => {
        if (!view) {
            return view;
        }

        return {
            ...view,
            // A spread only copies the top level, so `view.actions` is still the
            // array the previous factory made. Build a new array from it instead
            // of calling `view.actions.push('archive')`.
            actions: [...view.actions, 'archive'],
        };
    };

    import { LimeObject, ViewFactory } from '@limetech/lime-web-components';

    interface ListItem {
        id: number;
        title: string;
        icon?: string;
    }

    const factory: ViewFactory<ListItem, LimeObject> = (data, scope, view) => {
        if (!view || data.getLimetype().name !== 'company') {
            return view;
        }

        return {
            ...view,
            icon: 'building',
        };
    };

    Settings

    Member Visibility

    On This Page

    Never change the view you are given