Developer Kit · Examples
Ordenación dentro de una tabla

En este artículo invitado de Fox Concepts, Christoph te muestra cómo integrar fácilmente una ordenación en la Custom Table. Decide tú mismo en qué columnas y por qué se puede ordenar.
Código de aplicación

let dash := this;
let baseId := "SortableTable_";
let rowHeight := "40px";
let itemHeight := "30px";
let sortBy := Sortierung;
let sortDesc := Absteigend;
function sortableColumnHeader(columnTitle : text,fieldName : text) do
    "Adding a button to the header cell, that writes the actual sort request to helper fields";
    arcCustomLayout({
            uniqueId: baseId + "ColumnHeader_" + columnTitle,
            embedded: true,
            fullscreen: false,
            direction: "horizontal",
            gap: "1px",
            blocks: [{
                    height: "auto",
                    alignX: "left",
                    value: columnTitle
                }, {
                    width: "20px",
                    height: "auto",
                    alignX: "right",
                    value: arcCustomButton({
                            uniqueId: baseId + "HeaderButton_" + columnTitle,
                            embedded: true,
                            icon: GIPMaterialSymbolsV2({
                                    weight: 400,
                                    filling: 1,
                                    icon: "swap_vert",
                                    color: "#3381ff"
                                }),
                            iconPosition: "center",
                            gap: "1px",
                            showBadge: false,
                            actions: [{
                                    recordId: dash.Nr,
                                    type: "update",
                                    field: "A",
                                    value: fieldName
                                }, {
                                    recordId: dash.Nr,
                                    type: "update",
                                    field: "B",
                                    value: sortBy = fieldName and not sortDesc
                                }]
                        })
                }]
        })
end;
function getSortedList(fieldName : text) do
    "Get the sorted list according sort settings";
    let list := if fieldName != null then
            (select Kontakte) order by get(this, fieldName)
        else
            select Kontakte
        end;
    if sortDesc then
        for i in range(cnt(list), 0, -1) do
            item(list, i - 1)
        end
    else
        list
    end
end;
let list := getSortedList(dash.Sortierung);
let data := {
        uniqueListId: baseId,
        tableId: tableId(first(list)),
        height: "500px",
        header: {
            showHeader: true,
            height: rowHeight
        },
        maxHeight: "800px",
        borderColor: "black",
        minHeight: "500px",
        groupedBy: "",
        popupButtonTitle: "Open",
        scrollBar: {
            showScrollBar: true,
            width: "5px",
            height: "5px",
            backgroundColor: "",
            handle: {
                height: "5px",
                borderRadius: "",
                backgroundColor: ""
            }
        },
        table: list.[{
                recordId: Nr,
                rowHeight: "40px",
                columns: [{
                        field: "Vorname",
                        title: sortableColumnHeader("Vorname", "Vorname"),
                        value: Vorname,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Nachname",
                        title: sortableColumnHeader("Nachname", "Nachname"),
                        value: Nachname,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Straße",
                        title: sortableColumnHeader("Straße", "Straße"),
                        value: 'Straße',
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "PLZ",
                        title: sortableColumnHeader("PLZ", "PLZ"),
                        value: PLZ,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Ort",
                        title: sortableColumnHeader("Ort", "Ort"),
                        value: Ort,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "Telefon",
                        title: "Telefon",
                        value: Telefon,
                        width: "220px",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }, {
                        field: "E-Mail",
                        title: "E-Mail",
                        value: 'E-Mail',
                        width: "",
                        actions: [{
                                type: "popup",
                                showPopupButton: false,
                                recordId: Nr
                            }]
                    }]
            }]
    };
arcCustomTable(data)