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

    Type Alias ViewLayout<T>Beta

    ViewLayout: { order?: LoadOptions["order"] } & T

    Layout configuration for a view

    ViewLayout defines how data should be organized and displayed in a view component. It combines sorting options from LoadOptions with custom layout-specific configuration.

    The layout object can be extended with custom properties to support view-specific settings such as grouping, display mode, active filters, or anything else a view has to remember between renders.

    Type Parameters

    • T extends Record<string, unknown> = Record<string, unknown>

    Type Declaration

    • Optionalorder?: LoadOptions["order"]

      The order to sort objects by for this layout

      Defines one or more sort criteria that determine how items are ordered in the view. Each criterion specifies a field name and sort direction. When multiple criteria are provided, they are applied in sequence.

      The order is compatible with LoadOptions and can be passed directly to repository load methods.

      import { ViewLayout } from '@limetech/lime-web-components';

      // Criteria apply in sequence: objects are sorted by status first, then by
      // priority within each status, and finally by creation time.
      const layout: ViewLayout = {
      order: [
      { name: 'status', direction: 'DESC' },
      { name: 'priority', direction: 'DESC' },
      { name: 'createdtime', direction: 'ASC' },
      ],
      };
    import { ViewLayout } from '@limetech/lime-web-components';

    // The generic parameter adds view-specific settings on top of `order`. It
    // has to be a type alias rather than an interface, because `ViewLayout`
    // constrains it to `Record<string, unknown>`.
    type ListDisplayOptions = {
    displayMode: 'list' | 'grid' | 'compact';
    groupBy?: string;
    showThumbnails: boolean;
    };

    const layout: ViewLayout<ListDisplayOptions> = {
    order: [{ name: 'createdtime', direction: 'DESC' }],
    displayMode: 'list',
    groupBy: 'category',
    showThumbnails: true,
    };
    import { PlatformServiceName, ViewLayout } from '@limetech/lime-web-components';

    const layout: ViewLayout = {
    order: [
    { name: 'priority', direction: 'DESC' },
    { name: 'name', direction: 'ASC' },
    ],
    };

    const repository = platform.get(PlatformServiceName.LimeObjectRepository);

    // `order` is shaped for LoadOptions, so it goes straight to the repository.
    const response = await repository.loadObjects('company', {
    order: layout.order,
    limit: 50,
    });

    const companies = response.objects;