Атрибуты типа «Изображение» и «Документ». Вывод изображения на форме

Введение

В Comindware Platform можно загрузить изображения, прикрепив их к атрибуту типа «Изображение» или «Документ».

При этом изображения, прикреплённые к этим атрибутам отображаются на формах только в режиме предпросмотра и не растягиваются на весь размер формы.

Чтобы вывести одно или несколько изображений на форму, задав произвольное HTML-форматирование, можно воспользоваться текстовым атрибутом, задав для него формат отображения «HTML-текст».

Здесь представлены настройки по формированию галереи изображений на форме из атрибута типа «Изображение» или «Документ».

Структура атрибута типа «Изображение»

Атрибут типа «Изображение» хранит одну или несколько ссылок на записи (изображения) в системном шаблоне изображения, к которым прикрепляются графические файлы.
В шаблоне изображения имеются атрибуты name (имя) и stream (содержимое), которые хранят имя файла и ссылку на файл, физически хранящийся в папке Streams на сервере.
О файле из атрибута типа «Изображения» с помощью выражения N3 можно считать следующие данные:
- имя файла: ?image image:name ?name;
- расширение файла: ?image image:extension ?extension;
- папку Streams на сервера, в которой хранится файл: ?image image:stream ?stream;
- относительную ссылку на файл: ?image image:uri ?uri.

Структура атрибута типа «Документ»

Атрибут типа «Документ» хранит одну или несколько ссылок на записи (документы) в системном шаблоне документа, к которым прикрепляются файлы (например, загруженные пользователями).
В шаблоне документа имеется атрибут currentRevision (текущая версия), который хранит ссылку на запись в системном шаблоне версии.
В шаблоне версии имеются атрибуты title (имя) и content (содержимое), которые хранят имя файла и ссылку на файл, физически хранящийся в папке Streams на сервере. Чтобы считать файл из атрибута типа «Документ» с помощью выражения N3, необходимо:

получить объект с атрибутом:

("TemplateSystemName" "DocumentAttributeSystemName") object:findProperty ?DocumentAttribute. 

из объекта с атрибутом получить значение атрибута в текущей записи:
?item documentAttribute ?documentAttributeValue.
из значения атрибута получить текущую версию документа:
?documentAttributeValue document:revision ?revision.
из версии получить содержимое файла в формате base64:
?revision document:content ?content.
из версии получить имя файла:
?revision document:title ?title.
С помощью языка формул из атрибута типа «Документ» можно получить следующие данные:
- текущую ревизию документа: $AttributeDocument->currentRevision;
- имя файла из ревизии: $AttributeDocument->currentRevision->revisionFilename;
- относительную ссылку из ревизии: $AttributeDocument->currentRevision->httpUri.

Прикладная задача

Требуется вывести на форму галерею изображений, которые хранятся в атрибуте типа «Изображение» или «Документ».

Исходные данные

В шаблоне «Карточки товаров» (системное имя ProductCards) имеются две формы:

основная, на которой данные заполняют сотрудники;
Клиентская форма, которая отображается для клиентов.

Порядок настройки для атрибута типа «Изображение»

В шаблоне «Карточки товаров» создайте атрибут «Изображения» со следующими свойствами:
- Системное имя: Изображения
- Тип данных: изображение
- Хранить несколько значений: флажок установлен

Создайте атрибут «Галерея» со следующими свойствами:

Системное имя: Галерея
Тип данных: текст
Формат отображения: HTML-текст

Важно!

Если задать для атрибута другой формат отображения, HTML-теги будут отображаться как обычный текст.
Вычислять автоматически: флажок установлен

Выражение для вычислений:

Формула

# Из атрибута «Изображения» собираем изображения 
# и соединяем в HTML с разделителем <br/> 
# 'https://host-name' — имя хоста Comindware Platform 
JOIN("<br/>", from a in $Изображения select 
    FORMAT("<img src='https://your-host{0}'>",  
    LIST(a->uri) 
    ) 
) 

или

N3

# Импортируем функции для работы 
# с изображениями и строками 
@prefix object: <http://comindware.com/ontology/object#>. 
@prefix image: <http://comindware.com/ontology/image#>. 
@prefix cmwstring: <http://comindware.com/logics/string#>. 
@prefix string: <http://www.w3.org/2000/10/swap/string#>. 
{ 
    # Находим атрибут «Изображения» и помещаем в ?imagesAttribute 
    ("ProductCards" "Изображения") object:findProperty ?imagesAttribute. 
    # Запускаем цикл 
    from { 
        # Находим содержимое ?imagesAttribute в текущей 
        # записи и помещаем в ?image 
        ?item ?imagesAttribute ?image. 
        # Получаем ссылку на файл без имени хоста 
        # и помещаем в ?imageUri 
        ?image image:uri ?imageUri. 
        # Формируем HTML-строки c изображениями и помещаем в ?formatUri 
        # 'https://host-name' — имя хоста Comindware Platform 
        ("<img src='https://host-name{0}'>" ?imageUri) string:format ?formatUri. 
        } 
    # Формируем лист HTML-строк ?uriList из ?formatUri. 
    select ?formatUri -> ?uriList. 
    # Формируем из ?uriList одну большую строку 
    # с разделителем <br/> (перенос строки) 
    # и возвращаем её в значение атрибута 
    ("<br/>" ?uriList) cmwstring:join ?value. 
} 

Поместите атрибут «Изображения» на основную форму.
Поместите атрибут «Галерея» на форму «Клиентская форма».

Тестирование для атрибута типа «Изображение»

Создайте запись в шаблоне «Карточки товаров».
Сохраните запись.
Прикрепите изображения к атрибуту «Изображения».
С помощью селектора перейдите к форме «Клиентская форма».
На форме должны отобразиться прикреплённые изображения в виде галереи.

Порядок настройки для атрибута типа «Документ»

В шаблоне «Карточки товаров» добавьте атрибут «Фотографии» со следующими свойствами:
- Системное имя: Фотографии
- Тип данных: документ
- Хранить несколько значений: флажок установлен

Создайте атрибут «Отображение фотографий на форме» со следующими свойствами:

Системное имя: Фотогалерея
Тип данных: текст
Формат отображения: HTML-текст

Важно!

Если задать для атрибута другой формат отображения, HTML-теги будут отображаться как обычный текст.
Вычислять автоматически: флажок установлен

Выражение для вычислений:

Формула

# Из атрибута «Фотографии» собираем изображения 
# и соединяем в HTML с разделителем <br/> 
# 'https://host-name' — имя хоста Comindware Platform 
JOIN("<br/>", from a in $Фотографии select 
    FORMAT("<img src='https://your-host{0}'/>",  
    LIST(a->currentRevision->httpUri) 
    ) 
) 

или

N3

# Импортируем функции для работы 
# с документами и строками 
@prefix object: <http://comindware.com/ontology/object#>. 
@prefix document: <http://comindware.com/ontology/document#>. 
@prefix cmwstring: <http://comindware.com/logics/string#>. 
@prefix string: <http://www.w3.org/2000/10/swap/string#>. 
{ 
    # Находим атрибут «Изображения» (Фотографии) и помещаем в ?photosAttribute 
    ("ProductCards" "Фотографии") object:findProperty ?photosAttribute. 
    # Запускаем цикл 
    from { 
        # Находим содержимое ?photosAttribute в текущей 
        # записи и помещаем в ?photos 
        ?item ?photosAttribute ?photos. 
        # Получаем текущую ревизию документа и 
        # помещаем в ?fileRevision 
        ?photos document:currentRevision ?fileRevision. 
        # Получаем ссылку на файл без имени хоста 
        # и помещаем в ?fileUri 
        ?fileRevision document:httpUri ?fileUri. 
        # Формируем HTML-строки c изображениями и помещаем в ?formatUri 
        # 'https://host-name' — имя хоста Comindware Platform 
        ("<img src='https://host-name{0}'>" ?fileUri) string:format ?formatUri. 
        } 
    # Формируем лист HTML-строк ?uriList из ?formatUri. 
    select ?formatUri -> ?uriList. 
    # Формируем из ?uriList одну большую строку 
    # с разделителем <br/> (перенос строки) 
    # и возвращаем её в значение атрибута 
    ("<br/>" ?uriList) cmwstring:join ?value. 
} 

Поместите атрибут «Фотографии» на основную форму.
Поместите атрибут «Отображение фотографий на форме» на форму «Клиентская форма».

Тестирование для атрибута типа «Документ»

Создайте запись в шаблоне «Карточки товаров».
Прикрепите изображения к атрибуту «Фотографии».
Сохраните запись.
С помощью селектора перейдите к форме «Клиентская форма».
На форме должны отобразиться прикреплённые изображения в виде галереи.

Примеры стилизации изображений

Форматирование с помощью CSS

Для форматирования изображения можно использовать следующие свойства CSS:

max-width и max-height для ограничения размера;
border-radius для скругления углов;
border для рамки;
margin для отступов вокруг изображения.

Ограничение размера до 300x300 пикселей

#  
JOIN("<br/>", from a in $Фотографии select 
    FORMAT("<img src='https://host-name{0}' style='max-width: 300px; max-height: 300px;' alt='Описание изображения'/>", 
    LIST(a->currentRevision->httpUri) 
    ) 
) 

Обрезка по размеру 200x200 пикселей с обрезкой и скруглением углов радиусом 8 пикселей:

# Отображение изображений  
JOIN("<br/>", from a in $Фотографии select 
    FORMAT("<div style='display: inline-block; margin: 5px;'><img src='https://host-name{0}' width='200' height='200' style='object-fit: cover; border-radius: 8px;' alt='Описание изображения'/></div>", 
    LIST(a->currentRevision->httpUri) 
    ) 
) 

Автоматическое масштабирование и рамка со скругленными углами радиусом 4 пикселя:

# Адаптивное отображение  
JOIN("<br/>", from a in $Фотографии select 
    FORMAT("<div style='text-align: center; margin: 10px;'><img src='https://host-name{0}' style='max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px;' alt='Описание изображения'/></div>", 
    LIST(a->currentRevision->httpUri) 
    ) 
) 

Проверка наличия файлов изображений:

IF(ISBLANK($Фотографии), "<p style='color: #999; font-style: italic;'>Изображения не загружены</p>", 
    JOIN("<br/>", from a in $Фотографии select 
        FORMAT("<img src='https://host-name{0}' style='max-width: 250px; max-height: 250px; margin: 5px;' alt='Описание изображения'/>", 
        LIST(a->currentRevision->httpUri) 
        ) 
    ) 
) 