How to implement initial sorting in SAP UI5 Smart Table

0
votes

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.

2
javascriptsapui5
Can you show the code snippet for adding sorter in "beforeRebind" event handler? Normally it should not break personalization unless you override the standard properties in the event parameters. - Andrii Naumovych
Yes I did add a sorter in the event parameters on beforeRebind table. Is there any other way to achieve it? - Dibya Ranjan
I guess no, but this is the most correct one, if you could show how exactly did you set the sorter, I could see the potential anomalies. - Andrii Naumovych
mBindingParams.sorter=new sap.ui.model.Sorter("propertyName", true); This is how I tried adding the sorter. - Dibya Ranjan
Read the FAQ question #8: sapui5.netweaver.ondemand.com/sdk/#/topic/… - Andrii Naumovych

2 Answers

1
votes

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

0
votes

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!