Skip to content

Docs: Document how to include Sketches in Reports (FLCRM-20058) #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nehilor wants to merge 4 commits into
base: v2
Choose a base branch
from
Open

Docs: Document how to include Sketches in Reports (FLCRM-20058) #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d0a89b
Docs: Add SKETCHURL and sketches examples to Report Builder
nehilor Mar 5, 2026
a95075b
Docs: Fix typo in sketches example
nehilor Mar 5, 2026
4b22f05
Docs: Downgrade headings to H2 in sketches example per PR feedback
nehilor Mar 5, 2026
1e4cc11
Docs: Clarify sketch ID usage in example per PR feedback
nehilor Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/REPORT BUILDER/reports-examples/_order.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- repeatable-field-child-records
- resize
- signature
- sketches
- section
- modifying-the-widthheight-of-the-table
- timezone
Expand Down
60 changes: 60 additions & 0 deletions docs/REPORT BUILDER/reports-examples/sketches.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) { %>
<div class="field">
<h2 class='field-label'><%= element.label %></h2>
<div class="field-value">
<% value && value.items.forEach((item, index) => { %>
<img class="sketch" src="<%= SKETCHURL(item.mediaID) %>" />
<% if (item.caption) { %>
<p><%= item.caption %></p>
<% } %> <% }); %>
</div>
</div>
<% } %>
```

## 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
<div>
<%
// 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) { %>
<div class='sketch-column'>
<img class="sketch" src='<%= SKETCHURL(sketchId) %>' />
</div>
<% } %>
</div>
```
Loading