Урок 9. SapUI5: Форматирование (Formatter). Сортировка и фильтрация.

Размещен в sapui5 27.12.2017 17:51
Теги: , , , , , ,

Продолжим знакомиться с особенностями SapUI5. Сегодня посмотрим возможности форматирования данных, сортировку и фильтрацию данных модели. Поехали!

Форматирование (Formatter).

Форматирование даты в SapUI5:

Часто возникает необходимость вывести дату. И не просто вывести, а вывести дату в определенном формате.
Возьмем наш предыдущий пример https://github.com/kannade/DataBinding_sapui5:
дата formatter

Сделать это можно при помощи нативных (встроенный в стандартный функционал SapUI5) средств форматирования, прописав formatOptions:

/DataBinding_sapui5/blob/master/webapp/view/Formatting.view.xml
1
2
3
4
5
6
7
8
9
10
11
<label text="Short"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'short', source: { pattern: 'yyyy.MM.dd' } } }"></text>
 
<label text="Medium"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium', source: { pattern: 'yyyy.MM.dd' } } }"></text>
 
<label text="Long"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'long', source: { pattern: 'yyyy.MM.dd' } } }"></text>
 
<label text="Full"></label>
<text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'full', source: { pattern: 'yyyy.MM.dd' } } }"></text>

Параметры для форматирования даты:

Форматирования чисел в SapUI5:

Или вывести в необходимом формате число:
формат фисла

/DataBinding_sapui5/blob/master/webapp/view/Formatting.view.xml
1
2
3
4
5
6
7
8
<label text="С группировкой разрядов"></label>
<text text="{ path: '/floatVal', type: 'sap.ui.model.type.Float', formatOptions: { groupingEnabled: true, groupingSeparator: ',', decimalSeparator: '.' } }"></text>
 
<label text="2 десятичных разряда"></label>
<text text="{ path: '/floatVal', type: 'sap.ui.model.type.Float', formatOptions: { maxFractionDigits: 2, groupingEnabled: false, groupingSeparator: ',', decimalSeparator: '.' } }"></text>
 
<label text="C ведущими нулями"></label>
<text text="{ path: '/floatVal', type: 'sap.ui.model.type.Float', formatOptions: { minIntegerDigits: 20, groupingEnabled: false, groupingSeparator: ',', decimalSeparator: '.' } }"></text>
1
2
3
4
5
6
7
8
9
10
var oLocale = new sap.ui.core.Locale("en-US");
var oFormatOptions = {
    style: "short",
    decimals: 1,
    shortDecimals: 2
};
 
var oFloatFormat = sap.ui.core.format.NumberFormat.getFloatInstance(oFormatOptions, oLocale);
oFloatFormat.format(1234.56); // результат - 1.23K (применяется параметр shortDecimals)oFloatFormat.format(123.456); // результат - 123.5 (число не "короткое", применяется параметр decimals)

Дополнительные параметры для форматирования чисел:


Возможные значения параметра roundingMode, клик для увеличения картинки.

Подробней про все параметры читаем тут — https://openui5.hana.ondemand.com/#/api/sap.ui.core.format.NumberFormat.

Форматирования "ценовых" чисел:

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var oLocale = new sap.ui.core.Locale("en-US");
var oFormatOptions = {
    showMeasure: true,
    currencyCode: false,
    currencyContext: 'standard'
};
 
var oCurrencyFormat = sap.ui.core.format.NumberFormat.getCurrencyInstance(oFormatOptions, oLocale);
oCurrencyFormat.format(1234.567, "USD"); // результат US$1,234.57 (дробная часть по умолчанию = 2 для USD)oCurrencyFormat.format(1234.567, "JPY"); // результат JP¥1,235 (дробная часть по умолчанию = 0 для JPY) 
oFormatOptions = {
    showMeasure: true,
    currencyCode: true,
    currencyContext: 'standard'
};
oCurrencyFormat = sap.ui.core.format.NumberFormat.getCurrencyInstance(oFormatOptions, oLocale);
oCurrencyFormat.format(1234.567, "USD"); // результат - USD1,234.57 (вместо символа валюты используется код валюты)oCurrencyFormat.format(1234.567, "JPY"); // результат JPY1,235 (вместо символа валюты используется код валюты)

Форматирования размера файла в SapUI5:

Подробней про формат размера файла — https://openui5.hana.ondemand.com/#/topic/24f340bdd59e4428aab30a20d14e2ebc.

Это все нативные средства форматирования, но в SapUI5 можно создать собственные методы для форматирования данных.

Пользовательское форматирование.

Вернемся к нашему предыдущему примеру, который мы делали в уроке 4.

Сделаем так, что при выводе числа у него отображалось две десятичные цифры.
Например, в модели число 12.1, но на экране будет отображено 12.10.

В контроллере определим форматтер:

/layout_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/Device",
	"hello/layout/model/formatter",	"hello/layout/model/type/digits"
], function(Controller, MessageToast, Device, formatter, Digits) {	"use strict";
 
	return Controller.extend("hello.layout.controller.Main", {
 
		formatter: formatter, 
		onInit: function() {

определим число в JSON модели, которое будет в последствии выводить:

/layout_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
5
6
var oData = {
	"name": "123456",
	"enabled": true,
	"date": new Date(),
	"price": "12.1"};

Сделаем сам форматтер, который мы указали — hello/layout/model/formatter и сделаем метод numberUnit, который мы после укажем в представлении:

/layout_sapui5/blob/master/webapp/model/formatter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
sap.ui.define([
	] , function () {
		"use strict";
		return {
			/**
			 * Rounds the number unit value to 2 digits
			 * @public
			 * @param {string} sValue the number string to be rounded
			 * @returns {string} sValue with 2 digits rounded
			 */
			numberUnit : function (sValue) {				if (!sValue) {
					return "";
				}
                                //принимаем пришедшее число sValue и задаем 2 цифры после запятой
				return parseFloat(sValue).toFixed(2);
			}
		};
	}
);

В представлении выводим число и указываем для него форматтер:

/layout_sapui5/blob/master/webapp/view/form.fragment.xml
1
2
3
4
<objectnumber number="{
              path: 'odata>/price',              formatter: '.formatter.numberUnit' }"></objectnumber>

Готово:
formatter

Так же собственные форматтеры используются и в примере из урока 8:

/DataBinding_sapui5/blob/master/webapp/view/Formatting.view.xml
1
2
3
4
5
6
<link href="{ parts: [ 'inputData/>/firstName', 'inputData>/lastName', 'inputData>/midName' ], formatter: '.formatMail' }" text="{i18n>sendEmail}"/>
 
…
 
<standardlistitem icon="{ path : 'globalData>typeId', formatter : 'alfa.DataBindingExample.model.formatter.formatIcon' }" type="Navigation" title="{globalData>type}" description="{globalData>name}"/>
</standardlistitem>

Принцип аналогичный, попробуйте разобраться сами.

Еще один примерчик из официальной документации — https://openui5.hana.ondemand.com/#/topic/0f8626ed7b7542ffaa44601828db20de.

Сортировка и фильтрация данных в JSON модели.

Создадим таблицу:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
3
<table noDataText="Нет данных" id="table0" visible="{globalData>/showTable}"
items="{ path : '/Employees', sorter: { path: 'Pernr', descending: true } }">
…</table>

…и выведем в нее JSON модель:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
onInit: function() {
	var oModel = new sap.ui.model.json.JSONModel(); // создаем JSON модель
	oModel.loadData("./model/employees.json", "", false); //загружаем данные из /model/employees.json
	this.getView().byId("table0").setModel(oModel); // получаем таблицу с id = table0 и устанавливаем для нее модель

visible="{globalData>/showTable}" — типичный пример property binding:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
<checkbox text="Отобразить таблицу" selected="{globalData>/showTable}"/>
</checkbox>

Когда checkbox нажат selected="{globalData>/showTable}"=true, следовательно visible="{globalData>/showTable}"=true.

Property binding применяется и к полю поиска:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
3
4
5
<flexbox width="100%" id="__box1">
	<items>
	<searchfield visible="{globalData>/showTable}" search="onTableSearch"/>	</searchfield></items>
</flexbox>

Поиск по элементам JSON модели.

Если введем какую-либо строку в SearchField и нажмем enter отработает метод search="onTableSearch":

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
onTableSearch: function(oEvt) {
	var aFilter = [], //создаем массив aFilter
	resFilter = []; //создаем массив resFilte
	var sQuery = oEvt.getParameter("query"); //получаем строку из поля поиска
	if (sQuery) { //если строка не пустая
		//добавляем в массив aFilter 3 элемента:
		//1) Поиск по полю LastName. Ищем строку, содержащую sQuery.
		//2) Поиск по полю FirstName. Ищем строку, содержащую sQuery.
		//3) Поиск по полю MidName. Ищем строку, содержащую sQuery.
		aFilter.push(new sap.ui.model.Filter("LastName", sap.ui.model.FilterOperator.Contains, sQuery));
		aFilter.push(new sap.ui.model.Filter("FirstName", sap.ui.model.FilterOperator.Contains, sQuery));
		aFilter.push(new sap.ui.model.Filter("MidName", sap.ui.model.FilterOperator.Contains, sQuery));
 
		//В массив resFilter добавляем массив aFilter, в котором содержаться условия поиска 
		//and: false - Вместо логического И будет использоваться логическое ИЛИ.
		//Другими словами, хотя бы одно поле из трех должно содержать строку поиска!
		resFilter.push(new sap.ui.model.Filter({
			filters: aFilter,
			and: false
		}));
	}
 
	var oList = this.getView().byId("table0"); //получаем таблицу
	var oBinding = oList.getBinding("items"); //биндинг таблицы
	oBinding.filter(resFilter); //применяем созданный фильтр
},

Поиск по элементам реализован!

Фильтрация в официальной документации — https://sapui5.hana.ondemand.com/#/topic/5295470d7eee46c1898ee46c1b9ad763.

Группировка и сортировка элементов JSON модели.

Сделаем сортировку и группировку таблицы по заданным параметрам.
Установку параметров будет делать в диалоговом окне, которое открывается по нажатию на кнопку:

/DataBinding_sapui5/blob/master/webapp/view/SortingAndFiltering.view.xml
1
2
<button icon="sap-icon://action-settings" press="onViewSettings">
</button>

По нажатию вызываем метод onViewSettings, в котором открываем диалог (диалоговые окна мы учились создавать в 7 уроке) и создаем список сортировки:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onViewSettings: function(oEvent) {
	if (!this._oDialog) {
                //создаем диалог из фрагмента
		this._oDialog = sap.ui.xmlfragment("alfa.DataBindingExample.view.TableViewSettingsDialog", this);
 
 
		var oCols = this.getView().byId("table0").getColumns(); // количество колонок
		var aCells = this.getView().byId("table0").getBindingInfo("items").template.getCells(); //получаем первую ячейку каждого столбца
 
//в созданный диалог добавляем еще элементы сортировки (SortItem) по количеству столбцов и с названиями, соответствующими названиям столбцов
		for (var i = 0; i < oCols.length; i++) {
			this._oDialog.addSortItem(new sap.m.ViewSettingsItem({
				text: oCols[i].getHeader().getBindingInfo("text").binding.oValue,
				key: aCells[i].getBindingInfo(i === 4 ? "value" : "text").parts[0].path,
				selected: i === 0
			}));
		}
	}
	this._oDialog.open();
,

Нажмем и вызовем диалог:
группировка и сортировка

Список элементов, по которым можно сортировать, мы только что динамически сделали в методе onViewSettings.

Список элементов для группировки мы указали в представлении:

/DataBinding_sapui5/blob/master/webapp/view/TableViewSettingsDialog.fragment.xml
1
2
3
4
5
6
<viewsettingsdialog id="SettingsId" confirm="handleViewSettingsConfirm">
	<groupitems>
		<viewsettingsitem text="Город" key="City"></viewsettingsitem>		<viewsettingsitem text="Орг единица" key="OrgehName"></viewsettingsitem>	</groupitems>
</viewsettingsdialog>

По нажатию на кнопку Ok применяем сортировку и группировку:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
handleViewSettingsConfirm: function(oEvent) {
	var oView = this.getView(); //выбираем представление
	var oTable = oView.byId("table0"); //выбираем таблицу
 
	var mParams = oEvent.getParameters(); //параметры
	var oBinding = oTable.getBinding("items"); //биндинг
 
	var sPath;
	var bDescending;
	var vGroup;
	var aSorters = [];
 
	// группировка
	if (mParams.groupItem) {
		sPath = mParams.groupItem.getKey(); //получаем значение, по которому будет группировать
		bDescending = mParams.groupDescending; //по возрастающей или убывающей
		vGroup = this.mGroupFunctions[sPath];
		aSorters.push(new Sorter(sPath, bDescending, vGroup));
	}
 
	// сортировка
	sPath = mParams.sortItem.getKey(); //получаем значение, по которому будет группировать
	bDescending = mParams.sortDescending; //по возрастающей или убывающей
 
// для поля pernr особые условия сортировки. Так как надо сравнивать цифры из pernr, а не строки.
//Для этого создали функцию compareIntegers, которая описана ниже в данном контроллере
	if (sPath === "Pernr") {
		aSorters.push(new Sorter(sPath, bDescending, false, this.compareIntegers));
	} else {
		aSorters.push(new Sorter(sPath, bDescending));
	}
		oBinding.sort(aSorters);
	},

Отметим, что this.mGroupFunctions из группировки мы определили в методе инициализации onInit:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
this.mGroupFunctions = {
	OrgehName: function(oContext) {
		var name = oContext.getProperty("OrgehName");
		return {
			key: name,
			text: name
		};
	},
 
	City: function(oContext) {
		var name = oContext.getProperty("City");
		return {
			key: name,
			text: name
		};
	}
};

Не забываем подключать необходимые библиотеки:

/DataBinding_sapui5/blob/master/webapp/controller/SortingAndFiltering.controller.js
1
2
3
4
5
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	'sap/ui/model/Filter',	'sap/ui/model/Sorter'], function(Controller, Filter, Sorter) {

Таким образом можно сортировать и группировать данные из JSON модели!

Про сортировку и группировку в официальной документации: https://sapui5.hana.ondemand.com/#/topic/5295470d7eee46c1898ee46c1b9ad763.html.

Оставить комментарий:

  1. Star Terpstra

    опубликован 28.06.2021 в 20:20

    It is with sad regret to inform you that because of the Covid pandemic BestLocalData.com is shutting down at the end of the month.

    We have lost family members and colleagues and have decided to shut down BestLocalData.com

    It was a pleasure serving you all these years. We have made all our databases available for $99 (All of it for $99) for those interested.

    Kind Regards,
    BestLocalData.com
    Star