Clearing filters on loading a table

Alan Cooke 

To set the column used for sorting a list in a specific tab of the editor, you can use the following code:

var editor = ui.getCurrentEditor(); var customerList = editor.currentTab.components.find(c => c.field.caption == 'List of customers' && c.field.base == "view"); customerList.query.cidxSort = [column_number]; // The column number starts at 0 for the first column.

This code retrieves the current editor and finds the list component with the caption "List of customers." Then, it sets the column to be used for sorting by specifying the desired column index.

To change the sort order of the selected column (ascending or descending), use the following code:

customerList.query.sortDescending = [true or false]; // 'true' for descending order, 'false' for ascending order.

This code adjusts the sort order of the specified column. When sortDescending is set to true, the column is sorted in descending order; otherwise, it is sorted in ascending order.

To simulate a display refresh after modifying the sorting settings, use the following command:

ui.getCurrentEditor().currentTab.nodeChanged();

This method forces the interface to refresh, applying the sorting changes and updating the display accordingly.

Jacques TUR 

... but in the end, it will be easier and more powerful to create an HTML list by adding your own sorting and filtering options. Here is an example in HTML: https://piccalil.li/blog/styling-tables-the-modern-css-way

You can also ask ChatGPT to create the table from scratch by providing it with the structure of your data and the interface you want to have.

As an example, here is what the GPT Ninox by U Man Genius suggested when I asked it to dynamically create a table to display 3 columns from the Customer table, and to allow ascending and descending sorting by clicking on the column headers:

let customers := (select Customer);
let tableHTML := "<table id='customerTable' class='table-ninox'>";
tableHTML := tableHTML + "<thead><tr>";
tableHTML := tableHTML +
    "<th id='header-0' data-ascending='true' onclick='toggleSort(0)'>First Name</th>";
tableHTML := tableHTML +
    "<th id='header-1' data-ascending='true' onclick='toggleSort(1)'>Last Name</th>";
tableHTML := tableHTML +
    "<th id='header-2' data-ascending='true' onclick='toggleSort(2)'>Total</th>";
tableHTML := tableHTML + "</tr></thead><tbody>";
for c in customers do
    let total := sum((select Invoice where Customer = c).TOTAL);
    tableHTML := tableHTML + "<tr>";
    tableHTML := tableHTML + "<td>" + c.'First Name' + "</td>";
    tableHTML := tableHTML + "<td>" + c.'Last Name' + "</td>";
    tableHTML := tableHTML + "<td>" + format(total, "$ #,##0.00") + "</td>";
    tableHTML := tableHTML + "</tr>"
end;
tableHTML := tableHTML + "</tbody></table>";
html("<style>
    .table-ninox { width: 100%; border-collapse: collapse; }
    .table-ninox th, .table-ninox td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    .table-ninox th { cursor: pointer; }
    .table-ninox th:hover { background-color: #f1f1f1; }
    .table-ninox th.sortable::after { content: ' ▲▼'; font-size: 12px; margin-left: 10px; }
    </style>
    <script>
    function sortTable(n, ascending) {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById('customerTable');
        switching = true;
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName('TD')[n];
                y = rows[i + 1].getElementsByTagName('TD')[n];
                if (ascending ? (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) :
                    (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase())) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    }

    function toggleSort(n) {
        var header = document.getElementById('header-' + n);
        var ascending = header.getAttribute('data-ascending') === 'true';
        sortTable(n, !ascending);
        header.setAttribute('data-ascending', !ascending);
        header.innerHTML = header.innerHTML.replace(ascending ? '▲' : '▼', ascending ? '▼' : '▲');
    }
    </script>" +
tableHTML)

Jacques TUR 

Hi Jacques, ChatGPT gave you this code?

how you do that ?

Rafael 
I used the ChatGPT named Ninox by U Man Genius, available in the GPT Store.

I asked it the following question:

"Can you create an HTML field that pulls data from the Customer table and displays the columns 'First Name,' 'Last Name,' and Total? I would like the style to resemble a Ninox table, and I want to be able to sort each column by clicking on an up or down arrow for ascending or descending sorting."

Since the result didn’t dynamically create a table, I added:

"Can you make sure that the table is built from the records in the Customer table?"

Then, I simply copied its response into a formula. Sometimes, you may need to ask it for modifications or adjustments, but most importantly, you can also ask it to explain how it did it and to teach you how to do it yourself. Just tell it things simply; it understands natural language and implicit requests very well.

Alan Cooke No worries - We don't need to know how to ask ChatGBT - We have our own service it's called "ASKJacques"   

Mel Charles You mean JackGPT ? 

Jacques TUR Silly me - of course !!!