Sapui5: How can I set an initial sort order in smarttable?

Question

I have a smart table. How can I set an initial sort order on one or multiple columns of the smarttable?

<mvc:View xmlns:m="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:footerbar="sap.ushell.ui.footerbar"
    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"
    xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
    controllerName="audi.project.definition.controller.Worklist">
    <semantic:SemanticPage id="page">
        <semantic:content>
            <smartTable:SmartTable id="smartTable" entitySet="ProjectHeaderSet" tableBindingPath="/ProjectHeaderSet"
                app:p13nDialogSettings="{sort:{items:[{
                    columnKey: 'Description',
                    operation: 'Ascending'
                }]}}" 
                header="{i18n>/X000558}" showRowCount="true" tableType="Responsive" smartFilterId="prdefWorklistFilterBarId"
                showFullScreenButton="true" useVariantManagement="false" enableAutoBinding="true" ignoredFields="WbsElement,Method,Refnumber"
                initiallyVisibleFields="ProjectDefinition,Description,ZProjecttypeName,ZMsSchemeText">
                <smartTable:customToolbar>
                    <m:OverflowToolbar design="Transparent">
                        <m:ToolbarSpacer/>
                        <m:SearchField id="searchField" tooltip="{i18n>/X000559}" width="auto" search="onSearch" liveChange="onSearchLiveChange"></m:SearchField>
                        <m:Button type="Transparent" press="onCreateBtnPress" icon="sap-icon://add" tooltip="{i18n>/X000053}"/>
                        <m:Button type="Transparent" press="onDeleteBtnPress" icon="sap-icon://delete" tooltip="{i18n>/X000058}"/>
                    </m:OverflowToolbar>
                </smartTable:customToolbar>
                <m:Table id="table" mode="MultiSelect">
                    <m:items>
                        <m:ColumnListItem type="Navigation" press="onPress"/>
                    </m:items>
                </m:Table>
            </smartTable:SmartTable>
        </semantic:content>
    </semantic:SemanticPage>
</mvc:View>

The only part that could be one solution is here:

app:p13nDialogSettings="{sort:{items:[{
    columnKey: 'Description',
    operation: 'Ascending'
}]}}"

Answer 1

Thanks to the answer provided for my another question in this page, I finally reached to an answer for this question. I had to use applyVariant function in the onBindingChange or onInit function of the view. Thus I can call a function like the following each time the view is initiated or the route is matched.

    setInitialSortOrder: function() {
            var oSmartTable = this.getView().byId("mySmartTableId");            
            oSmartTable.applyVariant({
                 sort: {
                          sortItems: [{ 
                                         columnKey: "ColumnId", 
                                         operation:"Ascending"}
                                     ]
                       }
            });
    }

Updated Solution

The other possibility is to use annotation. Using the annotations has some benefices in comparison to the previous solution. You can add a sort order on your set by following this annotation settings:

I found this picture in one of the comments here.

Note: Don't forget to put the following definition in your annotation file:

<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="namespace.EntityContainerName">
        <Annotation Term="Common.ApplyMultiUnitBehaviorForSortingAndFiltering"/>
</Annotations>

Don't forget to update namespace.EntityContainerName based on your namespace and the entity container's name.

Also it shows the sorting sign only on grid table!