Добрый день, уважаемые коллеги!

Помогите, пожалуйста, решить следующую задачу: в реестре записей мобильного приложения в зависимости от значения определенного поля надо выделять строки жирным шрифтом либо подсвечивать. Т.е. требуется форматирование стиля строки по условию.

Попыталась поискать решение по материалам сообщества, но так и не разобралась, можно ли реализовать такую потребность и каким образом.

https://community.terrasoft.ru/articles/susestvuet-li-v-79-sposob-zadat-cvet-stroke-v-reestre-mobilnogo-prilozenia

https://community.terrasoft.ru/questions/napisanie-stilei-dla-mobilnoi-versii

https://community.terrasoft.ru/articles/kak-v-mobilnoi-versii-prilozenia-vyvesti-dopolnitelnye-kolonki-v-reestra-razdela

 

Подскажите, пожалуйста, понять как работает Terrasoft.util.writeStyles:

  1. можно ли и как в данном случае использовать Terrasoft.util.writeStyles (сложилось впечатление, что стиль определяется для реестра/схемы в целом)?
  2. Если реализация возможна, то на каком типе схемы для реестра надо обращаться к Terrasoft.util.writeStyles ?

Благодарю за помощь

Нравится

4 комментария
Лучший ответ

Марина, это немного нетривиальная задача, но она реализуема.

 

Как подобное можно реализовать. Для этого нужно по сути реализовать свой компонент реестра\грида, расширив базовый компонент list. Именно так сделано в разделе «Лента»\”Feed” (см. MobileFeedList, MobileSocialMessageGridPageView).

  1. Создать свой компонент, расширив базовый list. Например, если нужно менять стиль только основного выводимого поля, то можно реализовать в нем только метод getApplyItemTplPrimaryColumnFn. Что-то типа:

 

Ext.define("Terrasoft.configuration.MyList", {
   extend: "Ext.Terrasoft.List",
   xtype: "cfmylist",
 
   getApplyItemTplPrimaryColumnFn: function() {
      return function(values) {
         var config = this.primaryColumnConfig;
         var value = this.getValueByConfig(config, values);
         var typeId = values["Type"];
         var isRed = false;
         if (typeId === "some_type_value") {
            isRed = true;
         }
         if (value) {
            return "<div class=\"x-list-title\" " + isRed ? "style=\"color: red;\"" : "" + ">" + value + "</div>";
         }
         return "";
      };
   }
 
});

 

  1. Во view страницы реестра своего раздела указать в качестве используемого компонента свой разработанный компонент из п.1.
Ext.define("Terrasoft.configuration.view.ContactGridPage", {
   extend: "Terrasoft.view.BaseGridPage.View",
   xtype: "contactgridpageview",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   },
  1. Прописать в манифесте в CustomSchemas схему, в которой реализовали свой компонент.

Марина, это немного нетривиальная задача, но она реализуема.

 

Как подобное можно реализовать. Для этого нужно по сути реализовать свой компонент реестра\грида, расширив базовый компонент list. Именно так сделано в разделе «Лента»\”Feed” (см. MobileFeedList, MobileSocialMessageGridPageView).

  1. Создать свой компонент, расширив базовый list. Например, если нужно менять стиль только основного выводимого поля, то можно реализовать в нем только метод getApplyItemTplPrimaryColumnFn. Что-то типа:

 

Ext.define("Terrasoft.configuration.MyList", {
   extend: "Ext.Terrasoft.List",
   xtype: "cfmylist",
 
   getApplyItemTplPrimaryColumnFn: function() {
      return function(values) {
         var config = this.primaryColumnConfig;
         var value = this.getValueByConfig(config, values);
         var typeId = values["Type"];
         var isRed = false;
         if (typeId === "some_type_value") {
            isRed = true;
         }
         if (value) {
            return "<div class=\"x-list-title\" " + isRed ? "style=\"color: red;\"" : "" + ">" + value + "</div>";
         }
         return "";
      };
   }
 
});

 

  1. Во view страницы реестра своего раздела указать в качестве используемого компонента свой разработанный компонент из п.1.
Ext.define("Terrasoft.configuration.view.ContactGridPage", {
   extend: "Terrasoft.view.BaseGridPage.View",
   xtype: "contactgridpageview",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   },
  1. Прописать в манифесте в CustomSchemas схему, в которой реализовали свой компонент.

Зверев Александр,

 

Александр, огромное спасибо за подробное описание алгоритма с примерами. Стала пытаться реализовать алгоритм и столкнулась с проблемой во 2-м пункте :)

 

В конкретной ситуации рассматривается реестр Контрагентов. Сейчас отображается MobileAccountGridPage, который надо изменить и в коде которого:

Ext.define("AccountGridPage.View", {
	extend: "Terrasoft.view.BaseGridPage.View",
	xtype: "accountgridpage",
	config: {
		id: "AccountGridPage",
		navigationPanel: {
			id: "AccountGridPage_navigationPanel",
			title: LocalizableStrings["AccountGridPage_navigationPanel_title"]
		},
		grid: {
			id: "AccountGridPage_grid",
			iconCls: "user",
			store: "AccountGridPage.Store"
		}
	}
});

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

- расширение от вышеуказанного класса "AccountGridPage.View", но в этом случае возникает ошибка - Uncaught Error: [Ext.Loader] Failed loading 'AccountGridPage/View.js', please verify that the file exists

- расширение от класса "Terrasoft.view.AccountGridPage.View" , возникает ошибка - sencha-touch-all-debug.js:8634 Uncaught Error: [Ext.Loader] Failed loading 'app/view/AccountGridPage/View.js', please verify that the file exists,

- расширение от "Terrasoft.view.BaseGridPage.View", но в этом случае ничего не происходит.

Ext.define("Terrasoft.configuration.view.UsrAccountGridPage", {
 // extend: "Terrasoft.view.AccountGridPage.View", //  Failed loading 'app/view/AccountGridPage/View.js'
 // extend: "AccountGridPage.View", // ошибка Failed loading 'AccountGridPage/View.js
  extend: "Terrasoft.view.BaseGridPage.View", // ничего не происходит
   xtype: "usraccountgridpage",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   }
});

Как правильно выполнить расширение в данном случае? Благодарю за помощь

Можно скопировать текст текущей view (MobileAccountGridPage, если не ошибаюсь), создать свою схему, вставить туда скопированный текст, у свойства grid указать свой новый xtype компонента грида и не забыть указать эту схему в манифесте в свойстве Grid у модели Account.

Зверев Александр,

 

Александр, попробую. Благодарю Вас за ценные рекомендации

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

Добрый день, 

Подскажите пожалуйста как сделать стили для модального окна по стандартному гриду как на любой другой странице,

У меня по нажатию кнопки вызывается модальное окно

var sandbox = this.sandbox;
var config = {
    heightPixels: 550,
    widthPixels: 950
};
var moduleName = "UsrMyModalModule";
var moduleId = sandbox.id + "_" + moduleName;
var renderTo = ModalBox.show(config, function() {
    sandbox.unloadModule(moduleId, renderTo);
});
sandbox.loadModule(moduleName, {
    id: moduleId,
    renderTo: renderTo
});

Само модальное окно  было создано через "Схема модели представления карточки" ни от кого не наследовано.

на выходе получается так:

на странице окна добавлял обычным средством:
 

{
	"operation": "insert",
	"name": "HeaderContainer",
	"propertyName": "items",
	"values": {
		"itemType": Terrasoft.ViewItemType.CONTAINER,
		"items": []
	}
},
{
	"operation": "insert",
	"parentName": "HeaderContainer",
	"propertyName": "items",
	"name": "Header",
	"values": {
		"itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
		"items": []
	}
},
{
	"operation": "insert",
	"parentName": "Header",
	"propertyName": "items",
	"name": "TestText",
	"values": {
		"bindTo": "TestText",
		"caption": "Test text",
		"layout": {"column": 0, "row": 0, "colSpan": 10}
	}
},
{
	"operation": "insert",
	"parentName": "Header",
	"name": "CloseButton",
	"propertyName": "items",
	"values": {
		"itemType": Terrasoft.ViewItemType.BUTTON,
		"style": Terrasoft.controls.ButtonEnums.style.BLUE,
		"click": {bindTo: "onCloseButtonClick"},
		"markerValue": "CloseButton",
		"caption": "OK",
		"layout": { "column": 0, "row": 1, "colSpan": 3 }
	}
}

 

Нравится

6 комментариев

Открываете модуль UsrMyModalModule, в нём на вкладке Less прописываете стили для элементов.

В странице в define, в перечислении подгружаемых модулей добавляете "css!UsrMyModalModule"

Варфоломеев Данила,

Вручную придется стили добавлять, а можно как нибудь грид сетку из страниц редактирования взять? 

 

Сериков Асхат Кайратович пишет:
а можно как нибудь грид сетку из страниц редактирования взять?

 Так вы же её уже добавили)

{
	"operation": "insert",
	"parentName": "HeaderContainer",
	"propertyName": "items",
	"name": "Header",
	"values": {
		"itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
		"items": []
	}
},

 

Варфоломеев Данила,

Добавить добавил, но как видите на картинке, сами поля скукожены, хотя width в процентном соотношении выставляется верно.

Проблема решается если унаследовать от Базовой схемы карточки, но тогда ругается на getCardInfo message, что нет такого сообщения

Сериков Асхат Кайратович пишет:
сами поля скукожены,

 Тогда вам нужно прописать стили(собственно говоря, с чего вы и начали тему). Я обычно прописываю width/height модуля, потом width/height главного контейнера (в вашем случае HeaderContainer)

Варфоломеев Данила,

Жаль, я надеялся, что есть способ как то унаследовать именно разметку, Спасибо

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

Добрый день!

Добавила в карточку обращения в Историю свою кнопку (Рис.1). Хотелось бы сделать так, чтоб она была выровнена по правому краю (Рис.2). Не могу понять как это сделать, это нужно создавать стиль или как? Может кто-то знает как решить данный вопрос?

Нравится

1 комментарий

рекомендую почитать эту тему:
http://www.community.terrasoft.ru/forum/topic/16386

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

Рассмотрим пример, как можно легко и просто поменять css-стили в bpm'online.
Например, нам необходимо изменить цвет левой панели с разделами.
Большинство css-стилей в bpm'online 7.3 и выше вынесены в отдельный модуль - CommonCSSV2. Кроме стилей в нем ничего нет, поэтому его легко заместить, чтобы поменять какие-либо из базовых стилей.
Для того, чтобы понять, какие стили применяются к тем или иным компонентам можно воспользоваться консолью браузера и сразу попробовать применить другие стили:

Попробуем изменить цвет:

Уже неплохо, но хотелось бы также поменять и цвета элементов списка. Вот они:

Итак, определились, какие css-классы нужно менять:

.ts-sidebar-list {
         background-color: #357C29;
}
.left-panel {
         background-color: #357C29;
}

Несмотря на то, что некоторые классы определены не в CommonCSSV2:

мы все равно можем переопределить их там же.

Стили определены на вкладке LESS модуля. Вот класс .left-panel, который нужно переопределить:

Итак, мы добавляем замещающий клиентский модуль для CommonCSSV2 в конфигурации в пользовательском пакете:

Сохраняем и переоткрываем. Теперь там появилась вкладка LESS. Первым делом копируем туда весь код из базового модуля:

Добавляем в конец

.ts-sidebar-list {
         background-color: #357C29;
}
.left-panel {
         background-color: #357C29;
}

Сохраняем (публикуем). Возвращаемся к пользовательскому интерфейсу, чистим кэш и перезагружаем страницу:

Нравится

Поделиться

2 комментария

Здравствуйте, скажите пожалуйста как найти этот LESS модуль в настройках? Версия 7.4.1

Антон, добрый день!

модуль называется CommonCSSV2. А LESS это таблица стилей.
Открываете в конфигурации объект "CommonCSSV2" (Рис. 1).

И в самом объекте есть вкладка "LESS".

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