Урок 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

  2. Gilda Catlett

    опубликован 29.09.2021 в 05:18

    Hey!

    Get all the leads you ever need. We have a special offer running BusinessLeads101.com.

    Stop paying Facebook and Linkedin and get a once-off solution.

    Regards,
    Gilda

  3. Adrienne Norfleet

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

    Hello,

    My name is Johan, I am a PHP programmer that specializes in data driven web applications.

    Anything related to PHP, MySQL, Data scraping etc.

    If you have any custom jobs you can add me on skype to discuss your requirements.

    Skype: cmsdevelopers

    Regards,
    Johan

  4. Karissa Mauldin

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

    Hi ,

    Who would I contact at your company that handles ordering your logo products, t-shirts, and promotional items?

    For over 20 years we have been creating and supplying our clients with all their custom logo merchandise.

    We can put your logo onto anything including:

    -Custom Printed T-shirts / Hoodies
    -Pens
    -Mugs
    -T-shirts
    -Bags
    -Banners
    -Table Covers
    -Key chains
    -USB flash drives

    —plus 350,000 other items!

    We also offer PPE items such as hand sanitizer and masks.

    Are there any upcoming projects that you need logo items for?

    Thanks in advance for your time.

    Regards,

    Karissa
    Custom Branded Product Specialist

  5. Kandi Conklin

    опубликован 26.10.2021 в 06:08

    We have a one time limited offer.

    366,295,395 Leads for $20!

    BusinessLeads101.com!

  6. Marcia Fielding

    опубликован 17.11.2021 в 02:16

    Hey, are you starving to find the right leads?

    CompanyLeads.org has launched a limited time offer that covers all the countries in the world.

    At $149 once-off you get access to over 300 million leads categorized, targetted and ideal.

    Instant access and delivery. Visit CompanyLeads.org

    Regards,
    Marcia

  7. Liza Leworthy

    опубликован 23.11.2021 в 18:46

    Hey, we are running a black friday special on leads..

    The entire USA (93 million records for $79)
    The entire Australia (8 million records for AUD 99)
    The entire South African Database (4 Million records for R1000)
    The entire UK (16 million records for £49)

    Or take all 152 countries for $99!

    Instant access and delivery. Visit CompanyLeads.org

    Regards,
    Liza