/ client_code / Demo / form_template.yaml
form_template.yaml
  1  components:
  2  - layout_properties: {grid_position: 'SGJRUD,FWDVZW'}
  3    name: label_4
  4    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: MessagePill, tooltip: '', underline: false, visible: true}
  5    type: Label
  6  - layout_properties: {grid_position: 'ZNPMZP,WQEHXP'}
  7    name: message_pill_1
  8    properties: {level: info, message: MessagePill with level 'info'}
  9    type: form:MessagePill
 10  - layout_properties: {grid_position: 'XCQIYO,BMGHER'}
 11    name: message_pill_2
 12    properties: {level: success, message: MessagePill with level 'success'}
 13    type: form:MessagePill
 14  - layout_properties: {grid_position: 'GUSGTP,SSRSAE'}
 15    name: message_pill_3
 16    properties: {level: warning, message: MessagePill with level 'warning'}
 17    type: form:MessagePill
 18  - layout_properties: {grid_position: 'CNITUV,WYNUFR'}
 19    name: message_pill_4
 20    properties: {level: error, message: MessagePill with level 'error'}
 21    type: form:MessagePill
 22  - layout_properties: {grid_position: 'PNDPSW,JQKZOF'}
 23    name: label_1
 24    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: none, text: IndeterminateProgressBar, tooltip: '', underline: false, visible: true}
 25    type: Label
 26  - layout_properties: {grid_position: 'MBVZPS,ZJSMWM'}
 27    name: indeterminate_progress_bar_1
 28    properties: {}
 29    type: form:ProgressBar.Indeterminate
 30  - layout_properties:
 31      col_widths: {}
 32      grid_position: YOHVQO,NLYAQR
 33    name: label_1_copy
 34    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: none, text: ProgressBar, tooltip: '', underline: false, visible: true}
 35    type: Label
 36  - layout_properties: {grid_position: 'TUUBRI,CREBNE'}
 37    name: progress_bar
 38    properties: {indicator_colour: '#1976D2', progress: 0.5, track_colour: '#b3d4fc'}
 39    type: form:ProgressBar.Determinate
 40  - layout_properties: {grid_position: 'YBVZRV,XCMOTC'}
 41    name: label_3
 42    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Auto Refresh, tooltip: '', underline: false, visible: true}
 43    type: Label
 44  - components:
 45    - event_bindings: {click: reset_button_click}
 46      layout_properties: {grid_position: 'YBVZRV,XBXDIA'}
 47      name: reset_button
 48      properties: {align: center, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:refresh', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: '', tooltip: Rest counts, underline: false, visible: true}
 49      type: Button
 50    - event_bindings: {click: minus_button_click}
 51      layout_properties: {grid_position: 'WYANSY,GEJTSR'}
 52      name: minus_button
 53      properties: {align: center, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:minus', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: '', tooltip: Decrease tally, underline: false, visible: true}
 54      type: Button
 55    - data_bindings:
 56      - {code: 'self.item[''tally'']', property: text}
 57      layout_properties: {}
 58      name: label_2
 59      properties: {}
 60      type: Label
 61    - event_bindings: {click: plus_button_click}
 62      layout_properties: {}
 63      name: plus_button
 64      properties: {align: center, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:plus', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: '', tooltip: Increase tally, underline: false, visible: true}
 65      type: Button
 66    - data_bindings:
 67      - {code: 'f"These buttons have been clicked {self.item[''counter'']} times"', property: text}
 68      layout_properties: {grid_position: 'YBVZRV,HFMSBF'}
 69      name: label_5
 70      properties: {}
 71      type: Label
 72    layout_properties: {grid_position: 'MBIOXI,WEKBGG'}
 73    name: flow_panel_1
 74    properties: {}
 75    type: FlowPanel
 76  - event_bindings: {tick: timer_1_tick}
 77    name: timer_1
 78    properties: {interval: 0.1}
 79    type: Timer
 80  - layout_properties:
 81      col_widths: {}
 82      grid_position: XYBAWW,UZLMNM
 83    name: label_3_copy_4
 84    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Tabs Component, tooltip: '', underline: false, visible: true}
 85    type: Label
 86  - event_bindings: {tab_click: tabs_1_tab_click}
 87    layout_properties: {grid_position: 'ADKQXK,NWEGOM'}
 88    name: tabs_1
 89    properties:
 90      active_background: '#2196F344'
 91      active_tab_index: 0
 92      align: left
 93      background: ''
 94      bold: false
 95      font: ''
 96      font_size: ''
 97      foreground: '#2196F3'
 98      italic: false
 99      role: ''
100      spacing_above: none
101      spacing_below: none
102      tab_titles: [Tab 1, Tab 2, Tab 3]
103      visible: true
104    type: form:Tabs
105  - components:
106    - layout_properties: {grid_position: 'BXXKLU,CAESOP'}
107      name: tabs_label
108      properties: {align: center, background: '', bold: false, border: '', font: '', font_size: 18, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: large, text: Tab 1 is visible, tooltip: '', underline: false, visible: true}
109      type: Label
110    layout_properties: {grid_position: 'ZNFPXX,RTVBWV'}
111    name: tabs_panel
112    properties: {background: '', border: '', col_spacing: medium, col_widths: '{}', foreground: '', role: null, spacing_above: none, spacing_below: small, tooltip: '', visible: true, wrap_on: mobile}
113    type: ColumnPanel
114  - layout_properties:
115      col_widths: {}
116      grid_position: RDPMGN,GEQMNU
117    name: label_3_copy_3
118    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Switch Component, tooltip: '', underline: false, visible: true}
119    type: Label
120  - event_bindings: {}
121    layout_properties: {grid_position: 'MZQIRA,PWAOPO', width: 54}
122    name: switch_1
123    properties: {background: '', bold: true, checked: true, checked_color: '', enabled: true, font_size: 14, foreground: null, italic: true, spacing_above: small, spacing_below: small, text_post: 'on', text_pre: 'off', tooltip: '', visible: true}
124    type: form:Switch
125  - layout_properties:
126      col_widths: {}
127      grid_position: FIUEYU,YFELUZ
128    name: label_3_copy
129    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Multi Select Dropdown, tooltip: '', underline: false, visible: true}
130    type: Label
131  - event_bindings: {change: multi_select_drop_down_1_change}
132    layout_properties: {grid_position: 'UMZOFV,UZZMKN'}
133    name: multi_select_drop_down_1
134    properties:
135      align: left
136      enable_filtering: true
137      enabled: true
138      items: [foo, bar, '---', eggs, spam]
139      multiple: true
140      placeholder: None Selected
141      spacing_above: small
142      spacing_below: small
143      visible: true
144    type: form:MultiSelectDropDown
145  - layout_properties:
146      col_widths: {}
147      grid_position: FBTNBP,PVGRIB
148    name: label_3_copy_2
149    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Quill Editor, tooltip: '', underline: false, visible: true}
150    type: Label
151  - event_bindings: {text_change: quill_text_change}
152    layout_properties:
153      col_widths: {}
154      grid_position: XFUXGM,KNTPBT
155    name: quill
156    properties: {auto_expand: true, content: '', enabled: true, height: '150', placeholder: hi there, readonly: false, spacing_above: small, spacing_below: small, theme: snow, toolbar: true, visible: true}
157    type: form:Quill
158  - layout_properties:
159      col_widths: {}
160      grid_position: WJJWDU,YMUSBV
161    name: label_4_copy_3
162    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Autocomplete Component, tooltip: '', underline: false, visible: true}
163    type: Label
164  - data_bindings:
165    - {code: 'self.item[''text'']', property: text, writeback: true}
166    event_bindings: {focus: autocomplete_event, lost_focus: autocomplete_event, pressed_enter: autocomplete_event, suggestion_clicked: autocomplete_event}
167    layout_properties: {grid_position: 'YVFANF,BPSWYI'}
168    name: autocomplete_1
169    properties:
170      enabled: true
171      placeholder: ''
172      spacing_above: small
173      spacing_below: small
174      suggest_if_empty: true
175      suggestions: [Anvil, AT&T, Adobe, Airbnb, Alphabet, Amazon, Apple, Broadcom, Charter Communications, Cisco, Comcast, Facebook, IBM, Intel, Intuit, Mastercard, Microsoft, Netflix, Nvidia, Oracle, PayPal, Qualcomm, Salesforce, ServiceNow, Square, T-Mobile US, Texas Instruments, Verizon, Visa, Zoom]
176      text: ''
177      visible: true
178    type: form:Autocomplete
179  - layout_properties:
180      col_widths: {}
181      grid_position: NHJHEA,GPPVWA
182    name: label_4_copy
183    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Slider Component, tooltip: '', underline: false, visible: true}
184    type: Label
185  - data_bindings:
186    - {code: 'self.item[''values'']', property: values, writeback: true}
187    event_bindings: {change: slider_change, slide: slider_slide}
188    layout_properties:
189      col_widths: {}
190      grid_position: SUVLYR,ZJPVFX
191    name: slider
192    properties: {animate: true, behaviour: tap, color: '#FF9800', connect: 'False, True, False', enabled: true, format: '£{:.2f}', limit: null, margin: null, max: 100, min: 0, padding: '', pips: true, pips_density: 5, pips_mode: positions, pips_stepped: true, pips_values: '0, 25, 50, 75, 100', spacing_above: medium, spacing_below: medium, start: '20, 50', step: 5, tooltips: true, visible: true}
193    type: form:Slider
194  - data_bindings:
195    - {code: 'self.slider.formatted_values[0]', property: text, writeback: true}
196    event_bindings: {pressed_enter: slider_textbox_enter}
197    layout_properties:
198      col_widths: {}
199      grid_position: UEQKRF,WIUEFV
200    name: text_box_left
201    properties: {}
202    type: TextBox
203  - event_bindings: {click: slider_button_reset_click}
204    layout_properties:
205      col_widths: {}
206      grid_position: UEQKRF,JQRAMC
207    name: slider_button_reset
208    properties: {align: full, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:refresh', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: RESET, tooltip: '', underline: false, visible: true}
209    type: Button
210  - data_bindings:
211    - {code: 'self.slider.formatted_values[1]', property: text, writeback: true}
212    event_bindings: {pressed_enter: slider_textbox_enter}
213    layout_properties:
214      col_widths: {}
215      grid_position: UEQKRF,SGIMVH
216    name: text_box_right
217    properties: {}
218    type: TextBox
219  - layout_properties:
220      col_widths: {}
221      grid_position: VGOMRT,ISPGIW
222    name: label_4_copy_2
223    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: large, text: Slider Component - with custom pips - see code, tooltip: '', underline: false, visible: true}
224    type: Label
225  - data_bindings:
226    - {code: 'self.item[''agree'']', property: formatted_value, writeback: true}
227    event_bindings: {change: slider_agree_change}
228    layout_properties: {grid_position: 'CVTVHB,QMZPRB'}
229    name: slider_agree
230    properties: {animate: false, bar_height: '', behaviour: tap, color: null, connect: lower, enabled: true, format: .1f, handle_size: '', limit: null, margin: null, max: 5, min: -5, padding: '', pips: true, pips_density: -1, pips_mode: count, pips_stepped: false, pips_values: '5', role: '', spacing_above: small, spacing_below: small, start: '0', step: 1, tooltips: true, visible: true}
231    type: form:Slider
232  - event_bindings: {click: slider_down_click}
233    layout_properties:
234      col_widths: {}
235      grid_position: SKFJND,QWVXHQ
236    name: slider_down
237    properties: {align: center, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:minus', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: '', tooltip: '', underline: false, visible: true}
238    type: Button
239  - event_bindings: {click: slider_reset_click}
240    layout_properties: {grid_position: 'SKFJND,GTGWKT'}
241    name: slider_reset
242    properties: {align: center, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:refresh', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: '', tooltip: '', underline: false, visible: true}
243    type: Button
244  - event_bindings: {click: slider_up_click}
245    layout_properties:
246      col_widths: {}
247      grid_position: SKFJND,KWGACE
248    name: slider_up
249    properties: {align: center, background: '', bold: false, border: '', enabled: true, font: '', font_size: null, foreground: '', icon: 'fa:plus', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: '', tooltip: '', underline: false, visible: true}
250    type: Button
251  - layout_properties:
252      col_widths: {}
253      grid_position: VFWOQD,VIUOBZ
254    name: label_3_copy_5
255    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: large, spacing_below: small, text: Chips, tooltip: '', underline: false, visible: true}
256    type: Label
257  - data_bindings:
258    - {code: 'self.item[''chips'']', property: chips, writeback: true}
259    event_bindings: {chips_changed: chips_1_chips_changed}
260    layout_properties: {grid_position: 'KHIAAV,YQLEWH'}
261    name: chips_1
262    properties:
263      chips: [foo, bar]
264      primary_placeholder: Enter a tag
265      secondary_placeholder: +Tag
266      spacing_above: small
267      spacing_below: small
268      visible: true
269    type: form:ChipsInput
270  - layout_properties:
271      col_widths: {}
272      grid_position: STFSBF,BYBVXR
273    name: spacer_1_copy_3
274    properties: {height: 277}
275    type: Spacer
276  - layout_properties: {grid_position: 'WHHTUU,ICVIKX'}
277    name: label_6
278    properties: {align: left, background: '', bold: true, border: '', font: '', font_size: null, foreground: '', icon: '', icon_align: left, italic: false, role: null, spacing_above: small, spacing_below: small, text: Pivot Component, tooltip: '', underline: false, visible: true}
279    type: Label
280  - layout_properties: {grid_position: 'HIYTRU,YYRQCD'}
281    name: pivot
282    properties:
283      aggregator: Count
284      columns: [Party]
285      rows: [Province]
286      values: ''
287    type: form:Pivot
288  container:
289    properties: {col_widths: '{}'}
290    type: ColumnPanel
291  is_package: true