Визуализация процесса на сайте - отображение движения по статусам

Данный компонент предназначен для визуализации некоего процесса, например, движение заявки по статусам.

Мы можем указать различные стадии прохождения заявки, сверху и снизу можем указать ответственных лиц. Также при наведении на элемент показывается подсказка, а по клику - можно вызывать модальную форму.

Документация по элементу - https://falcon.web-automation.ru/docs/vyvod-dvizheniya-zayavki-po-statusam

Как реализовать

Используем компонент таблица с viewType=statusbar: 

CREATE PROCEDURE [dbo].[crud_watch_statusbar_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	-- SELECT 1
	select '1' name, 'Создание заявки' tooltip, 'far fa-file' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '2' name, 'Проверка корректности' tooltip,  'fa fa-eye' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '3' name, 'Передача диспетчеру' tooltip,  'far fa-hand-point-right' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '4' name, 'Поиск машины' tooltip,  'fas fa-car' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '5' name, 'Передача документов экспедитору' tooltip,  'fa fa-bars' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '6' name, 'Получение груза' tooltip,  'fab fa-wpforms' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '7' name,  'Поездка' tooltip, 'fas fa-car-side' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '8' name,  'Передача груза клиенту' tooltip, 'far fa-smile-wink' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    
	-- SELECT 2
	select 1

	-- SELECT 3
    select 'statusbar' viewType, 1 hideTitleCount, 'h3' headerTag
	
		
	-- 4 SELECT Footer data or kanban/gantt data
    select * from (
      select 'Клиент' name, 1 shift, 1 width, 0 [top] 
      union
      select 'Менеджер' name, 2 shift, 2 width, 1 [top]   
       union
      select 'Диспетчер' name, 4 shift, 2 width, 0 [top] 
      union
      select 'Экспедитор' name, 6 shift, 3 width, 1 [top] 
   )t1 
   order by shift -- order important
END

В SELECT 1 передаются данные по элементам (статусы), а в SELECT 4 передаются данные для постоения подписей сверху и снизу.