CODEWITHSUNDEEP
javascriptsapui5
Dibya Ranjan
Dibya Ranjan

Reputation: 90

How to implement initial sorting in SAP UI5 Smart Table

I have a smart table, with some custom columns inside it. I would like to sort the table initially based on a certain field, how do I achieve it?

Till now I have tried the following, but it didn't work.

var oSmartTableBatches = this.getView().byId("sapAffectedBatchesSmartTable2");

    oSmartTableAlerts.applyVariant({
        sort: {
            sortItems: [{
                columnKey: "FieldName",
                operation: "Descending"
            }]
        }
    });

I have also tried annotating the entity set with Presentation Variant 

   <Annotation Term="com.sap.vocabularies.UI.v1.PresentationVariant">
    <Record>

        <PropertyValue Property="SortOrder">
            <Collection>
                <Record>
                    <PropertyValue Property="Property" PropertyPath="FieldName"/>
                    <PropertyValue Property="Descending" Boolean="true"/>
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>

I am using odata v2 model.

I also tried using beforeRebindTable function add a sorter, however it breaks the table personaliation dialog, and grouping and filtering doesn't work on table anymore.

Upvotes: 0

Views: 4651

Answers (2)

MJBZA
MJBZA

Reputation: 5018

That applyVariant is only for showing the sorted column in P13N dialog.

The annotation that you used only applied on Grid tables and not responsive tables!

If you want to apply initial sorting you need to have the following event handler:

// define this variable in onInit function or in the controller class level
initView: true,
// smart table event handler 
onBeforeRebindTable: function (oEvent) {
    var mBindingParams = oEvent.getParameter("bindingParams");
    if(this.initView){ 
        // to apply the sort
        mBindingParams.sorter = [new sap.ui.model.Sorter({ path: "FieldName", descending: true})];
        // to short the sorted column in P13N dialog
         var oSmartTable = oEvent.getSource();
         oSmartTable.applyVariant({
           sort: {
               sortItems: [{
                   columnKey: "FieldName",
                   operation: "Descending"
               }]
              }
         });
        // to prevent applying the initial sort all times 
       this.initView = false;
    }           
},

This code sorts the data only when the app is loaded or if user presses on the browser refresh button!

Don't forget to keep the line mBindingParams.sorter = [new sap.ui.model.Sorter({ path: "FieldName", descending: true})]; inside a if condition, otherwise each time that user applies a sort you will overwrite it.

This condition also is possible:

if(mBindingParams.sorter.length === 0)

But in this case user cannot remove the sort conditions. Therefore when he or she removes all sorts in P13N dialog, not only in the initialization time, but in such kind of condition also the initial sort order will be applied!

Upvotes: 0

Andrew Naumovich
Andrew Naumovich

Reputation: 1450

The sorter must be an array of sap.ui.model.Sorter objects, see the documentation.

Upvotes: 1

Related Questions