# 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
adminus_crm_contract_detail
adminus_crm_contract_pick
adminus_crm_contract_pick_solo
adminus_crm_customer_detail
adminus_crm_customer_pick
adminus_crm_customer_pick_solo
adminus_nms_area_pick_solo
adminus_nms_device_pick_solo
adminus_nms_pop_pick_solo
ares_subject_search
async
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
container
datus
dbd_debt_check
dbd_debt_result
discussion
email
expiration
file_render
file_upload
headliner
iframe
map
markdown
next
pick_item
pick_reader
pick_resolver
pick_role_resolver
pick_user
planning
process_delete
process_inspector
process_preview
quick_actions
rest
ruian_address
sudo_reopener Sudo reopener allows anyone with permissions reopen already completed process.
sudo_self_resolver
summary
systeminfo
tags
templater
timer
wall
wysiwyg
youtube_player

# 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