From 4d0a89b55d2d7cc9e52614e2560dc3a73f00a7f6 Mon Sep 17 00:00:00 2001 From: Gabriel Villalobos Date: Thu, 5 Mar 2026 10:49:06 -0600 Subject: [PATCH 1/6] Docs: Add SKETCHURL and sketches examples to Report Builder --- .../reports-examples/_order.yaml | 1 + .../reports-examples/sketches.md | 60 ++++ .../reports-introduction/functions.md | 302 +++++++++++------- 3 files changed, 252 insertions(+), 111 deletions(-) create mode 100644 docs/REPORT BUILDER/reports-examples/sketches.md diff --git a/docs/REPORT BUILDER/reports-examples/_order.yaml b/docs/REPORT BUILDER/reports-examples/_order.yaml index b4ef2010..19869665 100644 --- a/docs/REPORT BUILDER/reports-examples/_order.yaml +++ b/docs/REPORT BUILDER/reports-examples/_order.yaml @@ -15,6 +15,7 @@ - repeatable-field-child-records - resize - signature +- sketches - section - modifying-the-widthheight-of-the-table - timezone diff --git a/docs/REPORT BUILDER/reports-examples/sketches.md b/docs/REPORT BUILDER/reports-examples/sketches.md new file mode 100644 index 00000000..6ddc9969 --- /dev/null +++ b/docs/REPORT BUILDER/reports-examples/sketches.md @@ -0,0 +1,60 @@ +--- +title: Sketches +excerpt: "" +deprecated: false +hidden: false +metadata: + title: "" + description: "" + robots: noindex +next: + description: "" +--- + +# Display Sketches in Reports + +In the BODY section, search for `element.isSketchElement`. If it doesn't exist, you can add it to your `RENDERVALUES` loop. + +```javascript +<% } else if (element.isSketchElement) { %> +
+

+ <% value && value.items.forEach((item, index) => { %> + + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> <% }); %> +

+ +<% } %> +``` + +# Resize Sketches + +You can control the size of sketches in the STYLES section by targeting the `.sketch` class. + +```css +.sketch { + max-width: 100%; + height: auto; +} +``` + +# Accessing a specific sketch by its field name + +If you want to display the first sketch from a specific field: + +```javascript +
+ <% + var sketchField = record.formValues.find('my_sketch_field'); + var sketchId = sketchField && sketchField.items[0] && sketchField.items[0].mediaID; + %> + <% if (sketchId) { %> +
+ +
+ <% } %> +
+``` diff --git a/docs/REPORT BUILDER/reports-introduction/functions.md b/docs/REPORT BUILDER/reports-introduction/functions.md index 39afe8e6..9dc4a587 100644 --- a/docs/REPORT BUILDER/reports-introduction/functions.md +++ b/docs/REPORT BUILDER/reports-introduction/functions.md @@ -1,15 +1,16 @@ --- title: Functions -excerpt: '' +excerpt: "" deprecated: false hidden: false metadata: - title: '' - description: '' + title: "" + description: "" robots: index next: - description: '' + description: "" --- + ## API Make a Fulcrum [REST API](https://fulcrum.readme.io/reference) call @@ -27,10 +28,10 @@ String ### Examples ```js -API('/choice_lists', {qs: {per_page: 1}}) +API("/choice_lists", { qs: { per_page: 1 } }); ``` -*** +--- ## AUDIOURL @@ -49,10 +50,10 @@ String ### Examples ```js -AUDIOURL($my_audio_field[0].audio_id, {version: 'original'}) +AUDIOURL($my_audio_field[0].audio_id, { version: "original" }); ``` -*** +--- ## FORMATDATE @@ -71,10 +72,10 @@ String ### Examples ```js -FORMATDATE(new Date()) +FORMATDATE(new Date()); ``` -*** +--- ## GET @@ -93,10 +94,10 @@ String ### Examples ```js -GET('https://jsonplaceholder.typicode.com/posts', {qs: {userId: 1}}) +GET("https://jsonplaceholder.typicode.com/posts", { qs: { userId: 1 } }); ``` -*** +--- ## GETBLOB @@ -115,10 +116,10 @@ String ### Examples ```js -GETBLOB('https://learn.fulcrumapp.com/img/branding/fulcrum-icon.png') +GETBLOB("https://learn.fulcrumapp.com/img/branding/fulcrum-icon.png"); ``` -*** +--- ## JSONREQUEST @@ -135,10 +136,13 @@ String ### Examples ```js -JSONREQUEST({url: 'https://jsonplaceholder.typicode.com/posts', qs: {userId: 1}}) +JSONREQUEST({ + url: "https://jsonplaceholder.typicode.com/posts", + qs: { userId: 1 }, +}); ``` -*** +--- ## LOG @@ -155,10 +159,10 @@ String ### Examples ```js -LOG('Hello World') +LOG("Hello World"); ``` -*** +--- ## PHOTOURL @@ -177,10 +181,10 @@ String ### Examples ```js -PHOTOURL($my_photo_field[0].photo_id, {version: 'thumb'}) +PHOTOURL($my_photo_field[0].photo_id, { version: "thumb" }); ``` -*** +--- ## QS @@ -202,7 +206,7 @@ QS({name: "Robert", age: "20"} // name=Robert&age=20 ``` -*** +--- ## QUERY @@ -221,10 +225,10 @@ String ### Examples ```js -QUERY('SELECT name FROM forms', {format: 'json'}) +QUERY("SELECT name FROM forms", { format: "json" }); ``` -*** +--- ## QUERYVALUE @@ -241,10 +245,10 @@ String ### Examples ```js -QUERYVALUE(`SELECT form_id FROM forms WHERE name = '${form.name}'`) +QUERYVALUE(`SELECT form_id FROM forms WHERE name = '${form.name}'`); ``` -*** +--- ## RENDER @@ -252,7 +256,7 @@ The RENDER function is created automatically in all new advanced report template ### Parameters -`feature` Record or RepeatableItemValue (**required**) - The feature you are looking to render. +`feature` Record or RepeatableItemValue (**required**) - The feature you are looking to render. `options` System level variable that does not need to be defined. @@ -263,7 +267,12 @@ The RENDER function is created automatically in all new advanced report template ### Function Definition ```javascript -const RENDER = (feature, options, eachFunction, {container, parent, index, allValues} = {}) => { +const RENDER = ( + feature, + options, + eachFunction, + { container, parent, index, allValues } = {}, +) => { if (!container) { container = feature.formValues.container; } @@ -275,40 +284,74 @@ const RENDER = (feature, options, eachFunction, {container, parent, index, allVa for (const element of container.elements) { const formValue = feature.formValues.get(element.key); - const renderSection = element.isSectionElement ? () => { - global.RENDER(feature, options, eachFunction, {container: element, parent, feature, index, allValues}); - } : null; - - const renderRepeatableItems = element.isRepeatableElement ? (eachItemFunction) => { - if (!formValue) { - return; - } - - for (let i = 0; i < formValue.items.length; ++i) { - const item = formValue.items[i]; - - const newAllValues = allValues.copy(); - - newAllValues.merge(item.formValues); - newAllValues.merge(feature.formValues); // Add parent values too - - const renderItem = () => { - global.RENDER(item, options, eachFunction, {container: element, parent: feature, feature: item, index: i, allValues: newAllValues}); - }; - - eachItemFunction({element, value: item, renderItem, container: element, parent: feature, feature: item, index: i, allValues: newAllValues}); - } - } : null; + const renderSection = element.isSectionElement + ? () => { + global.RENDER(feature, options, eachFunction, { + container: element, + parent, + feature, + index, + allValues, + }); + } + : null; + + const renderRepeatableItems = element.isRepeatableElement + ? (eachItemFunction) => { + if (!formValue) { + return; + } + + for (let i = 0; i < formValue.items.length; ++i) { + const item = formValue.items[i]; + + const newAllValues = allValues.copy(); + + newAllValues.merge(item.formValues); + newAllValues.merge(feature.formValues); // Add parent values too + + const renderItem = () => { + global.RENDER(item, options, eachFunction, { + container: element, + parent: feature, + feature: item, + index: i, + allValues: newAllValues, + }); + }; + + eachItemFunction({ + element, + value: item, + renderItem, + container: element, + parent: feature, + feature: item, + index: i, + allValues: newAllValues, + }); + } + } + : null; if (eachFunction) { - eachFunction({element, value: formValue, renderSection, renderRepeatableItems, container, feature, index, parent, allValues}); + eachFunction({ + element, + value: formValue, + renderSection, + renderRepeatableItems, + container, + feature, + index, + parent, + allValues, + }); } } }; - ``` -*** +---
@@ -330,58 +373,69 @@ JSON - the feature `elements` and `values` ### Examples -```html -<% RENDERVALUES(record, null, function(element, value) { %> - <% if (element.isSectionElement) { %> -

<%= element.label %>

- <% } else if (element.isRepeatableElement) { %> - <% if (value.length) { %> -

<%= element.label %> <%= value && `(${value.displayValue})` %>

- <% } else { %> -

<%= value && value.displayValue %>

- <% } %> - <% } else if (element.isPhotoElement) { %> -
-

<%= element.label %>

-
- <% value && value.items.forEach((item, index) => { %> - - <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> - <% }); %> -
-
- <% } else if (element.isSignatureElement) { %> -
-

<%= element.label %>

- <% if (value && !value.isEmpty) { %> -
- - <% if (value.timestamp) { %> -

<%= element.agreementText %>

-

Signed <%= FORMATDATE(value.timestamp) %>

- <% } %> -
- <% } %> -
- <% } else if (element.isRecordLinkElement) { %> -
-

<%= element.label %>

- <% if (value && !value.isEmpty) { %> -
<%= value.items.map(item => item.displayValue).join(', ') %>
- <% } %> -
- <% } else { %> -
-

<%= element.label %>

-
<%= value && value.displayValue %>
-
+<% RENDERVALUES(record, null, function(element, value) { %> <% if +(element.isSectionElement) { %> + +

<%= element.label %>

+<% } else if (element.isRepeatableElement) { %> <% if (value.length) { %> +

+ <%= element.label %> <%= value && `(${value.displayValue})` %> +

+<% } else { %> +

<%= value && value.displayValue %>

+<% } %> <% } else if (element.isPhotoElement) { %> +
+

<%= element.label %>

+
+ <% value && value.items.forEach((item, index) => { %> + + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> <% }); %> +
+
+<% } else if (element.isSketchElement) { %> +
+

<%= element.label %>

+
+ <% value && value.items.forEach((item, index) => { %> + + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> <% }); %> +
+
+<% } else if (element.isSignatureElement) { %> +
+

<%= element.label %>

+ <% if (value && !value.isEmpty) { %> +
+ + <% if (value.timestamp) { %> +

<%= element.agreementText %>

+

Signed <%= FORMATDATE(value.timestamp) %>

+ <% } %> +
<% } %> -<% }) %> +
+<% } else if (element.isRecordLinkElement) { %> +
+

<%= element.label %>

+ <% if (value && !value.isEmpty) { %> +
+ <%= value.items.map(item => item.displayValue).join(', ') %> +
+ <% } %> +
+<% } else { %> +
+

<%= element.label %>

+
<%= value && value.displayValue %>
+
+<% } %> <% }) %> ``` -*** +---
@@ -402,10 +456,34 @@ String ### Examples ```js -SIGNATUREURL($my_signature_field.signature_id, {version: 'original'}) +SIGNATUREURL($my_signature_field.signature_id, { version: "original" }); ``` -*** +--- + +
+ +## SKETCHURL + +Generate a public sketch URL + +### Parameters + +`id` String (**required**) - The ID of the sketch + +`options` Object - `{version: 'large', expires: null}` + +### Returns + +String + +### Examples + +```js +SKETCHURL($my_sketch_field[0].sketch_id, { version: "large" }); +``` + +--- ## STATICMAP @@ -430,14 +508,16 @@ STATICMAP({mapEngine: ‘google’,markers: '34.052230,-118.243680', maptype: 'h ``` ```js Esri - + ``` ```html - + ``` -*** +--- ## TOJSON @@ -454,10 +534,10 @@ String ### Examples ```js -TOJSON(API('/choice_lists').choice_lists[0].name) +TOJSON(API("/choice_lists").choice_lists[0].name); ``` -*** +--- ## VIDEOURL @@ -476,5 +556,5 @@ String ### Examples ```js -VIDEOURL($my_video_field[0].video_id, {version: 'original'}) +VIDEOURL($my_video_field[0].video_id, { version: "original" }); ``` From a95075b1a6b54cfb41428f6a98391856f7f68cfe Mon Sep 17 00:00:00 2001 From: Gabriel Villalobos Date: Thu, 5 Mar 2026 10:49:56 -0600 Subject: [PATCH 2/6] Docs: Fix typo in sketches example --- docs/REPORT BUILDER/reports-examples/sketches.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/REPORT BUILDER/reports-examples/sketches.md b/docs/REPORT BUILDER/reports-examples/sketches.md index 6ddc9969..eb65251d 100644 --- a/docs/REPORT BUILDER/reports-examples/sketches.md +++ b/docs/REPORT BUILDER/reports-examples/sketches.md @@ -18,7 +18,7 @@ In the BODY section, search for `element.isSketchElement`. If it doesn't exist, ```javascript <% } else if (element.isSketchElement) { %>
-

<% value && value.items.forEach((item, index) => { %> From 4b22f0559109ab4a1eb42dedb9485725b643470b Mon Sep 17 00:00:00 2001 From: Gabriel Villalobos Date: Thu, 5 Mar 2026 16:33:20 -0600 Subject: [PATCH 3/6] Docs: Downgrade headings to H2 in sketches example per PR feedback --- docs/REPORT BUILDER/reports-examples/sketches.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/REPORT BUILDER/reports-examples/sketches.md b/docs/REPORT BUILDER/reports-examples/sketches.md index eb65251d..cebce1bc 100644 --- a/docs/REPORT BUILDER/reports-examples/sketches.md +++ b/docs/REPORT BUILDER/reports-examples/sketches.md @@ -11,7 +11,7 @@ next: description: "" --- -# Display Sketches in Reports +## Display Sketches in Reports In the BODY section, search for `element.isSketchElement`. If it doesn't exist, you can add it to your `RENDERVALUES` loop. @@ -30,7 +30,7 @@ In the BODY section, search for `element.isSketchElement`. If it doesn't exist, <% } %> ``` -# Resize Sketches +## Resize Sketches You can control the size of sketches in the STYLES section by targeting the `.sketch` class. @@ -41,7 +41,7 @@ You can control the size of sketches in the STYLES section by targeting the `.sk } ``` -# Accessing a specific sketch by its field name +## Accessing a specific sketch by its field name If you want to display the first sketch from a specific field: From 1e4cc11bcba5ac6ffce7f199ce6d6684ab684553 Mon Sep 17 00:00:00 2001 From: Gabriel Villalobos Date: Fri, 6 Mar 2026 14:32:55 -0600 Subject: [PATCH 4/6] Docs: Clarify sketch ID usage in example per PR feedback --- docs/REPORT BUILDER/reports-examples/sketches.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/REPORT BUILDER/reports-examples/sketches.md b/docs/REPORT BUILDER/reports-examples/sketches.md index cebce1bc..c767d6cb 100644 --- a/docs/REPORT BUILDER/reports-examples/sketches.md +++ b/docs/REPORT BUILDER/reports-examples/sketches.md @@ -48,8 +48,8 @@ If you want to display the first sketch from a specific field: ```javascript
<% - var sketchField = record.formValues.find('my_sketch_field'); - var sketchId = sketchField && sketchField.items[0] && sketchField.items[0].mediaID; + // Using the data name of your sketch field + var sketchId = $my_sketch_field && $my_sketch_field[0] && $my_sketch_field[0].sketch_id; %> <% if (sketchId) { %>
From d098c61e46fb39d7ceba06a7d38b36edb5c77c01 Mon Sep 17 00:00:00 2001 From: Gabriel Villalobos Date: Mon, 9 Mar 2026 08:41:01 -0600 Subject: [PATCH 5/6] FLCRM-20058: Enhanced documentation for including sketches in reports - Added comprehensive documentation for SKETCHURL function parameters and options - Documented sketch data structure (mediaID, caption, isEmpty properties) - Added examples for accessing sketch data and handling empty fields - Included practical examples for common use cases: - Display only first sketch - Access specific sketch by field name - Add metadata (creation dates) to sketches - Hide labels when field is empty - Number sketches automatically - Grid layout for multiple sketches - Page break handling - Improved metadata with better title, description, and robots index - Added code examples for querying sketch metadata from database - Included CSS examples for responsive layouts and styling --- .../reports-examples/sketches.md | 252 +++++++++++++++++- 1 file changed, 245 insertions(+), 7 deletions(-) diff --git a/docs/REPORT BUILDER/reports-examples/sketches.md b/docs/REPORT BUILDER/reports-examples/sketches.md index c767d6cb..09e8aad3 100644 --- a/docs/REPORT BUILDER/reports-examples/sketches.md +++ b/docs/REPORT BUILDER/reports-examples/sketches.md @@ -1,12 +1,12 @@ --- title: Sketches -excerpt: "" +excerpt: "Learn how to include sketches in custom reports" deprecated: false hidden: false metadata: - title: "" - description: "" - robots: noindex + title: "Include Sketches in Reports" + description: "Complete guide to including sketches in Fulcrum custom reports with examples" + robots: index next: description: "" --- @@ -30,6 +30,54 @@ In the BODY section, search for `element.isSketchElement`. If it doesn't exist, <% } %> ``` +## Understanding Sketch Data Structure + +Sketch fields contain an array of items. Each item has the following properties: + +- `mediaID` - The unique identifier for the sketch (also called `sketch_id`) +- `caption` - Optional text caption for the sketch +- `isEmpty` - Boolean indicating if the field has any sketches + +### Accessing Sketch Data + +```javascript +// Check if sketch field has values +<% if ($my_sketch_field && !$my_sketch_field.isEmpty) { %> + <% $my_sketch_field.items.forEach((item, index) => { %> + + <% }); %> +<% } %> + +// Access specific sketch properties +<% var firstSketch = $my_sketch_field && $my_sketch_field[0]; %> +<% var sketchId = firstSketch && firstSketch.sketch_id; %> +<% var caption = firstSketch && firstSketch.caption; %> +``` + +## SKETCHURL Function + +The `SKETCHURL()` function generates a public URL for a sketch. It accepts two parameters: + +### Parameters + +- `id` (String, required) - The sketch ID +- `options` (Object, optional) - Configuration options + - `version` - Image version: `'large'` (default), `'original'`, `'thumbnail'` + - `expires` - Expiration timestamp (default: `null`) + +### Examples + +```javascript +// Default large version + + +// Original full resolution + + +// Thumbnail version + +``` + ## Resize Sketches You can control the size of sketches in the STYLES section by targeting the `.sketch` class. @@ -39,17 +87,53 @@ You can control the size of sketches in the STYLES section by targeting the `.sk max-width: 100%; height: auto; } + +/* Fixed width */ +.sketch { + width: 500px; + height: auto; +} + +/* Multiple sketches in a row */ +.sketch { + max-width: 48%; + height: auto; + display: inline-block; + margin: 1%; +} +``` + +## Display Only First Sketch + +If you have multiple sketches attached to a field and want to display only the first one: + +```javascript +<% } else if (element.isSketchElement) { %> +
+

<%= element.label %>

+
+ <% if (value && value.items.length > 0) { %> + <% let sketchItem = value.items[0]; %> + + <% if (sketchItem.caption) { %> +

<%= sketchItem.caption %>

+ <% } %> + <% } %> +
+
+<% } %> ``` -## Accessing a specific sketch by its field name +## Accessing a Specific Sketch by Field Name -If you want to display the first sketch from a specific field: +If you want to display sketches from a specific field outside the `RENDERVALUES` loop: ```javascript
<% // Using the data name of your sketch field - var sketchId = $my_sketch_field && $my_sketch_field[0] && $my_sketch_field[0].sketch_id; + var sketchField = $my_sketch_field; + var sketchId = sketchField && sketchField[0] && sketchField[0].sketch_id; %> <% if (sketchId) { %>
@@ -57,4 +141,158 @@ If you want to display the first sketch from a specific field:
<% } %>
+ + +
+

Site Sketches

+ <% if ($site_sketch && $site_sketch.items) { %> + <% $site_sketch.items.forEach((item, index) => { %> +
+ Sketch <%= index + 1 %> + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> +
+ <% }); %> + <% } %> +
+``` + +## Add Metadata to Sketches + +You can query the database to add metadata like creation date to each sketch: + +```javascript +<% } else if (element.isSketchElement) { %> +
+

<%= element.label %>

+
+ <% value && value.items.forEach((item, index) => { %> + <% + // Query sketch metadata + var sketchQuery = QUERY("SELECT created_at, updated_at FROM sketches WHERE sketch_id = '" + item.mediaID + "'"); + var sketchDate = sketchQuery.rows[0] && sketchQuery.rows[0].created_at.slice(0, 10); + %> +
+ + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> + <% if (sketchDate) { %> +

Created: <%= sketchDate %>

+ <% } %> +
+ <% }); %> +
+
+<% } %> +``` + +## Hide Sketch Label When Empty + +Only display the sketch field label when there are sketches attached: + +```javascript +<% } else if (element.isSketchElement) { %> + <% if (value && !value.isEmpty && value.items.length > 0) { %> +
+

<%= element.label %>

+
+ <% value.items.forEach((item, index) => { %> + + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> + <% }); %> +
+
+ <% } %> +<% } %> +``` + +## Page Break Handling + +To prevent sketches from breaking across pages: + +```javascript +<% } else if (element.isSketchElement) { %> +
+

<%= element.label %>

+
+ <% value && value.items.forEach((item, index) => { %> + + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> <% }); %> +
+
+<% } %> +``` + +## Numbering Sketches + +Add numbers to sketches automatically: + +```javascript +<% } else if (element.isSketchElement) { %> +
+

<%= element.label %>

+
+ <% value && value.items.forEach((item, index) => { %> +
+

Sketch <%= index + 1 %>

+ + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> +
+ <% }); %> +
+
+<% } %> +``` + +## Grid Layout for Multiple Sketches + +Display sketches in a responsive grid: + +```css +/* Add to STYLES section */ +.sketch-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin: 20px 0; +} + +.sketch-grid-item { + text-align: center; +} + +.sketch-grid-item img { + width: 100%; + height: auto; + border: 1px solid #ddd; + border-radius: 4px; + padding: 5px; +} +``` + +```javascript +/* Add to BODY section */ +<% } else if (element.isSketchElement) { %> +
+

<%= element.label %>

+
+ <% value && value.items.forEach((item, index) => { %> +
+ + <% if (item.caption) { %> +

<%= item.caption %>

+ <% } %> +
+ <% }); %> +
+
+<% } %> ``` From f51265848bcb3400bf3ff1599d1a46aabf0892ce Mon Sep 17 00:00:00 2001 From: Gabriel Villalobos Date: Mon, 9 Mar 2026 12:14:18 -0600 Subject: [PATCH 6/6] FLCRM-20058: address PR #35 review feedback - Restore missing code fence in RENDERVALUES example - Remove trailing comma from RENDER params for wider JS compatibility - Replace curly quotes in STATICMAP examples with straight quotes - Standardize sketch examples to use mediaID - Remove sketch caption examples not currently supported - Switch EJS snippets in sketches docs to html fenced blocks --- .../reports-examples/sketches.md | 79 ++++++------------- .../reports-introduction/functions.md | 15 ++-- 2 files changed, 33 insertions(+), 61 deletions(-) diff --git a/docs/REPORT BUILDER/reports-examples/sketches.md b/docs/REPORT BUILDER/reports-examples/sketches.md index 09e8aad3..fc338054 100644 --- a/docs/REPORT BUILDER/reports-examples/sketches.md +++ b/docs/REPORT BUILDER/reports-examples/sketches.md @@ -15,16 +15,14 @@ next: In the BODY section, search for `element.isSketchElement`. If it doesn't exist, you can add it to your `RENDERVALUES` loop. -```javascript +```html <% } else if (element.isSketchElement) { %>
-

<%= element.label %>

+

<%= element.label %>

<% value && value.items.forEach((item, index) => { %> - <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> <% }); %> + <% }); %>
<% } %> @@ -34,13 +32,12 @@ In the BODY section, search for `element.isSketchElement`. If it doesn't exist, Sketch fields contain an array of items. Each item has the following properties: -- `mediaID` - The unique identifier for the sketch (also called `sketch_id`) -- `caption` - Optional text caption for the sketch +- `mediaID` - The unique identifier for the sketch - `isEmpty` - Boolean indicating if the field has any sketches ### Accessing Sketch Data -```javascript +```html // Check if sketch field has values <% if ($my_sketch_field && !$my_sketch_field.isEmpty) { %> <% $my_sketch_field.items.forEach((item, index) => { %> @@ -50,8 +47,7 @@ Sketch fields contain an array of items. Each item has the following properties: // Access specific sketch properties <% var firstSketch = $my_sketch_field && $my_sketch_field[0]; %> -<% var sketchId = firstSketch && firstSketch.sketch_id; %> -<% var caption = firstSketch && firstSketch.caption; %> +<% var sketchId = firstSketch && firstSketch.mediaID; %> ``` ## SKETCHURL Function @@ -62,20 +58,17 @@ The `SKETCHURL()` function generates a public URL for a sketch. It accepts two p - `id` (String, required) - The sketch ID - `options` (Object, optional) - Configuration options - - `version` - Image version: `'large'` (default), `'original'`, `'thumbnail'` + - `version` - Image version: `'large'` (default), `'original'` - `expires` - Expiration timestamp (default: `null`) ### Examples -```javascript +```html // Default large version // Original full resolution - -// Thumbnail version - ``` ## Resize Sketches @@ -107,17 +100,14 @@ You can control the size of sketches in the STYLES section by targeting the `.sk If you have multiple sketches attached to a field and want to display only the first one: -```javascript +```html <% } else if (element.isSketchElement) { %>
-

<%= element.label %>

+

<%= element.label %>

<% if (value && value.items.length > 0) { %> <% let sketchItem = value.items[0]; %> - <% if (sketchItem.caption) { %> -

<%= sketchItem.caption %>

- <% } %> <% } %>
@@ -128,16 +118,16 @@ If you have multiple sketches attached to a field and want to display only the f If you want to display sketches from a specific field outside the `RENDERVALUES` loop: -```javascript +```html
<% // Using the data name of your sketch field var sketchField = $my_sketch_field; - var sketchId = sketchField && sketchField[0] && sketchField[0].sketch_id; + var sketchId = sketchField && sketchField[0] && sketchField[0].mediaID; %> <% if (sketchId) { %> -
- +
+
<% } %>
@@ -148,10 +138,7 @@ If you want to display sketches from a specific field outside the `RENDERVALUES` <% if ($site_sketch && $site_sketch.items) { %> <% $site_sketch.items.forEach((item, index) => { %>
- Sketch <%= index + 1 %> - <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> + Sketch <%= index + 1 %>
<% }); %> <% } %> @@ -162,10 +149,10 @@ If you want to display sketches from a specific field outside the `RENDERVALUES` You can query the database to add metadata like creation date to each sketch: -```javascript +```html <% } else if (element.isSketchElement) { %>
-

<%= element.label %>

+

<%= element.label %>

<% value && value.items.forEach((item, index) => { %> <% @@ -175,9 +162,6 @@ You can query the database to add metadata like creation date to each sketch: %>
- <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> <% if (sketchDate) { %>

Created: <%= sketchDate %>

<% } %> @@ -192,17 +176,14 @@ You can query the database to add metadata like creation date to each sketch: Only display the sketch field label when there are sketches attached: -```javascript +```html <% } else if (element.isSketchElement) { %> <% if (value && !value.isEmpty && value.items.length > 0) { %>
-

<%= element.label %>

+

<%= element.label %>

<% value.items.forEach((item, index) => { %> - <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> <% }); %>
@@ -214,16 +195,14 @@ Only display the sketch field label when there are sketches attached: To prevent sketches from breaking across pages: -```javascript +```html <% } else if (element.isSketchElement) { %>
-

<%= element.label %>

+

<%= element.label %>

<% value && value.items.forEach((item, index) => { %> - <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> <% }); %> + <% }); %>
<% } %> @@ -233,18 +212,15 @@ To prevent sketches from breaking across pages: Add numbers to sketches automatically: -```javascript +```html <% } else if (element.isSketchElement) { %>
-

<%= element.label %>

+

<%= element.label %>

<% value && value.items.forEach((item, index) => { %>

Sketch <%= index + 1 %>

- <% if (item.caption) { %> -

<%= item.caption %>

- <% } %>
<% }); %>
@@ -278,18 +254,15 @@ Display sketches in a responsive grid: } ``` -```javascript +```html /* Add to BODY section */ <% } else if (element.isSketchElement) { %>
-

<%= element.label %>

+

<%= element.label %>

<% value && value.items.forEach((item, index) => { %>
- <% if (item.caption) { %> -

<%= item.caption %>

- <% } %>
<% }); %>
diff --git a/docs/REPORT BUILDER/reports-introduction/functions.md b/docs/REPORT BUILDER/reports-introduction/functions.md index 9dc4a587..531e5b84 100644 --- a/docs/REPORT BUILDER/reports-introduction/functions.md +++ b/docs/REPORT BUILDER/reports-introduction/functions.md @@ -271,7 +271,7 @@ const RENDER = ( feature, options, eachFunction, - { container, parent, index, allValues } = {}, + { container, parent, index, allValues } = {} ) => { if (!container) { container = feature.formValues.container; @@ -373,6 +373,7 @@ JSON - the feature `elements` and `values` ### Examples +```html <% RENDERVALUES(record, null, function(element, value) { %> <% if (element.isSectionElement) { %> @@ -400,9 +401,7 @@ JSON - the feature `elements` and `values`
<% value && value.items.forEach((item, index) => { %> - <% if (item.caption) { %> -

<%= item.caption %>

- <% } %> <% }); %> + <% }); %>
<% } else if (element.isSignatureElement) { %> @@ -480,7 +479,7 @@ String ### Examples ```js -SKETCHURL($my_sketch_field[0].sketch_id, { version: "large" }); +SKETCHURL($my_sketch_field[0].mediaID, { version: "large" }); ``` --- @@ -495,7 +494,7 @@ Generate a Google or Esri Static Map based on the value of the report template To change the map engine in the STATICMAP function directly, update the options passed into the parameters of the STATICMAP function: -`<%= STATICMAP({mapEngine: ‘esri’, markers, ...SET_MAP_OPTIONS()}) %>` +`<%= STATICMAP({mapEngine: 'esri', markers, ...SET_MAP_OPTIONS()}) %>` ### Returns @@ -504,11 +503,11 @@ String ### Examples ```js Google -STATICMAP({mapEngine: ‘google’,markers: '34.052230,-118.243680', maptype: 'hybrid', size: '300x300'}) +STATICMAP({mapEngine: 'google',markers: '34.052230,-118.243680', maptype: 'hybrid', size: '300x300'}) ``` ```js Esri - + ``` ```html