# Медиаблок

Виджет который может содержать текст, фоновую заливку или картинку и зменять их свойства в зависимости от заданного пользователем SQL-выражения.

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/bnJimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/bnJimage.png)

## **Вкладка «Вид»**

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/gUnimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/gUnimage.png)

Параметры текстовой части виджета

##### [**Параметры контейнера**](https://book.winsolutions.ru/link/139#bkmrk-%D0%9F%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%B0)

Стандартная секция для всех виджетов. За исключением настройки цвета фона. Здесь фон может быть дополнительно по условию.

##### **Модель данных**

Выбор модели данных, к которой будет обращен SQL-запрос данного виджета

##### **Свойства**

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

Синтаксис:

- Гиперссылка <span style="color: rgb(35, 111, 161);">\#текст ссылки\[url\]</span>
- <span style="color: rgb(35, 111, 161);"><span style="color: rgb(0, 0, 0);">Переменная</span> {{имя переменной}}</span>

<span style="color: rgb(0, 0, 0);">Гиперссылку \[url\] можно сделать динамической, передав ее через переменную. *Однако, в текст ссылки через переменную передать не получится. #{{var}}... - не сработает*</span>

<table border="1" id="bkmrk--2" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/Ad4image.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/Ad4image.png)</td><td style="border-width: 0px;">[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/hr1image.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/hr1image.png)

</td></tr></tbody></table>

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

- **Вручную.** Один образец из палитры
- **По условию.** Несколько образцов будут окрашивать текст по заданному SQL-условию.   
    Например:  
    [![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/PQIimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/PQIimage.png)  
    Можно также использовать конструкцию с IF

##### **Переменные**

Список переменных, использующихся в тексте. Можно увеличить их количество кнопкой «Добавить переменную» или удалить выбранную переменную с помощью кнопки "Корзина". Переименовать переменную можно нажав на ее название.

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/Reuimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/Reuimage.png)


**Параметры переменной**

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/kktimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/kktimage.png)

Рядом с названием переменной находится кнопка, вызывающая редактор SQL-запроса для конкретной переменной. Сдесь можно написать выражение, изпользуя поля выбранной модели данных. В переменную попадет последнее полученое значение.

<table border="1" id="bkmrk--6" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 9.01235%;"></col><col style="width: 90.9877%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/nLJimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/nLJimage.png)</td><td style="border-width: 0px;">[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/12aimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/12aimage.png)

</td></tr></tbody></table>

С другой стороны названия находится кнопка вызова панели насктроек для этой переменной:

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/SNMimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/SNMimage.png)

**Формат**. Если результатом расчета выражения будет число, то ему можно применить стандартное форматирование, как во всех остальных визуализациях.

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/DnTimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/DnTimage.png)

**Свойства.** Это такое же текстовое поле как в результируещем тексте, но только для этой переменной. В фигурные скобки этой переменной в основном блоке пойдет все что указано в локальном. Простой текст и/или ключевое слово «value», которое означает результат выражения переменной, если оно есть.

Подсекции оформления текста переопределят свойства аналогичные основного текста для этой переменной после активации переключателя.

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/oJ6image.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/oJ6image.png)

#### **SQL**

С помощью данной секции/кнопки можно открыть общий редактор кода, в котором находятся все выражения, определяющие значения переменных и их названия (после ключегого слова AS). Также есть возможность наложить фильтры на запросы значений для переменных.

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2024-03/scaled-1680-/U2Ximage.png)](https://book.winsolutions.ru/uploads/images/gallery/2024-03/U2Ximage.png)

#### **Позиционирование**

Данная настройка позволяет располагать текст относительно центра контейнера по горизонтали и вертикали:

• Слева  
• По центру  
• Справа

#### **Свойства**

**Начертание**: предоставляет возможность преобразовать текст:

- жирный
- курсив
- подчеркнутый

**Размер шрифта**: задается вручную в пикселях

**Межстрочный интервал**: задается вручную в процентах

**Межбуквенный интервал**: задается вручную в пикселях

**Цвет**: любой цвет из палитры, либо один из интерфейсных цветов

**Прозрачность**: задается вручную в процентах

**Внешние отступы**: для данного виджета предусмотрено управление внутренними расстояниями по вертикали и горизонтали. Кнопка связи [![](https://book.winsolutions.ru/uploads/images/gallery/2023-05/scaled-1680-/image-1685448193582.png)](https://book.winsolutions.ru/uploads/images/gallery/2023-05/image-1685448193582.png) активирует одновременное изменение отступов виджета

#### **Лимит**

Позволяет установить ограничение итогового результата по количеству строк. По умолчанию установлен лимит 1.


## **Вкладка "Изображение"**

Содержит параметры медиаблока, управляющие фоновыми изображениями [![](https://book.winsolutions.ru/uploads/images/gallery/2023-05/scaled-1680-/image-1685449074607.png)](https://book.winsolutions.ru/uploads/images/gallery/2023-05/image-1685449074607.png)

#### **Тип**

Позволяет выбрать источник изображения: база данных или внешняя ссылка. При выборе типа "БД" требуется указать поле, содержащее значения в формате http-ссылок на картинок. Если поле содержит более одной ссылки, появится слайдер для перелистывания картинок.  
Пример картинки со слайдером:

[![image.png](https://book.winsolutions.ru/uploads/images/gallery/2023-05/scaled-1680-/anmimage.png)](https://book.winsolutions.ru/uploads/images/gallery/2023-05/anmimage.png)

#### **Фон**

Позволяет настроить условия для отображения картинок аналогично параметрам фона вкладки "Вид": [![](https://book.winsolutions.ru/uploads/images/gallery/2023-05/scaled-1680-/image-1685450405572.png)](https://book.winsolutions.ru/uploads/images/gallery/2023-05/image-1685450405572.png)

#### **Пропорции**

Позволяет настроить способ размещения изображения внутри виджета:

- **По размеру.** Разместит картинку в натуральную величину, обрезав лишнее границами виджета
- **Заполнить.** Заполнит виджет изображениями как текстурой
- **Вписать.** Изменит размер картинки по размерам виджета, не меняя ее пропорций
- **Растянуть.** Изменит размер картинки по размерам виджета с изменением ее пропорций