Data sources

Data sources (aka flexlists) are a concept that allows loading data from multiple sources and present them in a standardized list view, the view should only focus on presentation and navigation.

Flexlist structure

A flexlist consists of one or more sources (presented as tabs in the view) that uses ItemLoaders to load and display its items.

{
    Id: "",
    Name: "",
    NameTranslations: {
        "locale": "localized name"
    },
    Description: "",
    DescriptionTranslations: {
        "locale": "localized description"
    },
    Icon: "",
    AuthQuery: "",
    Sources: [
        {
            Id: "",
            Name: "",
            NameTranslations: {
                "locale": "localized name"
            }
            DatasourceType: "",
            DatasourceUri: "",
            DatasourceAuthQuery: "",
            DatasourceLoadingStrategy: "",
            DisplayModes: [],
            DataGridColumns: [],
            Buttons: [],
            Filters: [],
            Items: [],
            HideSearchBox: false,
            NoItems: {
            },
            HiddenItems: [],
            AuthQuery: ""
        }
    ],
    Breadcrumbs: [
        {
            Id: "",
            Text: "",
            TextTranslations: {
                "locale": "localized text"
            },
            Navigate: "",
            NavigateTranslations: {
                "locale": "localized navigate"
            }
        }
    ],
}

Item Loaders

Each flexlist source is responsible for loading their items, this is done via ItemLoaders and is specified by the DatasourceType.

After the items has been loaded based on the selected DatasourceLoadingStrategy all items that are present in the HiddenItems will be removed as well as all items that fails evaluating their AuthQuery.

Internaly the ItemLoaders uses NextLink concept to keep track of how many items has been loaded from the source in combination of that has been filtered out based on HiddenItems and AuthQuery.

Paginated loading strategy

The Paginated DatasourceLoadingStrategy expects the source to handle pagination, sorting and filtering on its own based on the payload sent.

The payload contains

• range of items to be loaded
  • number of items to skip
  • number of items to take
• search text to filter items on
• the users locale (usually used in combination with search text)
• filter values

Legacy loading strategy

The Legacy DatasourceLoadingStrategy expects the source to return all available items based on the payload sent.

After all items has been loaded from the source the ItemLoader till perform additional filtering such as removing any items that do not match the specified search text as well as sort all of the items and finaly perform the pagination.

This loading strategy don't require as much from the source as the Paginated does but the tradeoff is that you suffers from performance hits with sources with larger data as all items needs to be loaded every time.

The payload contains

• search text to filter items on
• the users locale (usually used in combination with search text)
• filter values

How source items and custom items are combined

A flexlist source support both loading items via an ItemLoader as well as specifying them directly on the source Items (these are referred to as custom items).

It turned out to be quite tricky to combine custom items with paginated source items, the way it currently works is that the flex-list component will inject the custom items where they naturaly fits based on alpha numeric sorting.

This has the effect that even if the source perform a specific sorting on the items returned that will be replaced in the flex-list component in order to ensure the custom items are injected in the correct positions.

How to use the flex-list component

The flex-list component has the modes pre-loaded flexlist, load flexlist and load legacy flexlist. Based on the input parameters the modes will be selected automaticly.

To use a pre-loaded flexlist

<flex-list [flexlist]="loadedFlexlist"></flex-list>

To load a flexlist based on a uri (url or id)
This mode expects an Flexlist object as the response.

<flex-list [uri]="'/api/test/flexlist'"></flex-list>

<flex-list [uri]="'00000000-0000-0000-0000-000000000000'"></flex-list>

To load a legacy flexlist
This mode expects an FlexlistData object to as the response.

<flex-list [legacy-datasource]="'/api/test/flexlist/data'"
           [legacy-metadata-id]="'custom-metadata-id'">
</flex-list>

How to control legacy mode in form presenter

By default the legacy mode will be used in the form presenter in order to not break any existing customer solution.

To change this behaviour and use the [uri] input instead of the [legacy-datasource] you need to add the following to the FormElement.

"ElementOptions": {
    "flexlist-pagination": "true"
},

This can only be done via the database manually as the admin view do not support this ElementOption yet.