Search code examples
sapui5

Sap UI5 dynamic binding on table depending on reference field


List items with toolbar

Hi experts, I am trying to come up with an approval app but not in a master-detail approach. As shown above, i want it to be in a table format with 2 tabs; 1 tab for the list of for approval and 1 other tab for the approved items.

For instance I have the following json data, is it possible to filter the model based on "status" and dynamically bind the filtered result to 1 table only, but will show result based on clicked tab: For Approval tab and Approved tab:

"QNPResult": [
        {
            "QNPNo": "QNP01",
            "MatDesc": "BROWN SUGAR",
            "PY": "38.46",
            "ACT": "35.17",
            "BP": "38.7",
            "OpenPOBal": "33.44",
            "CurrentPrice": "KG",
            "InvStock": "29.04",
            "InvMonth": "Feb 2018",
            "RecoVol": "700,000",
            "BookUntil": "Book until March 2018",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "1"
        },
        {
            "QNPNo": "QNP02",
            "MatDesc": "WHITE SUGAR",
            "PY": "39.46",
            "ACT": "41.17",
            "BP": "48.7",
            "OpenPOBal": "43.44",
            "CurrentPrice": "KG",
            "InvStock": "49.04",
            "InvMonth": "March 2018",
            "RecoVol": "800,000",
            "BookUntil": "Book until March 2019",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "1"
        },
        {
            "QNPNo": "QNP03",
            "MatDesc": "SUGAR",
            "PY": "69.46",
            "ACT": "71.17",
            "BP": "88.7",
            "OpenPOBal": "93.44",
            "CurrentPrice": "KG",
            "InvStock": "19.04",
            "InvMonth": "March 2019",
            "RecoVol": "100,000",
            "BookUntil": "Book until March 2020",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "2"
        }
    ],

Let me know also if there are better way of achieving the design I want. Thanks in advance!


Solution

  • Based on the image you linked, and the behaviour you described I suggest you to use this approach from SAPUI5 SDK - Demo Kit: Icon Tab Bar - Filter
    Take a look at the Controller, the handleIconTabBarSelect method does the trick: based on the selected tab it filters the table's binding oBinding.filter(aFilters); with different set of sap/ui/model/Filter instances.