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

@@ -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 || undefined)
     };
 
     const form = document.getElementById('form');
@@ -297,6 +298,7 @@
             <option value="createGeometry">Create Geometry</option>
             <option value="editGeometry">Edit Geometry</option>
             <option value="selectObjects">Select Objects</option>
+            <option value="setCustomValidity">Set Custom Validity</option>
           </optgroup>
           <optgroup label="Without Iframe">
             <option value="downloadData">Download data</option>
@@ -472,6 +474,20 @@
   </div>
 </template>
 
+<template data-action="setCustomValidity">
+  <p>Requires a geometry editing UI (Create / Edit Geometry actions) to be opened first.</p>
+  <label for="message">Message</label>
+  <input type="text" name="message" id="message">
+  <label for="type">Type</label>
+  <select name="type" id="type">
+    <option selected></option>
+    <option>success</option>
+    <option>info</option>
+    <option>warning</option>
+    <option>error</option>
+  </select>
+</template>
+
 <template data-action="setFilter" data-common="filter"></template>
 
 <template data-action="createGeometry" data-common="map,filter">

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 {string} message The message to show in the dialog
+   * @param {CustomValidityType} [type] 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.
    *