Probe component

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -237,7 +237,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('class', 'A CSS class to apply to the form element.', 'TEXT', FALSE, TRUE),
     ('prefix_icon','Icon to display on the left side of the input field, on the same line.','ICON',FALSE,TRUE),
     ('prefix','Text to display on the left side of the input field, on the same line.','TEXT',FALSE,TRUE),
-    ('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE)
+    ('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE),
+    ('id','A unique identifier for the input, which can then be used to select and manage the field with Javascript code. Usefull for advanced using as setting client side event listeners, interactive control of input field (disabled, visibility, read only, e.g.) and AJAX requests.','TEXT',FALSE,TRUE)
 ) x;
 INSERT INTO example(component, description, properties) VALUES
     (

examples/official-site/sqlpage/migrations/36_probe.sql

@@ -0,0 +1,54 @@
+-- Documentation for the probe component
+INSERT INTO component (name, description, icon, introduced_in_version) VALUES (
+    'probe',
+    'A debug component that displays a value (constant, variable, parameter value, result of an SQL function, e.g.). Usefull to validate data flow or function behaviour. Each value (except NULL value) is surrounded by double quotes and followed by datatype (number, string, boolean, e.g.).',
+    'microscope',
+    '0.20.0'
+);
+
+INSERT INTO parameter (component,name,description,type,top_level,optional) VALUES (
+    'probe',
+    'name',
+    'Value identifier (used to display the probe result).',
+    'TEXT',
+    TRUE,
+    FALSE
+),(
+    'probe',
+    'contents',
+    'A value to analyze by the probe.',
+    'VARIANT',
+    TRUE,
+    FALSE
+);
+
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a number.',
+    JSON(
+        '[
+            {"component":"probe","name":"myValue","contents":42}
+        ]'
+    )
+);
+
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a string.',
+    JSON(
+        '[
+            {"component":"probe","name":"myString","contents": "Hello world! "}
+        ]'
+    )
+);
+
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a NULL value.',
+    JSON(
+        '[
+            {"component":"probe","name":"myVar","contents": null}
+        ]'
+    )
+);

sqlpage/templates/form.handlebars

@@ -16,7 +16,7 @@
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
                 <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
                     <label class="form-selectgroup-item flex-fill">
-                        <input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
+                        <input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
                         <div class="form-selectgroup-label d-flex align-items-center p-3">
                             <div class="me-3">
                                 <span class="form-selectgroup-check"></span>
@@ -35,7 +35,7 @@
                 </div>
             {{else}}
             {{~#if (eq type "hidden")}}
-                <input type="hidden" name="{{name}}" value="{{value}}">
+                <input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
             {{else}}
                 <label class="form-label mb-2 col-md-{{default width 12}}">
                     {{default label name}}
@@ -48,7 +48,8 @@
                             class="form-control"
                             placeholder="{{placeholder}}"
                             rows="{{default rows 3}}"
-                            {{#if value}}value="{{value}}" {{/if~}}
+                            {{#if id}}id="{{id}}" {{/if~}}
+                            {{~#if value}}value="{{value}}" {{/if~}}
                             {{~#if minlength}}minlength="{{minlength}}" {{/if~}}
                             {{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
                             {{~#if required}}required="required" {{/if~}}
@@ -58,6 +59,7 @@
                         </textarea>
                     {{else}}{{#if (eq type 'select')}}
                         <select name="{{name}}" class="form-select"
+                        {{~#if id}} id="{{id}}" {{/if~}}
                         {{~#if required}} required="required" {{/if~}}
                         {{~#if autofocus}} autofocus {{/if~}}
                         {{~#if multiple}} multiple {{/if~}}
@@ -71,6 +73,7 @@
                             {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
                             {{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
                             <input name="{{name}}" class="form-control {{class}}" 
+                                {{~#if id}} id="{{id}}" {{/if~}}
                                 {{~#if type}} type="{{type}}" {{/if~}}
                                 {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                                 {{~#if value}} value="{{value}}" {{/if~}}

sqlpage/templates/probe.handlebars

@@ -0,0 +1 @@
+<pre>Value of {{name}} is {{#if (eq contents NULL)}}NULL{{else}}"{{contents}}" ({{typeof contents}}){{/if}}</pre>