Вопрос

Подскажите пожалуйста, я добавил iframe в разделе. Для того чтобы растянуть его использовал CSS. Но при переходе в другие разделы все контейнеры тоже сдвинулись. Ifarme растягивается на всю страницу только когда я растягиваю центральный контейнер, iframe находится в нем. Как известно от потомка к родителю обратиться нельзя.

Прикрепленные файлы

Нравится

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

Егор, а Вы используете в своём разделе для элемента, который растягивали, свой стиль или меняли CSS у стандартного?

Зверев Александр пишет:

Егор, а Вы используете в своём разделе для элемента, который растягивали, свой стиль или меняли CSS у стандартного?

Мне кажется я приложил скриншот. Я совершенно не понял вопроса. Прописать свой стиль это не значит изменить его у стандартного элемента? Я применяю стиль по Id элемента в модуле раздела, можно по классу, но это не имеет большой разницы

Этот элемент CenterPanel есть не только в Вашем разделе, но и других, и когда прописываете ему нужный стиль, он меняется везде. Попробуйте менять стиль у находящегося внутри CenterPanel элемента, который у каждого раздела свой. Например, у контактов это ContactSectionV2Container, у контрагентов — AccountSectionV2Container. Посмотрите, какой там у Вас, на скриншоте свёрнуто, не видно.

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

Зверев Александр, это не помогло

Но в других разделах этого элемента вёрстки нет, значит, там расширяться не должно. Может, Вы забыли убрать и у CenterPanel? Или сейчас у Вас наоборот, проблема, что не можете расширить?

 

Возможно, есть смысл поступать с окном с Вашим IFrame так же само, как в стандартных разделах поступают с инородными интерфейсами (мастар раздела, настройка прав и др.) — открывать их в новой вкладке и не думать, как совместить со стандартными элементами интерфейса.

 

Или делать свой раздел с минимумом стандартных элементов, где и отображать Ваш фрейм.

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

Стоит задача расширить поле "Решение" статьи БЗ от "края до края" для мониторов с разрешением 1920x1080. В принципе можно подключить свой модуль с CSS, и указать

#KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout-item-KnowledgeBasePageV2NotesContainer{
        width: 110% !important;
}

но в таком случае на мониторах с разрешением меньше, поле не подгоняется под их размер. Подскажите как решить данную задачу.

Нравится

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

Олег, в базовых карточках (кроме EmailPageV2, можете как пример использовать) задана фиксируемая ширина:

body[OldUI=false] .center-main-container .grid-layout-row {
  max-width: 140em;
}

Вы можете переопределить базовый для нужного раздела, только укажите дополнительный селектор, чтобы не перекрыть логику ВСЕХ карточек. Например: data-item-marker="KnowledgeBasePageGeneralBlock"

Спасибо за ответ. Такой вариант почему-то не срабатывает. Я нашел немного другое решение, но в таком случае приходится задавать ширину под определенное разрешение

@media (min-width: 1920px) {
	width: 110% !important;
}

Здравствуйте,
Вам нужно классу grid-layout-row ts-box-sizing
Во вложенности под id KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout
Сбросить стиль max-width в none;
Тогда нужное поле будет во всю ширину на любых разрешениях.

Сбросил max-width в none, теперь не нужно указывать конкретное разрешение. Приведите пожалуйста пример как переопределить свойство класса во вложенности по id? Не смог разобраться, и сделал пока так:

#KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout > div{
	max-width: none;
}

Извиняюсь, под #KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout и нет id, так что вариант с #KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout > div идеальный :twisted:

Если Вам требуется на всю ширину экрана, можете не заморачиваться с @media селекторами
Используйте специальные CSS единицы измерения Viewport Units: vw (1/100 процентное отношение к текущей ширине окна браузера) и vh (1/100 процентное отношение к текущей высоте окна браузера).

width: 100vw
В таком случае вне зависимости от размера экрана - элемент будет занимать всю доступную ширину окна, будьте внимательны с текущим значением box-sizing от чего будет зависеть будут ли в размер элемента включаться его border и margin в зависимости от этого иногда установка 100vw может привести к появлению горизонтальной полосы прокрутки, в таком случае необходимо будет или дополнительно скорректировать отсуты/границы или установить чуть меньшее значение в vw (98 - исходя из практики решает вопросы с типовыми проблемами)

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

Добрый день!
При расположении объектов с помощью css-разметки через подключение своего модуля с соответствующим кодом возник вопрос. Необходимо двигать ActionButtonsContainer и SectionContainer находясь в новом разделе. При этом SectionContainer должен находиться справа. Переопределив SectionContainer через исходный код с BaseSectionV2 получилось сделать последнее (сделал для него "wrapClass": ["section", "right-el"]).

Но, при переходе в любой другой раздел (без перезагрузки страницы или сброса кэша) продолжает отрабатывать мой css-модуль. Т.о. в других разделах разметка ActionButtonsContainer и SectionContainer начинает "плыть".

Как можно избежать подобного?

Нравится

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

Никита, добрый день!

При переопределении базовых css-классов изменения применяются ко всем элементам разметки, использующих эти классы. Для избежания необходимо в Вашем модуле определить уникальные классы и использовать их вместо базовых или совместно с базовыми, чтобы не затрагивать остальные элементы.

"Лабьяк Олег Игоревич" написал:
Для избежания необходимо в Вашем модуле определить уникальные классы и использовать их вместо базовых или совместно с базовыми, чтобы не затрагивать остальные элементы.

Олег,спасибо! Если мне нужно добавить в свой раздел модуль карты и расписания, то мне нужно в блоке diff делать insert соответствующих объектов и указывать в свойстве "values" какие мне угодно значения в поле "wrapClass"?

есть такие загадочные записи, возможно наведет вас на мысль:

[id*='like-it-'],
[id*='tags-button-'] {
padding: 0px;
padding-left: 0px!important;
margin: 0px;
top: 0px;
vertical-align: middle;
margin-right: 10px;
background-position: 3px;
background-repeat: no-repeat;
height: 26px;
}
 
или
 
div[data-item-marker*="FileDetail"] {
	div[data-item-marker*="tiled"], div[data-item-marker*="listed"] {
 
		.ts-controlgroup-tools {
			.disable-left-margin {
				margin-left: -1px;
			}
		}
	}
}
Показать все комментарии

Рассмотрим пример, как можно легко и просто поменять 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".

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

Добрый день! Хочу поделиться опытом работы с JS в проектах на bpm’online 5. Статья будет полезна тем, кто не знает с какой стороны подойти к этому вопросу и с чего начать. Умение работать с JS применительно к bpm’online открывает богатые возможности настройки функциональности. В статье будет рассмотрено:

  • как добавлять js-скрипты на страницы bpm’online
  • как подписываться на события "onclick", "onkeydown" и пр.
  • как генерировать сигналы для страницы
  • показан пример использования jQuery
  • использование js-библиотек

Основы

Добавление JS скрипта на страницу выполняется с помощью метода:

Page.AddScript(string script)

Добавим на «страницу карточки задачи» кнопку и напишем код обработки:


Page.AddScript("alert('Hello!')");

В результате нажатия на кнопку произойдёт следующее:

Чтобы упростить себе жизнь и не мучиться с экранированием символов, текст JS-скрипта в исходном виде можно записать в параметр бизнес-процесса.

А затем добавить скрипт, передавая в качестве текста скрипта параметр JS_FirstScript:

Page.AddScript(JS_FirstScript);

Немного модифицируем этот способ: в параметр JS_FirstScript запишем:

alert('%message%');

Добавим в Usings пространство имен System.Text.RegularExpressions
В коде пишем:

string script;

script = Regex.Replace(JS_FirstScript, "%message%", "Привет");
Page.AddScript(script);

script = Regex.Replace(JS_FirstScript, "%message%", "Пока");
Page.AddScript(script);


Подписка на события

Пример №1
Добавим возможность ловить нажатие клавиш и выполнять определённые действия:

string scriptLeft = Regex.Replace(JS_FirstScript, "%message%", "Left");
string scriptRight = Regex.Replace(JS_FirstScript, "%message%", "Right");
string KeyboardScript = "document.onkeydown = function(event) {var key_code = event.keyCode; if(key_code == 37){" + scriptLeft + "}if(key_code == 39){" + scriptRight + "}}";
Page.AddScript(KeyboardScript);

После нажатия на нашу красную кнопку, на страницу добавятся обработчики нажатия кнопок «Стрелка влево» и «Стрелка вправо». Нажимая на стрелки, получаем:

Само собой, если добавить этот скрипт в "Init", то обработчики появятся уже после открытия страницы.

Пример №2
Добавим обработку клика по изображению. Дизайнер bpm'online не позволяет добавить обработчик события «click» на элемент «Область изображения», но мы можем сделать это с помощью JS. Добавим картинку на страницу:


Мы будем искать html-элемент этой картинки по id, поэтому посмотрим на него:

id = PageContainer_MyGreatImageBox

Добавим обработку клика на картинку:

string script = Regex.Replace(JS_FirstScript, "%message%", "Image Click!");
string imageBoxScript = "document.getElementById('PageContainer_MyGreatImageBox').onclick = function() {" + script + "}";
Page.AddScript(imageBoxScript);

Генерирование сигнала

Добавим ещё один событийный подпроцесс:

с сигналом «JSMessage»:

В скрипте «JMessage» напишем:

Page.AddScript("alert('Привет')");

Чтобы сгенерировать сигнал с помощью JS, можно использовать следующую конструкцию:

string message = "JSMessage";
string signalMessage = string.Format("Terrasoft.AjaxMethods.ThrowClientEvent(\'{0}\', '{1}');", InstanceUId, message);
Page.AddScript(signalMessage);

Теперь, по нажатию на нашу красную кнопку:

JQuery

Для того, чтобы не изобретать велосипеды, у нас есть возможность использовать JQuery в своем коде. Причём, JQuery уже добавлен в ресурсы страницы. На момент написания статьи, обычно это jQuery v1.7.1

Приведу пример анимации с помощью jQuery.
Добавим в процесс параметр «scriptAnimation». Пишем его значение:

$("#PageContainer_MyGreatImageBox").animate({
        opacity: 0,
        marginLeft: "-50"
        }, 300 );
$("#PageContainer_MyGreatImageBox").animate({
        opacity: 1,
        marginLeft: "50"
        }, 300 );

Добавим скрипт на страницу:

string imageBoxScript = "document.getElementById('PageContainer_MyGreatImageBox').onclick = function() {" + scriptAnimation + "}";
Page.AddScript(imageBoxScript);

В результате, при нажатии на изображение, оно будет сдвигаться влево на 100 пикселей и постепенно исчезать. После чего начнётся обратная анимация.

Изменив id элемента в параметре «scriptAnimation», можно подвигать, например, поле ввода автора активности:

Добавление библиотек JS на страницу

Что делать, если нам нужно подключить какой-то js-код, который просто неприлично в нормальном обществе засовывать в параметр процесса? Рассмотрим на примере добавления маски ввода к текстовому полю.
Добавим на страницу текстовое поле, назовём его MaskedTextEdit

В \inetpub\wwwroot\sitename\Terrasoft.WebApp\Resources положим файл jquery.maskedinput-1.3.js

в PageLoadComplete (иначе не сработает) пишем:

var appPath = (Page.Request.ApplicationPath == "/") ?
        string.Empty :
        Page.Request.ApplicationPath;
var csnameJQm = "JQMask";
var csurlJQm = "/Resources/jquery.maskedinput-1.3.js";
var scriptManager = ScriptManager.GetCurrent(Page.AspPage);
scriptManager.RegisterClientScriptIncludeInternal(csnameJQm, appPath + csurlJQm);
string CommunicationMask = "+7(999)999-99-99";
Page.AddScript("$('#" + Page.MaskedTextEdit.ClientID + "').mask('" + CommunicationMask + "');");

В результате получим текстовое поле с маской ввода:

Спасибо за внимание! Надеюсь, что эта статья поможет вам в решении ваших задач!

Нравится

Поделиться

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

...ушел делать убегающую кнопку для клиента к 1 апреля :smile:

Добро :smile:

Все круто, только не понял, почему для обращения к TextEdit'у с клиента Вы используете свойтсво "ClientID", а для картинки смотрите ее Id в HTML-коде.
Думаю, что оптимальнее везде использовать ClientID.

Добрый день, Андрей!
На то это и примеры, чтобы показать все способы получения идентификатора. Например, понадобилось вдруг нам подвигать какое-нибудь поле, то тут ClientID нам не поможет:

Получив ClientID = PageContainer_HouseCategoryEdit мы будем двигать только текст контрола, в то время как "прямоугольник" контрола будет стоять на месте. Чтобы двигать прямоугольник, нам нужно посмотреть его Id в html:
т.е. нам нужен id div'а, а именно "ext-gen1052", или вообще "ext-gen1070", чтобы подвигать поле вместе с меткой.

Евгений, в таком случае это будет довольно небезопасно, так как после внесения изменений в дизайн страницы автогенерируемый Id уже может быть не тот_) Думаю, если нужно двигать весь контрол, то его можно поместить в контейнер и двигать контейнер. Хотя, я не пробовал, могу ошибаться.

Да, это запросто. Честно говоря, этот момент я не проверял :)

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

Доброго времени суток!
Есть задача расположить 2 элемента управления в одну строку: поле справочника "Страна" и булево "Резидент" в карточке модуля (наподобие элементов напоминания автору и ответственному в активности). CSS-правило для этого не проблема, проблема в другом - где его расположить, ведь в схеме карточки css'ы не хранятся. Замещать только ради этого CardModule - не вариант. Пробовал создать свой модуль, в котором определил нужные правила. В нужной карточке подгружаю его

sandbox.loadModule('MyUtilsModule');

НО! оказалось тоже не выход - при первой загрузке все отлично, но если зайти в эту же карточку 2й раз либо в дизайнер страницы - элемент теряет правило, и начинает отображаться правильно лишь после перезагрузки страницы.
Каким образом можно решить проблему?

Нравится

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

Добрый день!
К сожалению на текущий момент не существует возможности расшаривать стили или добавлять стили в схему карточки редактирования.
Реализация данного функционала в планах.

CustomConfig {
styles: {
wrapStyles: {
'float': 'left'
}
}
}

"Ильюша Сергей Николаевич" написал:

CustomConfig {
styles: {
wrapStyles: {
'float': 'left'
}
}
}


Этим способом я изначально пробовал сделать, когда создавал схему карточки - итог нулевой.
Ну скажем так, для контрола нулевой, для группы - все прекрасно.

Вопрос снимается - проблема решилась

Как подскажите ? на будущее ?

this.bindings."имя элемента, для которого нужно применить стили" = {
    styles: {
        wrapStyle: {
            float: 'right'
        }
    }
}

итог - inline-стиль элемента.
Вариант, конечно, кривоват и удобен, если только нужно "накинуть" 1-2 правила на 1-2 элемента, но все же имеет место жить

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