Руководство администратора

Список файлов для просмотра формируется с помощью смарт-выражения, возвращающего список идентификаторов FileID. В данном примере в галерею выводятся все файлы, вложенные в задачу с номером 123456, а смарт-выражение (1) строится с помощью запроса TSQL.

select FileID from FileStorageFileToTaskLinks where TaskID = 123456 and IsDeleted = 0

В блоке Smart Html (2) настраивается отображение файлов, возвращаемых данным смартом (в данном примере смарт-выражение имеет ID=123). Настройка виджетов Smart Html описана здесь.

<style>

.block-main{position:relative}

.gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 32%);
 grid-gap: 10px;
 align-items: stretch;
 }
.gallery-photo{
 height:92px;
 background-size: cover;
 background-position: center;

 }
</style>
<div class='block-main'>
<div class='gallery-grid'>
   {{#smart123}}
  <a class='gallery-photo' style='background-image:url("/GetAttachment.ashx?id={{fileID}}")' href='/GetAttachment.ashx?id={{fileID}}'></a>
   {{/smart123}}
</div>
</div>

По клику на изображение вызывается просмотрщик Галереи изображений — fileViewer, который настраивается в JS-вставке портала (3). Для него предварительно формируется массив элементов [fileType, url], содержащий ссылки на все изображения в галерее.

(window.firstForma.portal.block(11)).onLoaded(function () {
  var arr = document.querySelectorAll('.gallery-photo');
  var filesArr = [];
 

  arr.forEach(function(item, index){
     filesArr.push({fileType: 'image', url: arr[index].href});
  });

  arr.forEach(function(item, index){
     arr[index].addEventListener('click', function(event)  {  
       event.preventDefault();
      window.firstForma.fileViewer(filesArr, index);
     });
  });
});

Настройка галереи изображений в портальном блоке с помощью js-вставки.

Список файлов для просмотра формируется с помощью смарт-выражения, возвращающего список идентификаторов FileID. В данном примере в галерею выводятся все файлы, вложенные в задачу с номером 123456, а смарт-выражение (1) строится с помощью запроса TSQL.

select FileID,

'{url:"/GetAttachment.ashx?id="'+CONVERT (varchar(10),FileID)+',fileType:"image"}' AS filelink

from FileStorageFileToTaskLinks where TaskID = 123456 and IsDeleted = 0

Второе смарт-выражение (2) формирует массив для просмотрщика Галереи изображений — fileViewer (char(39) — символ одинарной кавычки).

DECLARE @var varchar(max) = ''

 
SELECT @var=@var+','+
'{url:'+char(39)+'/GetAttachment.ashx?id='+CONVERT (varchar(10),FileID)+char(39)+',fileType:'+char(39)+'image'+char(39)+'}'
from FileStorageFileToTaskLinks where TaskID = 123456 and IsDeleted = 0

 
SELECT 'javascript: firstForma.fileViewer([' + SUBSTRING(@var,2,len(@var)-1) + ']);' as url

В блоке Smart Html (3) настраивается отображение файлов, возвращаемых этими смартами (в данном примере они имеют ID=123 и 456 соответственно). Настройка блоков Smart Html описана здесь.

<style>

.block-main{position:relative}
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 32%);
 grid-gap: 10px;
 align-items: stretch;
 }
.gallery-photo{
 height:92px;
 background-size: cover;
 background-position: center;
}
</style>
<div class='block-main'>
<div class='gallery-grid'>
 {{#smart123}} {{#smart456}}
 <a class='gallery-photo' style='background-image:url(/GetAttachment.ashx?id={{fileid}}&FromPlayer=1)' onclick='{{url}}' href='javascript:;'></a>
 {{/smart456}} {{/smart123}}
 </div>
</div>

При такой настройке блока дополнительно настраивать JS-вставку для портала не требуется, все настройки для fileViewer формируются во втором смарт-выражении.

Настройка галереи изображений в портальном блоке с помощью смарт-выражений