Sorting binded documents

Client
1

Heyho,

i have a FM with a Data Binding component. There is no Edit Mode, so we only have Selected Items. I want to sort them, but I’ve find no solution for it.

Either i am not quite sure how to implement it, except for writing a Middleware and sort the list in the SET_LINKS action, which seems wrong, because the sorted list should come from the backend, so theoretically paging would work correctly. Furthermore i set the columns in my Overview sortable, but it do nothing at the end. We use the RequestSelectorMap for adapting the Query a bit, but unfortunately the targetDocument is not the link, it is the parent document and i didn’t find anything the you can enable sorting on linked entities somehow.

So which is the intended way(s) doing it ?

Happy regards,

Tjorben

2

Hi Tjorben,
in the A12 version 2024.06-ext2, an example was provided how to custumize the Form Engine in order to sort the entries in CDM bindings (for more details see A12-16010):

  • Create your custom Form Engine
export default function CustomFormEngine(props: View): JSX.Element {
    return <FormEngineViews.FormEngine {...props} formModelMap={CustomFormModelMap}/>;
}
  • Use createRelationshipFormModelMap with the optional componentProvider (here you will define the sorting only for “DualPaneSelection”, but you can also do it for “TableList”)
const CustomFormModelMap: FormModelMap = {
    ...DefaultFormModelMap,
    ...createRelationshipFormModelMap({
        componentProvider: config => {
            if (config.name === "DualPaneSelection") {
                return {type: "MultiSelection", component: CustomDualPane};
            }
            return undefined;
        }
    })
};
  • Implement the coresponding custom component
function CustomDualPane(props: RelationshipViews.MultiSelectionProps) {
    const assignments = React.useMemo(() => {
        if (props.assignments.loadingState !== "loaded") {
            return props.assignments;
        }
        return {...props.assignments, data: [...props.assignments.data].sort(sortFunction)};
    }, [props.assignments]);

    return <DualPaneSelection {...props} assignments={assignments}/>;
}
  • Implement your specific sorting
interface Item {
    documentJson: any | undefined;
}

const sortFunction = (a1: Item, a2: Item) => {
    const a1Name = a1.documentJson?.target?.Person?.PersonalData.FirstName;
    const a2Name = a2.documentJson?.target?.Person?.PersonalData.FirstName;
    if (a1Name === a2Name) {
        return 0;
    }
    if (a1Name > a2Name) {
        return 1;
    }
    return -1;
};

You just have to use your Form Engine implementation in ViewProvider instead the default one. The end user won’t be able to sort the entries, but at least the entries will be presented in a sorted way.

The support for modelers has been addressed with the ticket A12-16385, where the effect of the column property “sortable” will be implemented for binded documents.

3

… and if you are not in a CDM Form, make sure that your Selected Items side of the Binding loads all the selected entries (and not just a part=page of it). You must increase the Page Size and the Data Services limit according to your use case/expected data amount.

The backend sorting shall be enabled in the Relationship Engine with A12-17973. (Note the difference between CDM / TableList+Modal (must be done in Client) and “Regular TableList-Only“ (could be done on Server, if no edit modal))

4

hi, I have the same problem in Version 2025.06-ext2:

The SortOrder from “Selected Itemes Overview” is ignored in a composed FM.

Is there a clean work-around how to fix it with a link to a sample in the current version please?

Is this enforce sorting bei extention the preferred solution, if we just need an initial sorting?

Regards, Gunther

5

Hi @gunther-stable-thorn,

by design, the selected items (link) table can only be paginated — it cannot be sorted or filtered by the user or via model configuration. This is documented in the Relationship Engine dev docs:

“The list of candidates can be filtered, sorted and paginated while the link table can only be paginated.”

Setting SortOrder on the Selected Items Overview model has no effect. The sort must be applied client-side.

I don’t know any sample implementation for the current version, but the approach from the 2024.06 solution still applies in 2025.06-ext2 and is the customization path. The API is identical, with updated component/prop types for TableList.

Yes — it is the only supported client-side workaround for initial (static) sorting of selected items.

Since this thread is already solved, I would suggest to open a new thread with your specific issues, especially, why the suggested solution is not working for you.

6

thanks for confirmation. May be You can provide the last 2 lines of code to solve the problem without new topic :sweat_smile:

I copied the code from GetA12

import { call, SagaGenerator } from 'typed-redux-saga';

import { DataOperation, maybeAsyncFnWrapper, OverviewEngineDataLoader } from '@com.mgmtp.a12.overviewengine/overviewengine-core';
import { Query } from '@com.mgmtp.a12.dataservices/dataservices-access';
import { OverviewEngineFactories } from '@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/client-extensions';


export const CustomOvDataLoader: OverviewEngineDataLoader = {
    *provideData(params): SagaGenerator<DataOperation.ResultSet> {
        const { queries, documentModel } = params;
        const [query, ...otherQueries] = queries;
        let updatedQuery = query;

        // ggf sollte man hier eine bestehende Sortorder nicht überschreiben..sort: query.sort ?? [..]
        if (DataOperation.ListDocuments.Query.isAssignableFrom(query) && documentModel.header.id === "Beleg_DM") {
            updatedQuery = {
                ...query,
                sort: [
                    {
                        field: "/Beleg/LaufendeNummer",
                        direction: Query.Direction.ASC,
                        ignoreCase: false,
                        nullHandling: Query.NullHandling.NULLS_LAST
                    }
                ]
            };
        }

        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        return yield* call(maybeAsyncFnWrapper(OverviewEngineFactories.dataLoader.provideData), {
            ...params,
            queries: [updatedQuery, ...otherQueries]
        });
    }
};

and don’t know how to integrate it in appsetup.ts Tried it like this:

export function setup(): {
    config: ApplicationSetup;
    initialStoreActions(): Promise<void>;
} {
    const dataHandlers: DataHandler[] = [
        createCddDataProvider(),
        createEmptyDocumentDataProvider(),
        RelationshipFactories.createRelationshipDataProvider(),
        ...OverviewEngineFactories.createDataProviders({ dataLoader: CustomOvDataLoader }),
        platformSingleDocumentDataProvider
    ];

What would be the right way? And where to find the working sample code for 2024.06?

Best Regards, Gunther

7

As You suggested, I created a new topic: Sorting binded documents in Composed Form Model

8

Hi, your setup is correct and recommended. For 2024.06, you can use the same OverviewEngineFactories.createDataProviders function with a slightly different signature. Our preview app has the similar setup, maybe you can have a look.

9

Where can we find the sources of the preview app. I searched in geta12 for a link and in artifactory.

Regards Gunther