Add an app logo to the report

On the app design page, there is a section under SETTINGS where you can upload an app image.


Add a company logo to the report

Upload a company/organization logo in the Organization Profile Settings.


Attachment File

List Attachment File(s) Name

As you've noticed, the attachment field value displays the number of attachment files instead of the file name. This example will show you how to display the file(s) name. First, go to the BODY section and scroll all the way down to the last <% } else { %> line. Just before this line of code, you are going to copy and paste the following block of code:

<% } else if (element.label == 'Attachment File Field') { %>
      <div class='field'>
        <h2 class='field-label'><%= element.label %></h2>
        <% 
        let num_of_attachments = $attachment_file_field.length; 
        let attachment_names = [];
        for(let i=0; i<num_of_attachments; i++) {
          attachment_names.push($attachment_file_field[i].name);
        }
        %>
        <div class='field-value pre'><%= attachment_names.join("\n") %></div>
      </div>

Three things you will need to edit from this code is
[1] 'Attachment File Field' on line 309 to your attachment file field's label
[2 & 3] $attachment_field_field on line 313 and 316 to your attachment file field's data name


Change font color if the value includes "Fail"

Scroll all the way down to the last <% } else { %> block of code in the BODY section. Add the following lines of code just before the last else. You can replace "Fail" on line 309 with any other word, and you can also change the color of font on line 312.

<% } else if (formatter(element, value, {defaultFormatter, container, index, feature, parent, allValues}).includes("Fail")) { %>
      <div class='field'>
        <h2 class='field-label'><%= element.label %></h2>
        <div class='field-value pre' style='color:red'><%= formatter(element, value, {defaultFormatter, container, index, feature, parent, allValues}) %></div>
      </div>

Cover Page

Edit cover page [photo / map / metadata]

There are many cover page features you can enable/disable under the SCRIPT section by setting the feature to true or false. You can also change the cover page map type to roadmap, terrain, or satellite.

If you wish to change the size of the cover page map, you can edit the height of .meta-map img class under STYLES section.

Show repeatable records on map

Suppose you want to show repeatable records on the cover page map with different styling as the example below. The red pin represents the parent record and the two black pins represent child records with location data. Please note that the color of the pin (HEX Color: https://www.color-hex.com/) can be customized whereas numeric symbol cannot be (single alpha-numeric character allowed):

In the BODY section, scroll down to the line where it shows const markers. A couple lines below the markers definition, you will see for (const item of items) {. This is where we are going to add customization.

Add var count=1; just before for (const item of items) { and change the color and label as shown below. Also, before the closing }, add count++;.


Format Date

Format date to dd/mm/yyyy for the cover page metadata

Add the following code to the end of SCRIPT section:

function euroDate(date){
  let d = new Date(date);
  return d.toGMTString();
} 

Then replace all FORMATDATE (there are four of them) in the BODY section with this new function, euroDate:

Format date to dd/mm/yyyy for the date field

Add the following code to the end of SCRIPT section:

function formatDate(date) {
  let newDate = new Date(JSON.stringify(date));
  let newFormat = LPAD(newDate.getDate(), 2, '0') + '-' + LPAD(newDate.getMonth()+1, 2, '0') + '-' + newDate.getFullYear();
  return newFormat;
}

Then add the following code just before the very last <% } else { %> in the BODY section:

<% } else if (element.type == "DateTimeField") { %>
      <div class='field'>
          <h2 class='field-label'><%= element.label %></h2>
          <div class='field-value pre'><%= formatDate(value) %></div>
      </div>

Footer

Using a Rectangular Organization Logo

You will need a public URL for your Organization Logo to do this

If your Organization's Logo is a rectangular shape, this example will help you show the entire image on the bottom-left of the report. First, change the Bottom MARGINS to 0.75 from 0.5. Then, go to the FOOTER section, remove line 35. You will add a new image source using the public URL of the image

<img src="<%= IMAGEURL("photo_url") %>" />

Hide fields

Hide certain fields

Add data names to the ‘hidden_fields’ under the SCRIPT section.

Hide fields without a value

You may have noticed that when parent-level fields have no input value, the report skips those fields. However, this does not apply to child-level fields (nested in a section or a repeatable field). To apply this to those child-level fields, change the else to else if (value != null) at the end of the BODY section.

Hide Header / Footer

You can remove header and footer from the report by setting those attributes to false in the SCRIPT section.


Highlight fields

Highlight all Section labels

In the BODY section, add style="background-color: #FFFF00" under if (element.isSectionElement) block of code shown below. If you are familiar with CSS & HTML, you may create a .highlight class in the STYLES section with the background color of #FFFF00 and add it to the corresponding class.

Highlight a certain field

Replace the last else function in the BODY section with the following code except you use your report’s field label instead of 'FIELD_LABEL':

<div class='field'>
<% if (element.label == 'FIELD_LABEL') { %>
    <h2 class='field-label' style="background-color: #FFFF00"><%= element.label %></h2>
    <div class='field-value pre' style="background-color: #FFFF00"><%= formatter(element, value, {defaultFormatter, container, index, feature, parent, allValues}) %></div>
<% } else { %>
    <h2 class='field-label'><%= element.label %></h2>
    <div class='field-value pre'><%= formatter(element, value, {defaultFormatter, container, index, feature, parent, allValues}) %></div>
<% } %>
</div>

Highlight with a condition

Here is an example with a field label Size. Suppose you want to highlight the field only when Size equals Small. In this case, your if (element.label == 'Size') statement needs an additional condition:

if (element.label == 'Size' && record.formValues.find('size').displayValue == 'Small')

Displaying Hyperlink Field's default URL

You will notice that the hyperlink field's default URL does not display on PDF report. In order to display the URL, you need to change the data event rather than the report builder. Please go to the following developer doc for more information.

https://docs.fulcrumapp.com/docs/data-events-examples#how-to-show-hyperlink-fields-default-url


Label

How to make all label fields full width

You first need to go the SCRIPT section and add isLabel() function:

function isLabel(field) {
  return CONTAINS(DATANAMES('Label'), field);
}

Then, you will need to use this function in the BODY section just before the last <% } else { %>:

<% } else if (isLabel(element.dataName)) { %>
      <div class='field'>
        <b><%= element.label %></b>
      </div>

Modifying the width/height of the table

Under the STYLES section, you can edit the width of .field-label and html .field-value classes. Make sure the width percentages of the classes add up to 100%. You can also add a height property to these classes.


Remove Fulcrum logo/watermark

In the FOOTER section, you can remove the lines 65 to 67 in order to remove the Fulcrum logo watermark.


Photos

Add a date stamp on each photo as photo caption

REMEMBER: This will overwrite any photo caption entered!!!

In the BODY section, search for element.isPhotoElement. In this block of code, you will add the following two lines after <% value.items.forEach((item, index) => { %>

<% var dateQuery = QUERY("SELECT created_at FROM photos WHERE photo_id = '"+item.mediaID+"'") %>
<% var photoDate = dateQuery.rows[0].created_at.slice(0, 10) %>

Remove the following two lines after <figure>:
<% if (item.caption) { %>
<% } %>

then replace item.caption with photoDate.

Add latitude & longitude on each photo

REMEMBER: This will overwrite any photo caption entered!!! Also, if the photo does not have location matadata, it will show null.

In the BODY section, search for element.isPhotoElement. In this block of code, you will add the following two lines after <% value.items.forEach((item, index) => { %>

<% var locQuery = QUERY("SELECT latitude, longitude FROM photos WHERE photo_id = '"+item.mediaID+"'") %>
<% var latlong = JSON.parse(locQuery.rows[0].latitude)+","+JSON.parse(locQuery.rows[0].longitude) %>

Remove the following two lines after <figure>:
<% if (item.caption) { %>
<% } %>

then replace item.caption with latlong.

Align and center each photo

In the STYLES section, search for .photo-column figure class. Then remove display: inline and replace it with display: flex; justify-content: center; as shown below:

Display only the first photo attached to each photo field

Suppose you have multiple photos attached to each photo field and you want to display only the first photo on PDF report. In the BODY section, scroll down to element.isPhotoElement and remove line 264 and 274 (it loops through all photos attached). Then add <% let photoItem = value.items[0] %> to get the first photo and replace item to photoItem on line 268-270.

Modify Photo Sizes

Photo size can be modified in STYLES section under .photo-column figure img. By default, Fulcrum generates 2 portrait photos in each row. If you would like to modify the size so it can fit 3 portrait photos, you can change max-width: 49%; property to max-width: 33%. You can fit 4 portrait photos by changing max-width to 25%. If you would like to modify the size of landscape photos, you can also do so under .photo-column figure img.photo-landscape.

Remove a margin space before and/or after the photo field

Sometimes the report will generate empty spaces after attaching photos or the photos will cover other section of the report. In order to prevent this, go to the BODY section and add page-break-inside: auto; to the style="flex-direction: column;" and add style="height: 100%;" to the <div class='field-label-full'> in element.isPhotoElement block:

Remove Photo Label when there is no photo attached

In the BODY section, search for element.isPhotoElement block of code. Remove the entire block of code under element.isPhotoElement and paste the following code:

<% if (value && !value.isEmpty) { %>
  <div class='field' style="flex-direction: column;">
    <h2 class='field-label'><%= element.label %></h2>
    <div class='field-label-full'>
        <div class='photo-row'>
          <% value.items.forEach((item, index) => { %>
            <div class='photo-column'>
              <figure>
                <img class="<%= IMAGE_SIZE() %>" src='<%= PHOTOURL(item.mediaID) %>' />
                <% if (item.caption) { %>
                  <figcaption><%= item.caption %></figcaption>
                <% } %>
              </figure>
            </div>
          <% }); %>
        </div>
    </div>
  </div>
<% } %>

Repeatable Field (Child Records)

Add a page break before every repeatable record

In BODY section, you can scroll down to line 246 or search (ctrl+f or command+f) for repeatable_break. Two lines below repeatable_break, you will find <div class='field-repeatable-item'>. Since you want to add a page break before every repeatable record, you will add page-break-before to the same class.

Add additional info for all repeatable record

Suppose you need to add an additional info to all repeatable records. To do this, you need to go to the BODY section and search for index+1. Add the following line of code (you may modify your message) below the line you found.

<b style='font-size:20px'>Your message goes here!</b>

Include only the most recent repeatable record

This may be a little less obvious to find the right part in the BODY section, but we are going to change how repeatable items get rendered on the report. You want to scroll down to the line 245 to find <% renderRepeatableItems(({element, value, renderItem, container, index, feature, parent, allValues}) => { %>. If you found it, you will also see the following codes a few lines below:

<h2><%= `${element.label} - ${index+1}. ${value.displayValue}` %></h2>
<% renderItem() %>

Once you located those two lines of code, you are going to wrap them with the following code:

<% if (record.formValues.find('inspection').length == index+1) { %>

// 2 LINES OF CODE GOES HERE

<% } %

MAKE SURE YOU USE THE REPEATABLE SECTION'S DATA NAME INSTEAD OF inspection!


Signature

Resize Signature field

Go to STYLES section and search for .field-value .signature. Change the max-height attribute to your need.


Section Field

Add a page break for all sections

Scroll down in the BODY section to locate element.isSectionElement block of code. In the first <div class='field-section'>, add page-break-before to the class.

Remove an entire section field

Scroll down in the BODY section to locate the if (element.isSectionElement) block of code. Now we are going to wrap the given 6 lines of code with the following code:

<% if(element.label == 'Section Label') { 
  return;
} else { %>

// 6 LINES OF CODE GOES HERE

<% } %>

MAKE SURE YOU USE THE SECTION LABEL NAME INSTEAD OF Section Label!

Remove a section field when its all nested fields values are null

Under if (element.isSectionElement) in the BODY section, you are going to replace the entire block of code with the following:

<% 
  var fields = FIELDNAMES(element.dataName)
  var values = fields.map(x => VALUE(x) || REPEATABLEVALUES(VALUE(element.parent.dataName), x))
  var nonNullValues = values.filter(x => x != null)
%>

<% if (nonNullValues.length > 0) { %>
  <div class='field-section'>
    <h1 class='field-section-title'><%= element.label %></h1>
    <div class='field-section-content'>
      <% renderSection() %>
    </div>
  </div>
<% } %>

Resize

Photo Caption

Under STYLES section, add font-size attribute to the .cover-photo-container figcaption, .photo-column figcaption block:

Signature

Under STYLES, edit max-height in the .field-value .signature block:


Did this page help you?