Вопрос

Добрый день, 

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

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

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".

Войдите или зарегистрируйтесь, чтобы комментировать