CADENZA-36955 CADENZA-37861 feat: Added setCustomValidity() and `Va…

…lidationMessageType` to control geometry editor validation state and allow additional validation

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Added
+- `setCustomValidity()` and `ValidationMessageType` to control geometry editor validation state
 
 ## 2.13.1 - 2024-09-24
 ### Fixed

sandbox.html

@@ -143,7 +143,7 @@
       iframe: parentMode ? undefined : 'iframe',
       debug: true
     });
-    const actionHandlers = {
+    window.actionHandlers = {
       show: data => cadenzaClient.show(data.embeddingTargetId, getOptions(data)),
       showPage: data => cadenzaClient.show({ page: data.page }, getOptions(data)),
       showMap: data => cadenzaClient.showMap(data.embeddingTargetId, getOptions(data)),
@@ -181,7 +181,8 @@
         cadenzaClient.fetchAreaIntersections(data.embeddingTargetId, JSON.parse(data.layer), JSON.parse(data.geometry), getOptions(data))
           .then(console.log);
       },
-      downloadData: data => cadenzaClient.downloadData(data.embeddingTargetId, data.dataType, getOptions(data))
+      downloadData: data => cadenzaClient.downloadData(data.embeddingTargetId, data.dataType, getOptions(data)),
+      setCustomValidity: data => cadenzaClient.setCustomValidity(data.message, data.type)
     };
 
     const form = document.getElementById('form');
@@ -472,9 +473,28 @@
   </div>
 </template>
 
+<template id="common-setCustomValidity" >
+  <fieldset>
+    <legend>setCustomValidity</legend>
+    <label for="customValidityType">Type</label>
+    <select name="customValidityType" id="customValidityType">
+      <option>success</option>
+      <option>info</option>
+      <option>warning</option>
+      <option selected="selected">error</option>
+    </select>
+    <label for="customValidityMessage">Message</label>
+    <input type="text" name="customValidityMessage" id="customValidityMessage">
+    <button type="button" id="setCustomValidityButton" onclick="actionHandlers['setCustomValidity']({
+      type: document.getElementById('customValidityType').value,
+      message: document.getElementById('customValidityMessage').value
+    });">Send</button>
+  </fieldset>
+</template>
+
 <template data-action="setFilter" data-common="filter"></template>
 
-<template data-action="createGeometry" data-common="map,filter">
+<template data-action="createGeometry" data-common="map,filter,setCustomValidity">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
@@ -502,7 +522,7 @@
   </div>
 </template>
 
-<template data-action="editGeometry" data-common="zoomTo,map,filter">
+<template data-action="editGeometry" data-common="zoomTo,map,filter,setCustomValidity">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>

src/cadenza.js

@@ -162,6 +162,7 @@ globalThis.cadenza = Object.assign(
  * @typedef FeatureCollection - A adapted [GeoJSON](https://geojson.org/) feature collection object
  * @property {Feature[]} features - The features within this collection
  */
+/** @typedef {'error'|'warning'|'info'|'success'} CustomValidityType - The type of custom validity used for disclose on visual presentation and form submission behavior */
 
 let hasCadenzaSession = false;
 
@@ -648,6 +649,23 @@ export class CadenzaClient {
     }
   }
 
+  /**
+   * Set custom validity state of the geometry editor in addition to the default validation state (including errors and
+   * warnings). When set to error the dialog submission is blocked.
+   * If there already is a custom state set it will override it.
+   * Passing '' will reset the custom state to undefined, meaning no custom state is displayed.
+   * If no geometry editing is started, the method call has no effect.
+   * @param message {string} The message to show in the dialog
+   * @param [type] {CustomValidityType} The type of message (defaults to 'error')
+   */
+  setCustomValidity(message, type = 'error') {
+    assert(
+      ['error', 'warning', 'info', 'success'].includes(type),
+      `Invalid validity type: ${type}`,
+    );
+    this.#postEvent('setCustomValidity', { message, type });
+  }
+
   /**
    * Select objects in a workbook map.
    *