Для реализации, уже должно быть реализовано UI5 приложение, содержащее несколько страниц.
Как это сделать, можно посмотреть вот тут https://hysterical.ru/2018/10/02/sapwebiderouters/
1) В массиве routing файла manifest.json нужно определить имя URL параметра, с помощью которого будет передаваться информация по продукту.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
"routing": { "config": { "routerClass": "sap.m.routing.Router", "viewType": "XML", "viewPath": "RoutingDemo.view", "targetAggregation": "pages" }, "routes": [{ "pattern": "", "name": "view1", "view": "view1", "targetAggregation": "pages", "controlId": "app" }, { "pattern": "View2/{product}", "name": "view2", "view": "view2", "targetAggregation": "pages", "controlId": "app" }] } |
Обращаю внимания на параметр “pattern”: “View2/{product}”
здесь, при помощи фигурных скобок добавляется наименование URL параметра.
2) Идем в контроллер первого представления. Ищем место, где происходит обращение к классу роутера для навигации на вторую страницу приложения (в нашем случае это просмотр подробной информации по продукту)
У меня это событие OnClick.
Создаем JSON объект, который передаем в URL параметр при переходе на другую страницу
1 2 3 4 5 6 7 8 9 |
OnClick: function(Event) { var data = { name : "Product_1" }; var oRouter = sap.ui.core.UIComponent.getRouterFor(this); oRouter.navTo("view2", { product: JSON.stringify(data) }); } |
3) Для примера мы будем выводить наименование продукта в заголовок второй страницы.
В представлении добавляем соответствующую разметку
1 2 3 |
<Page title="{product>/name}"> <content/> </Page> |
Здесь, с помощью {product>/name} мы говорим, что берем параметр name из модели данных product, и присваиваем это значение заголовку
4) Осталось написать код во втором контроллере
При инициализации назначаем процедуру привязки модели данных
1 2 3 4 |
onInit: function() { var oRouter = sap.ui.core.UIComponent.getRouterFor(this); oRouter.getRoute("view2").attachPatternMatched(this._onObjectMatched, this); } |
Осуществляем привязку модели данных представлению, и привязку значений
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
_onObjectMatched: function (oEvent) { var data = JSON.parse(oEvent.getParameter("arguments").product); var oModel = new sap.ui.model.json.JSONModel( ); oModel.setData(data); this.getView().setModel(oModel, "product"); this.getView().bindElement({ path: oEvent.getParameter("arguments").product, model: "product" }); } |