Skip to content

sc-thumbnail

This document is a user guide for the Formbird "sc-thumbnail" component release version 7.6.1.

go-to-typical-definition

sc-thumbnail-field-Example-1-Image-1

 

1 Purpose

The "sc-thumbnail" component places a thumbnail field on a form such that:

  • It provides the ability to locate documents and display them as thumbnails on a form.
  • Each thumbnail reflects the content of the document it represents, making it easier for the user to quickly navigate to the required document.
  • It includes a "Display Width" slider field allowing the user to increase/decrease the thumbnail size.
  • Clicking the thumbnail will open the document it represents in a modal pop-up. For pdf documents, the modal pop-up displays the first page of a pdf document and provide the ability to navigate page by page through its other pages (if any). For image documents, the modal pop-up displays the image.

The "sc-thumbnail" component definition provides fields for setting the properties of a "sc-thumbnail" field on the form and is fully described below.

 

2 Definition

The "sc-thumbnail" component is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-thumbnail The component name.

Example:
"componentName": "sc-thumbnail"

2.2 Required Customizable Fields

Field Valid Values Description
documentLocations Array of document location definitions An array of one or more document location definitions, each definition being a set of name/value pair fields that define the location of a document to be displayed as a thumbnail on the form.
See Section 2.2.1 documentLocations field for detailed description of the name/value pair fields used to define the"documentLocation" field.

Example:
"documentLocations": [
{
"fieldName": "typicalDefnScUploader",
"fieldType": "fileReference",
"itemType": [
"image",
"pdf"
],
"title": "DocId : {{result.documentId}}"
}
]
name Any value written in camel case. The name of the "sc-thumbnail" field in the document and database.

Example:
"name": "typicalDefnScThumbnailWithFilter"

2.2.1 documentLocations field

The "documentLocations" field described together with an example in Section 2.2 Required Customizable Fields is an array of one or more document location definitions, each definition being a set of name/value pair fields that define the location of a document to be displayed as a thumbnail on the form.

This section lists and describes the fields for defining the location of a document.

2.2.1.1 Required Customizable Fields

Field Valid Values Description
fieldName A field name The name of the field to use in the current document or in a result document returned by the optional filter field (see Section 2.3 OptionalCustomizable Fields).
To specify a field in the current document, prefix its field name with "document.".
To specify a field in a result document returned by the optional filter field query, prefix its field name with "result.".
Although not recommended, if the fieldName value is not prefixed, then the default prefix is "result."

Examples:
"fieldName": "document.fileAttach"
"fieldName": "result.fileAttach"
fieldType The type of field so that data can be interpreted.
docId The "documentId" of a document in the Formbird database.

Example:
"fieldType": docId
fileReference Indicates documents created by the "sc-uploader" component.

Example:
"fieldType": "fileReference"
url A url that can be used to access the item.

Example:
"fieldType": url
itemType An array of one or more item types to display, thus providing the ability to filter the items to display by item type.

Examples:
"itemType": ["image"]
"itemType": ["image","pdf"]
image Documents with an image file format e.g. png, jpg/jpeg, gif

Example:
"itemType": ["image"]
pdf Documents with a pdf file format.

Example:
"itemType": ["pdf"]
Defaults to no items, hence no thumbnails, are displayed.

2.2.1.2 Optional Customizable Fields

Field Valid Values Description
title handlebars expression A handlebars expression used to set the title for each thumbnail.

Examples:
"title": "{{{result.responseAttach.fileName}}}"
"title": "DocId : {{result.documentId}}"
updateWatchFields Array of field names in the current document Specifies one or more fields in the current document to watch and to rerun the filter field query when any of these fields change.
If the optional filter field has not been defined then items defined by the documentlocations field will refresh, generating new thumbnails and thumbnail titles.

Example:
"updateWatchFields": [
"document.status"
]

Example:
"updateWatchFields": [
"document.firstName",
"document.lastName"
]
Defaults to no fields in the current document are being watched for a change in value.

2.3 Optional Customizable Fields

Field Valid Values Description
enabled true The "sc-thumbnail" field is greyed out.
The "Disabled" icon Icon-Disabled displays on mouseover of the "sc-thumbnail" field.
The "Display Width" slider field cannot be used to increase/decrease the thumbnail size.
Clicking the "sc-thumbnail"field will not open the file it represents.

Example:
"enabled": false
false The "sc-thumbnail" field on the form is not greyed out.
A "Disabled" icon does not appear on mouseover of the "sc-thumbnail" field.
The "Display Width" slider field can be used to increase/ decrease the thumbnail size.
Clicking the "sc-thumbnail"field will open the file it represents.
filter elastic search query An elasticsearch query to locate the documents to display as thumbnails on the current document.

Example:
"filter": "{'query':{'bool':{'should':[{'term':{'systemHeader.templateId':'81633d5e-3e3e-450d-b702-a2edf5b7c076'}}]}}}"
Defaults to no elasticsearch query search is performed.
fullWidth true The "sc-thumbnail" field displays full width and right justified of the form.

Example:
"fullWidth": true

Note:
"fullWidth": true is recommended when displaying a "sc-thumbnail" field on a form.
false Default value.
The "sc-thumbnail" field does not display full width on the form.
initialImageSize Integer value between 3 and 12 Sets the initial position of the "Display Width" slider field.
An integer value less than or equal to 3 sets the slider to its leftmost position (i.e. the smallest thumbnail size).
An integer value greater than or equal to 12 sets the slider to its rightmost position (i.e. the largest thumbnail size).

Example:
"initialImageSize": 3
8 Default value.
openIn newWindow Default value.
The sc-url web address opens in a new browser window or tab (the browser determines whether its new tab or window).
Example: "openIn": "newWindow"
currentWindow The sc-url web address opens in the current browser window or tab (the browser determines whether its new tab or window).
Example:
"openIn": "currentWindow"
label Any value Defines the name of the "sc-thumbnail" field on the form i.e. the field label.
Example:
"label": "Typical Defn sc-thumbnail"
Defaults to the "sc-thumbnail" field displays without a field label on the form.
showDownloadButton false Default value.
Hides the download button in the pdf display overlay window.
true Shows the download button in the pdf display overlay window
Example:
"showDownloadButton": true
showOpenButton false Hides the open button in the pdf display overlay window.
Example:
"showOpenButton": false
true Default value.
Displays the open button in the pdf overlay window
showPrintButton false Default value.
Hides the print button in the pdf display overlay window.
true Displays the print button in the pdf overlay window
Example:
"showPrintButton": true
showPrintAllButton false Default value.
Shows the print all button for the component.
True Hides the print all button for the component. Clicking this button will open each document in a new tab with the print configuration visible.
Example:
"showPrintAllButton": true
readOnly true Displays the component in read only mode
Example:
"readOnly": true
false Default value
visible false The "sc-thumbnai"l field is not visible on the form.

Example:
"visible": false
true Default value.
The "sc-thumbnail" field is visible on the form.

 

3 Typical Definition

Below is a typical "sc-thumbnail" definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-thumbnail",
            "name": "typicalDefnScThumbnailWithFilter",
            "fullWidth": true,
            "initialImageSize": 3,
            "filter": "{'query':{'bool':{'should':[{'term':{'systemHeader.templateId':'81633d5e-3e3e-450d-b702-a2edf5b7c076'}}]}}}",
            "documentLocations": [
                {
                    "fieldName": "typicalDefnScUploader",
                    "fieldType": "fileReference",
                    "itemType": [
                        "image",
                        "pdf"
                    ],
                    "title": "DocId : {{result.documentId}}"
                }
            ],
            "label": "Typical Defn sc-thumbnail with Filter"
        }

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

        "enabled":false,
        "fullWidth":false,
        "updateWatchFields": [
            "document.firstName",
            "document.lastName"
        ],
        "visible": false,

 

4 Examples

Example 1

The typical "sc-thumbnails" definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-thumbnail",
            "name": "typicalDefnScThumbnailWithFilter",
            "fullWidth": true,
            "initialImageSize": 3,
            "filter": "{'query':{'bool':{'should':[{'term':{'systemHeader.templateId':'81633d5e-3e3e-450d-b702-a2edf5b7c076'}}]}}}",
            "documentLocations": [
                {
                    "fieldName": "typicalDefnScUploader",
                    "fieldType": "fileReference",
                    "itemType": [
                        "image",
                        "pdf"
                    ],
                    "title": "DocId : {{result.documentId}}"
                }
            ],
            "label": "Typical Defn sc-thumbnail with Filter"
        }

Resulting field on the form:

The leftmost thumbnail is for a pdf document, the rightmost thumbnail is for a png image document.

sc-thumbnail-field-Example-1-Image-1

Resulting field on the form after moving the "Display Width" slider button to the right to enlarge thumbnails:

sc-thumbnail-field-Example-1-Image-2

Clicking the thumbnail for the pdf document opens the pdf document in a modal pop-up:

The modal pop-up displays the first page of an eleven page pdf document and provides the ability to navigate page by page througn its other pages. To close the modal pop-up, click the red "Close" button.

sc-thumbnail-field-Example-1-Image-3

Clicking the thumbnail for the png image document opens the png document in a modal pop-up:

To close the modal pop-up, click the red "Close" button.

sc-thumbnail-field-Example-1-Image-4