Динамическая привязка Sap UI5 к таблице в зависимости от поля ссылки

avatar
Henry Caparas
22 декабря 2017 в 07:30
979
3
1

Список элементов с панелью инструментов

Здравствуйте, эксперты, я пытаюсь придумать приложение для утверждения, но не в подходе «основной-детальный». Как показано выше, я хочу, чтобы он был в формате таблицы с 2 вкладками; 1 вкладка для списка на утверждение и 1 другая вкладка для утвержденных элементов.

Например, у меня есть следующие данные json, можно ли фильтровать модель на основе «статуса» и динамически привязывать отфильтрованный результат только к 1 таблице, но отображать результат на основе нажатой вкладки: для вкладки «Утверждение» и вкладки «Утверждено» :

"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"
        }
    ],

Дайте мне также знать, есть ли лучший способ добиться желаемого дизайна. Заранее спасибо!

Источник
santhosh
22 декабря 2017 в 11:52
0

Эти данные JSON, которые вы показываете, являются локальными данными или поступают из службы oData?

Henry Caparas
27 декабря 2017 в 06:12
0

Привет, Сантош, это просто фиктивные данные, поступающие из локальных данных (файл json)

Ответы (3)

avatar
Péter Cataño
25 декабря 2017 в 21:54
2

Основываясь на изображении, на которое вы ссылаетесь, и на описанном вами поведении, я предлагаю вам использовать этот подход из SAPUI5 SDK — Demo Kit: Панель вкладок со значками — Фильтр
Взгляните на контроллер, метод handleIconTabBarSelect делает свое дело: на основе выбранной вкладки он фильтрует привязку таблицы oBinding.filter(aFilters); с другим набором экземпляров sap/ui/model/Filter.

Henry Caparas
27 декабря 2017 в 06:19
0

именно то, что я ищу! Спасибо, @Péter Cataño

Péter Cataño
27 декабря 2017 в 11:47
2

добро пожаловать @Henry Caparas, не могли бы вы принять ответ?

Boghyon Hoffmann
3 января 2018 в 12:20
0

Думаю, его не уведомили. Повторяю попытку без пробела между ними: @HenryCaparas

Péter Cataño
3 января 2018 в 12:27
0

Спасибо @boghyon, я пытался, кстати, при упоминании кого-либо подсказка говорит, что владелец поста всегда будет уведомлен.

Boghyon Hoffmann
3 января 2018 в 12:47
0

Насколько я знаю, в данном случае «владелец поста» — это вы. Поэтому мне не нужно упоминать ваше имя здесь, чтобы уведомить вас, но я должен указать имя автора вопроса (если он/она участвовал в беседе), если я хочу уведомить его/ее: meta.stackexchange.com/a/43020

Boghyon Hoffmann
3 января 2018 в 15:38
0

Его уже должны уведомить :) Посмотрим.

Henry Caparas
16 мая 2018 в 08:05
0

Привет Питер. Как бы я ни хотел принять этот ответ, но моей репутации еще недостаточно. Требуется 15, а у меня только 6.

Boghyon Hoffmann
28 мая 2018 в 21:47
0

@HenryCaparas Вы всегда можете принять ответы, нажав на галочку (✔️). Только для голосования требуется 15+ очков репутации. :)

avatar
D. Seah
31 декабря 2017 в 05:38
1

Есть много способов сделать это. и вот один http://jsbin.com/yavuhay/edit?js,output

sap.ui.jsview("myView.Template", {
  getControllerName: function() {
    return "myView.Template";
  },
  createContent: function(oController) {
    function createList(filter) {
      return new sap.m.List({
        columns: [
          new sap.m.Column({
            header:new sap.m.Text({
              text:"QNPNo"
            })
          }),
          new sap.m.Column({
            header:new sap.m.Text({
              text:"Status"
            })
          })
        ],
        items: {
          path: '/QNPResult',
          template: new sap.m.ColumnListItem({
            cells: [
              new sap.m.Text({
                text: '{QNPNo}'
              }),
              new sap.m.Text({
                text: '{Status}'
              })
            ]
          }),
          filters: [new sap.ui.model.Filter("Status", sap.ui.model.FilterOperator.EQ, filter)]
        }
      })
    }
    return new sap.m.VBox({
      items: [
        sap.m.IconTabBar({
          items:[
            new sap.m.IconTabFilter({
              icon: "sap-icon://approvals",
              content: [ 
                new createList("1")
              ]
            }),
            new sap.m.IconTabFilter("Step3", {
              icon: "sap-icon://accept",
              content: [
                new createList("2")
              ]
            })
          ]
        })
      ]
    });
  }
});

sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/Filter',
  'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, Filter, JSONModel) {
  "use strict";

  return Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel({
        "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"
          }
        ]
      }))
    }
  });
});


var view = sap.ui.view({
  type: sap.ui.core.mvc.ViewType.JS,
  viewName: "myView.Template"
});
view.placeAt("content");
avatar
santhosh
27 декабря 2017 в 10:01
1
var status1 = [];
var status2 = [];
for(var i = 0; i<QNPResult.length; i++){
   if(QNPResult[i].Status === "1"){
      status1.push(QNPResult[i]);
   }else{
      status2.push(QNPResult[i])
   } 
}

Установите для этих массивов модель зависимой таблицы.