Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【SAPUI5】リストのソートとグループ化

More than 1 year has passed since last update.

はじめに

今回は、リストのソート、グループ化の方法についてご紹介します。
Listのプロパティを変更するだけで、簡単に実装できます。

前提:【SAPUI5】入門編の記事まとめ(2)

製品名順にソート

まずは以下のように、製品名順にソートされるようにします。
WS000072.JPG

ソース

App.view.xmlで、Listのプロパティを以下のように追加します。

                            <List 
                                id="productList"
                                items="{
                                    path: 'mPricelist>/products',
                                    sorter: {
                                        path: 'name'
                                    }
                                }">

idは前回フィルタを実装した際に追加したもので、ソートとは関係ありません。
変更前のitems属性は以下の内容でした。
<List items="{mPricelist>/products}">
もともとはpathの内容だけが直接設定されていましたが、今回sorterを追加するのでpathもプロパティ名を明示するようにしました。
sorterには「何順でソートするか」を指定します。今回は製品名順です。
今回はやりませんが、descendingプロパティに"true"を設定すると降順にソートされます。

カテゴリごとにグループ化

モデルに新しい項目「カテゴリ」を追加し、カテゴリごとにグループ化されるようにします。
WS000074.JPG

ソース

まず、Pricelist.jsonファイルに以下のようにcategoryの項目を追加します。
categoryは"Fruits", "Vegetables", "Eggs"の3種類としました。

{ 
    "products" :[
        {
            "name" : "Pumpkin",
            "price": 15.00,
            "currency": "EUR",
            "supplier": "CompanyA",
            "stock": 100,
            "category": "Vegetables"
        },
        {
            "name" : "Apple",
            "price": 200.00,
            "currency": "JPY",
            "supplier": "CompanyB",
            "stock": 99,
            "category": "Fruits"
        },

・・・

次に、App.view.xmlでListのプロパティを以下のように変更します。

                            <List 
                                id="productList"
                                items="{
                                    path: 'mPricelist>/products',
                                    sorter: {
                                        path: 'category',
                                        group: true
                                    }
                                }">

グループ化もsorterのプロパティの一種なので、カテゴリでグループ化すると製品名順のソートは失われてしまいます。
製品名順でソートしつつカテゴリでグループ化したい場合はどうするのかについては、別の機会に調べてみることにします。

Listのプロパティには何が設定できるのか

ソート、グループはListのプロパティに設定できることがわかりました。
しかし、Listのリファレンスを見ても、プロパティに何が指定できるかは書いてありません。
Listオブジェクトの作成時、mSettingsとして色々なプロパティを指定することができるようですが、具体的な設定値は実装サンプルなどを参考にするしかないのかもしれません。今のところのモヤモヤポイントです。
WS000073.JPG

参考にしたページ

Get Started: Setup and Tutorials-Walkthrough-Step 25: Sorting and Grouping

tami
SAPUI5、 Fioriについて学びつつ、アウトプットしていきたいと思います。記事の内容について質問・コメント歓迎です
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away