# 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 Panel allows users to change state of selected contracts.
adminus_crm_contract_detail Panel displays the defined template which can contain information about contracts from Adminus CRM.
adminus_crm_contract_pick CRM Contract pick panel allows user to pick one or more contracts of customers listed in customers variable.
adminus_crm_contract_pick_solo CRM Contract pick panel allows user to pick only one contracts of customers listed in customers variable.
adminus_crm_customer_detail Panel displays customers details as defined in template.
adminus_crm_customer_pick Panels offers searching for customers in Adminus CRM and store their ids to variable.
adminus_crm_customer_pick_solo Panels offers searching for customers in Adminus CRM and storing a reference ID to single one in variable.
adminus_nms_area_pick_solo Panels offers searching for areas in Adminus NMS and storing a reference ID to single one in variable.
adminus_nms_device_pick_solo Panels offers searching for devices in Adminus NMS and storing a reference ID to single one in variable.
adminus_nms_pop_pick_solo Panels offers searching for pops in Adminus NMS and storing a reference ID to single one in variable.
ares_subject_search ARES subject search callback
async This panel allows user to schedule date and time of an async step.
calendar This panel displays calendar similar to inbox calendar view. Allow process architect to display more then one calendar (users, user groups, external) and many other options.
chart_highcharts Highcharts panel represents data inside charts.
container Allow to wrap panels into one big panel.
datus Extra powerful panel to define form schema and render it as form inputs.
dbd_debt_check Panels offers testing subject for debts, insolvencies and distraints from multiple registries.
dbd_debt_result Panels shows result of subject debt checks from multiple registries (debts, insolvencies, distraints).
discussion Panel discussion offers basic two level user discussion.
email Email panel is a complex tool to send emails with up-to-date process data.
expiration Expiration displays process or step expiration.
file_render File Render panel only displays previously uploaded files. Files can be downloaded or previewed.
file_upload File Upload panel allows user to upload, delete and download files that can be displayed in any part of process with File Render panel.
headliner Headliner panel contains general process and step information like name, resolver and created date.
iframe Panel displays target url in iframe inside itself.
map Panels displaying the GPS coordinates on the map.
next Panel show next button and move process to the next step.
pick_item Pick item selects one or multiple values from json variable and store it in another variable.
pick_reader Pick resolver panel sets selected users as readers of active step using multiselect box.
pick_resolver Pick resolver panel shows select box with possible resolver.
pick_role_resolver Pick role resolver panel sets users to selected role.
pick_user Pick User panel enables saving user ids into variable.
planning This panel adds planning functionality to given step.
process_delete Shows panel with button to delete process.
process_inspector Shows panel with link to process inspector.
process_preview SPanel with graphical preview of the process.
quick_actions Show buttons, update variable and move process to next step.
rest Panel for sending request over HTTP.
ruian_address Panels for saving and showing address data.
sudo_reopener Sudo reopener allows anyone with permissions reopen already completed process.
sudo_self_resolver Sudo self resolver allows anyone with permissions to display step to pick itself as a step resolver.
summary Panel to be used only in special layout `summary`.
systeminfo Displays system environment parameters and settings.
tags This panel is used for managing process tags.
templater Templater panel renders defined latte template into html
timer Timer enables resolver to measure time spent on certain task.
wall Wall panel displays process history - actions, comments, files and anchors.
wysiwyg Panel for rich text editing. Write HTML or Markdown id editor and save its source code to defined variable.
youtube_player ARES subject search callback

# Panelus

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

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

# 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:

  1. Template step layout (overrides 2 & 3)
  2. Template process layout (overrides 3)
  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.

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

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.

layout:
	sections:
		s30:
			panels:
				wall:
					render: {width: 6}
					config:
						# all records
						severity: 1
1
2
3
4
5
6
7
8
9

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)

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

Disable sections/panels

layout:
	sections:
		# Disable whole section
		s1: false

		# Disable 1 panel
		s10:
			panels:
				next: false
1
2
3
4
5
6
7
8
9

# 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