SapUI5: Добавить CSS класс в зависимости от значения поля

Размещен в sapui5 22.05.2018 16:41
Теги: ,

Иногда бывает необходимо добавить какое-то особое оформление элементу, в зависимости от его значения.
Ситуации могут быть разные. Например, раскрасить поле в зависимости от процентного значения поля и т. п.
Рассмотрим один из вариантов решения данной задачи!

Пример к посту — https://github.com/kannade/formatter.blur. Можете импортировать его в свой webIDE.

Будем делать следующее:
Если текстовое поле имеет значение "00000000", то будем добавлять к нему эффект размытия.
В любом другом случае выводим нормальное значение.

sapui5 formatter blur effect

Поехали!

Форматирование поля.

Определим и создадим модель в models.js:

/formatter.blur/blob/master/webapp/model/models.js
createJSONModels: function() {
	var oModel = new sap.ui.model.json.JSONModel({
		Pernr: "",
		PositionTxt: "",
		OrgunitTxt: "",
		Pernr2: "",
		PositionTxt2: "",
		OrgunitTxt2: ""
	});
 
	return oModel;
},

установим модель на Component.js:

/formatter.blur/blob/master/webapp/Component.js
this.setModel(models.createJSONModels(), "oEmplMdl");

и заполним модель в контроллере Main.controller.js:

/formatter.blur/blob/master/webapp/controller/Main.controller.js
			var oComp = this.getOwnerComponent();
			var oEmplMdl = oComp.getModel("oEmplMdl");
 
			if (oEmplMdl) {
				oEmplMdl.setProperty("/Pernr", "00001234");
				oEmplMdl.setProperty("/Pernr2", "00000000");
 
				oEmplMdl.setProperty("/PositionTxt", "Начальник управления");
				oEmplMdl.setProperty("/PositionTxt2", "Начальник блока");
 
				oEmplMdl.setProperty("/OrgunitTxt", "Руководство г. Москва");
				oEmplMdl.setProperty("/OrgunitTxt2", "Руководство Питер");
			}

В представлении опишем поля со значением:

/formatter.blur/blob/master/webapp/view/Main.view.xml
<text id="lblEmpNo" text="{path : 'oEmplMdl>/Pernr', formatter: 'formatter.blur.model.formatter.formatBlur' }" visible="{= !!${oEmplMdl>/Pernr} }"></text>
 
…
 
<text id="lblEmpNo2" text="{path : 'oEmplMdl>/Pernr2', formatter: 'formatter.blur.model.formatter.formatBlur' }" visible="{= !!${oEmplMdl>/Pernr2} }"/></text>

И для первого и для второго поля мы определили форматтер formatter.blur.model.formatter и метод formatBlur, который будет форматировать поле, в зависимости от значения:

/formatter.blur/blob/master/webapp/model/formatter.js
jQuery.sap.declare("formatter.blur.model.formatter");
formatter.blur.model.formatter = {
 
	//метод, который будет форматировать поле
	formatBlur: function(sVal) {
 
		if (sVal) {
			//Если значение поля = "00000000"
			if (sVal === "00000000") {
				//Добавим к элементу css класс blur
				this.addStyleClass("blur");
			} else {
				//Удалим css класс blur
				this.removeStyleClass("blur");
			}
 
			//Вернем значение
			return sVal;
		}
	}
};

Эффект размытия на CSS.

Чуть выше мы добавили css класс к элементу, который форматировали в зависимости от его значения.
Опишем класс в style.css:

/formatter.blur/blob/master/webapp/css/style.css
.blur {
    color: transparent !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-transition: text-shadow 2.0 ease-out;
    -moz-transition: text-shadow 2.0 ease-out;
    -ms-transition: text-shadow 2.0 ease-out;
    -o-transition: text-shadow 2.0 ease-out;
    transition: text-shadow 2.0 ease-out;
}

Вот и все :).
Удачных разработок!

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

  1. Michaeljoink

    опубликован 24.07.2020 в 02:53

    HoOkAh MaGic наш официальный бренд
    Набрав в поисковике Вы можете посетить наш сайт
    и возможно приобрести кальяны и всё для них.
    Доставка по всей России
    Бесплатная консультация
    Отправка в день заказа
    Персональные скидки
    Строго 18+

  2. Interfaceyjw

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

    Century to a kind of destruction:

  3. Plasticjnl

    опубликован 12.12.2020 в 17:19

    or their samples written

  4. Edelbrocktai

    опубликован 15.12.2020 в 00:14

    books in ancient times was papyrus

  5. CasinoX

    опубликован 26.01.2021 в 15:07

    как выяснилось дохляк хрустящими, казино икс casino x com

  6. CasinoX

    опубликован 08.02.2021 в 15:15

    как хочешь рудне живоглотах, casino x регистрация

  7. Ronda

    опубликован 24.03.2021 в 19:56

    Hookup Women Uses Totally free Issues? An Incredible Side to side Gain!

    Free hookup women Hookup apps and sites online is the
    solution if you’re sick and tired of going to cafes and organizations simply to be prevented, and even even worse,
    laughed at. I understand what it’s like because I’ve been there.
    I was single and needy back in the day — I needed
    a fresh partner — but I kept on attempting because I needed not one other selection. If you’re an individual guy who
    wishes to hookup with attractive girls without planning to those places where women are alone, then this report might just alter your lifestyle.
    It is going to clarify why courting online is the ideal substitute if
    you’re a men who seems to be too shy to method a wonderful woman in the bar or club.