# Panels

One of the core parts of Floweye is its system of panels and callbacks.

# Built-in Panels

Take a look at all built-in panels.

Panel	Description
adminus_crm_contract_change_state	Change state of selected contracts in Adminus CRM
adminus_crm_contract_detail	Display details about contracts from Adminus CRM
adminus_crm_contract_pick_solo	Pick single Adminus CRM customer contract and store it into output variable
adminus_crm_customer_detail	Display details about customers from Adminus CRM
adminus_crm_customer_pick_solo	Pick single Adminus CRM customer and store it into output variable
adminus_nms_area_pick_solo	Pick single Adminus NMS area and store it into output variable
adminus_nms_device_pick_solo	Pick single Adminus NMS device and store it into output variable
adminus_nms_pop_pick_solo	Pick single Adminus NMS pop and store it into output variable
ares_subject_search	Pick single economic subject from ARES registry and store it into output variable
async	Schedule time when async step will be sent to next step
calendar	Calendar similar to inbox calendar view
chart_highcharts	Visualize data with [Highcharts](https://www.highcharts.com/) charts
contact_pick_solo	Pick a single contact and assign it to a collection
datus	Define form schema and render it as a form
dbd_debt_check	Check subject for debts, insolvencies and distraints in multiple registries
dbd_debt_result	Display result of subject debt checks from multiple registries (debts, insolvencies, distraints)
discussion	User discussion across all process steps
email	Send emails from process
expiration	Display step expiration
file_render	Display and download previously uploaded files
file_upload	Upload, delete and download files
headliner	General process and step information like name, resolver and creation date
iframe	Display target url in iframe inside itself
map	Openstreet map
markdown	Edit markdown and store it in variable
next	Continue to the next step with a button
pick_item	Pick one or more values and store them into output variable
pick_item_rest	Pick one or more values from rest call and store them into output variable
pick_resolver	Pick one of possible resolvers as a current step resolver
pick_user	Pick one or more users and store their IDs into output variable
planning	Add planning functionality to given step
process_delete	Delete current process with a button
process_grid	Process grid renders formatted table of filtered processes. Process grid also allows to select and assign processes to a variable.
process_list	Process list renders formatted list of processes
process_preview	Graphical preview of the process
quick_actions	Set variable values with a button
rest	Perform a HTTP request and store response into variable
ruian_address	Pick single RUIAN address and store it into output variable
sudo_reopener	Reopen already completed process
sudo_self_resolver	Pick itself as a step resolver (available for any reader)
summary	Display process summary
systeminfo	Display system environment parameters and settings
tags	Pick tags which should be added to process
templater	Display html template
timer	Measure time spent on a certain task
wall	Process history - actions, comments, files and anchors
wysiwyg	Rich text editing. Write HTML or Markdown and store it in variable
youtube_player	YouTube video player

# Panelus

Goal of panelus component is allow to define for any page (in our case detail of process step) own rendering formation of individual panels.

Panel is individually existing component, which is responsible of data displaying, manipulation, etc.

# Formation

We have 2 possible rendering formation:

blueprint - low level template with panels
layout - structural defined panels

# Blueprint

Blueprint is predefined template with full featured Latte and panel definitions. It's really low level and is for advanced users.

# Blueprint ajax snippets

Blueprint ajax snippets are parts of a blueprint template. Snippets can be updated on ajax calls without a page refresh. In the example below, we define snippet1 in template using n:snippet macro. snippet1 alias <div class="border border-gray-500" n:snippet="snippet1"> will be replaced with updated data after using panel with extra.ajax.snippets configuration in ajax mode. In this example templater panel will show new timestamp when contact is selected or discarded. Snippets can be defined by snippet block macro.

# Example

steps:
	stepX:
		extra: {features: {ajax: true}}
		blueprint:
			panels:
				contact_pick_solo:
					extra:
						ajax:
							snippets: ['snippet1']
					config:
						...
				templater:
					config:
						template: "{time()}"

			template: """
				<div x-data="{ open: true }" class="p-8 space-y-8">
					<div class="flex">
						<button @click="open = true" class="bg-green-600 text-white px-4 py-2">Show panels</button>
						<button @click="open = false" class="bg-red-600 text-white px-4 py-2">Hide panels</button>
					</div>
					<div x-show="open" class="flex space-x-4">
						<div class="border border-gray-500">{control contact_pick_solo}</div>
						<div class="border border-gray-500" n:snippet="snippet1">{control templater}</div>
					</div>
				</div>
				"""

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Snippets

There is really great low level template extending case with our snippets.

extra:
	snippets:
		wrapper: """
			{block header}Header{/block}
			{block content}{/block}
			{block footer}Footer{/block}
		"""

1
2
3
4
5
6
7

steps:
	stepX:
		blueprint:
			panels:
				templater:
					config:
						template: "This is content"
			template: '''
				{* Include predefined blocks *}
				{includeblock "wrapper.snippet"}

				{* Override content block *}
				{define content}
					{control templater}
				{/define}

				{* Header/footer are not override *}
			'''

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Layout

Layout is predefined set of panels and sections. Basic layout is defined at application configuration and could be modified for each instance of Lotus.

Resulting layout is build from application layout, layout of process template and layout of process step template.

Priority:

Template step layout (overrides 2 & 3)
Template process layout (overrides 3)
Application layout

In case that application layout defines a panel then in process template or in process step template could be that panel hidden.

If panel is defined in process template then it could be hidden by process step template.

# Configuration

Basic layout is defined at application configuration and could be modified for each instance of Lotus. Simultaneously could be defined multiple layouts. For each process could be defined own layout (referenced by key name).

Layouts are divided into sections which contain individual panels. It is needed to take care of the order because it is taken into account during render.

Section must start with letter s followed by number. Number represent order of sections.

Note: Keep a numerical gap between sections. You could add section between two specific sections in layout which extends another layout.

Each panel have render (required), config (required) and extra parts.

steps:
	start:
		layout:
			sections:

				# Rendered 2nd
				s30:
					panels:
						panelA:
							render: {...}
							config: {...}
						panelB:
							render: {...}
							config: {...}

				# Rendered 1st
				s20:
					panels:
						panelC:
							render: {...}
							config: {...}

				# Rendered 3rd
				s40:
					sections:
						s10:
							panels:
								panelD1:
									render: {...}
									config: {...}
						s11:
							panels:
								panelD2:
									render: {...}
									config: {...}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Render

width (string)

There is used 12-columns grid system.

render:
	width: 12 # full size
	width: 6 # half size
	width: 4 # third size
	width: 3 # quarter size

1
2
3
4
5

offset (string)

There is used 12-columns grid system.

render:
	offset: 1 # 1 column offset
	offset: 2 # 2 columns offset

1
2
3

class (array) - Append defined class into panel div.
```
render:
	class: [myclass1, foobar]
```
1
2

theme (object) - Adds custom panel styling

render:
	theme:
		border: border
		wrapper: bg-white
		content:

1
2
3
4
5

Config

Config key is unique for every panel. Take a look at panel configurations.

steps:
	start:
		layout:
			sections:
				s30:
					panels:
						wall:
							render: {width: 6}
							config:
								# all records
								severity: 1

1
2
3
4
5
6
7
8
9
10
11

Extra

help (object) - Shows help icon with additional description with markdown support.

help.title - Additional help title
help.content - User defined help text

extra:
	help:
		title: Example headline
		content: """
			This is **special** help! Please fill:

			- this
			- and this
			- and that
		"""

1
2
3
4
5
6
7
8
9
10

enabled

false ⇒ panel is NOT rendered
true ⇒ panel is rendered

extra:
	enabled: '{$_process->activeStep->resolver !== null}'

1
2

# Tips

Same panel twice

If you want within layout use same panel twice then suffix panel name with __ (double underscore) and name unique identifier (e.g __1 and __2)

steps:
	start:
		layout:
			sections:
				s30:
					panels:
						wall__1:
							render: {width: 6}
							config:
								# all records
								severity: 1

						wall__2:
							render: {width: 6}
							config:
								# only > critical
								severity: 5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Disable sections/panels

steps:
	start:
		layout:
			sections:
				# Disable whole section
				s1: false

				# Disable 1 panel
				s10:
					panels:
						next: false

1
2
3
4
5
6
7
8
9
10
11

# Application

Here is the list of the predefined layouts:

minimal - ideal for extending/overriding
default - basic layout
summary - summary of completed process
debug - debug layout (only for development)

# Minimal

Ideal for extending because it add no panels.

# Minimal layout
# | panels => no panel
minimal:
	_default:
		sections:
			render: {height: auto}
		panels:
			render: {width: 6}

1
2
3
4
5
6
7
8

# Default

Default layout add headliner and button next.

# Default layout
# | headliner |
# | next |
default:
	_default:
		sections:
			render: {height: auto}
		panels:
			render: {width: 6}

	sections:
		s10:
			panels:
				headliner:
					render: {width: 12}

		s20:
			panels:
				next:
					render: {width: 4}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Summary

This layout is used to display process summary after its completion.

# Summary layout - for completed processes
# | summary
summary:
	extends: minimal
	sections:
		s10:
			panels:
				summary:
					render: {width: 12}

1
2
3
4
5
6
7
8
9
10

# Debug

This layout should be used in debug only. It extends default layout and add link to process inspector, pick resolver panel, discussion and wall.

# Debugging layout
# @default
# | process_inspector | pick_resolver |
debug:
	extends: minimal
	sections:
		s10:
			panels:
				process_inspector:
					render: {width: 6}
				pick_resolver:
					render: {width: 6}
					config: {all: true, selectbox: true}

1
2
3
4
5
6
7
8
9
10
11
12
13