Sorting in Editable smart table

[appu24]

Hello Experts ,

We have a editable smart table with a button to mass maintain values for a column based on some calculation . the user is trying to sort the column before saving , however the sorting is not considering the values entered by the users. 

the data is refreshed and sorted as per the values in the database . 

what is missing so that it considers the entered values to sort the column in table ?

I was able to produce the same issue in SAPUI5 sample. changed the binding Mode to twoway. modified all the negative values in column "Amount in LC"  sorted the column by Ascending. it still sort considering orginal values  @SAPSupport 

Thanks , 

[appu24 · Accepted solution]

Hello All ,

for someone who is facing similar issue . i managed to achieve the behavior mentioned below 

In View  : i added a separate button with dialog for sorting 

<!--Button to sort Proposal Quanity 
                                    <Button
                                        id="openBtn"
                                        icon="sap-icon://sort"
                                        press="onCustomSort"
                                    />
                                    <p13n:Popup
                                        id="p13nPopup"
                                        title="Sort fields on local data"
                                        close="onp13nPopupClose"
                                    >
                                        <p13n:panels>
                                            <p13n:SortPanel
                                                id="sortPanel"
                                                title="Sort"
                                            />
                                            
                                        </p13n:panels>
                                    </p13n:Popup>

which renders a dialog similar to below 

in Controller 

  onp13nPopupClose(oEvt) {
            if (oEvt.getParameter("reason") == "Ok") {
                this.applyCustomSort();
            },
      applyCustomSort(oEvt) {
            const oView = this.getView();
            const oP13nState = {
                sort: oView.byId("sortPanel").getP13nData()
            };
            var oCustomTable = this.getView().byId("customTable");
            // Get the binding of the table
            var oBinding = oCustomTable.getBinding("items");
            var aData = oBinding.getAllCurrentContexts().map(function (oContext) {
                return oContext.getObject();
            });
            // Define a comparison function based on column values
            var compareFn = function (a, b, fieldName, descending) {
                var valueA = a[fieldName];
                var valueB = b[fieldName];

                // Handle comparison for different data types
                if (isNaN(valueA) === true && isNaN(valueB) === true) {
                    return descending ? valueB.localeCompare(valueA) : valueA.localeCompare(valueB);
                } else if (isNaN(valueA) === false && isNaN(valueB) === false) {
                    return descending ? valueB - valueA : valueA - valueB;
                }
                else {
                    return 0;
                }
            };
            // Prepare the sort objects array
            oP13nState.sort.forEach(function (item) {
                if (item.name == "PROPOSAL_QUANTITY") {
                    // Sort the items array
                    aData.sort(function (a, b) {
                        return compareFn(a, b, item.name, item.descending);
                    });
                }
            });

            //   Update the table rows based on the sorted items
            oCustomTable.removeAllItems();
            // Get the ColumnListItem template
            var oTemplate = oCustomTable.getBindingInfo("items").template;
            //    Add sorted items back to the table
            aData.forEach(function (data) {
                // Clone the template for each item
                var oItem = oTemplate.clone();
                oItem.setBindingContext(new sap.ui.model.Context(oCustomTable.getModel(), oCustomTable.getModel().createKey("/SmartStockReplenishment", data)));
                oCustomTable.addItem(oItem);
            });
        },

[RaminS · Accepted solution]

That is an interesting approach, thanks for sharing your code.

What you could also consider is using a JSON model. JSON models are good for anything you want to do on the client side only. Read data from backend into a JSON model, bind the table to your JSON model and let the table do the sorting, filtering, etc.

That saves you from having to code sorting logic. But at Save, you will have to read from JSON and call the oData save.

Just an option. I've used JSON models a lot (eg. Planning Calendar date calculations) and find then flexible for client-side manipulation.

Ramin.

[RaminS]

One of the principles of Fiori framework in conjunction with SADL and Hana DB is "code pushdown". When you bind a smart-table with a CDS view or a table, the sorting, pagination, filtering all happens at the database layer, not the UI. Every time the user adds a filter, or changes the sorting, or pages down through the data, the engine needs to re-execute the CDS view, and bring back the top 20 records (or whatever # the request specifies).

So if the newly entered data is not stored in the database, the re-execution of the query will not include them.

Have you implemented Draft handling? In a draft enabled scenario as soon as the user leaves an enterable field the value of the field is saved in the draft record. So if you re-sort the result will include the new content.

If you don't have draft-handling, then perhaps you can trap the sorting event in the controller and if in edit mode don't let it sort, ie. don't to a binding update.

[appu24]

Hello RaminS ,

Thanks for your response . You are right however , in our scenario the application is just used to simulate the scenerios on data and nothing is really saved back to DB. we neither have implemented draft . So based on answer i guess instead of using   below sinppet to sort 

var oCustomTable = this.getView().byId("customTable");
var oBinding = oCustomTable.getBinding("items");
var oSorter = new sap.ui.model.Sorter(<fieldName>, true/flase);
oBinding.sort(oSorter);

i will have to implement some custom sorting on client side . ? any reference would be helpful u  have one.

Thanks ,

Appu