Image Viewer

This article explains the features of the Image Viewer block and how it can be used to display images directly within your app for user reference.

Use Cases

1. Employee Guidelines: Display an image with guidelines or instructions for users to refer to within the app.
2. Product Images: Showcase product images in an app for easy viewing by users.
3. Event Information: Display maps, event schedules, or floor plans for easy reference within event apps.

Editing the Block

Click on the Image Viewer block and start editing on the panel that appears on the right side.

Label

The label is the name of the block that the end user sees in the app.

Example: Holiday Schedule, Event Map.

Description

The description provides additional information about the image for users and is displayed below the image in the app. You can also leave this blank if not necessary.

Example: This image displays the annual holiday schedule.

Attach Files

App admins can upload an image that will be displayed to end users in the app's App Home view. Only one image can be uploaded per Image Viewer block. The supported image file formats include JPG, PNG, GIF, and other standard image formats.
Any other file types uploaded that are not images, will give an error “unsupported file type”.

Advanced Options

Advanced Label

The Advanced Label option allows you to change the label of a field dynamically based on a condition you define. Instead of always showing the same fixed label under the ‘Basic’ tab, the field can display different labels depending on requirements of the form. Use spreadsheet-like functions such as IF, AND, OR, etc. and make use of other field variables to set your conditions. Type @ and select the field.

This is useful when the meaning of a field changes based on context, business logic, or user choices.

For example:
If you have a dropdown called Viewer Mode with options “Before Photo” and “After Photo”.
The label should match the viewing context.

Formula:

IF({viewer_mode} = "Before Photo", "Before Photo", "After Photo")

This allows the same field to adapt its displayed purpose without needing multiple separate fields.

‍

Advanced Description

The Advanced Description option works exactly like Advanced Label, but it changes the description text instead. This is useful when guidance or instructions for a field need to change depending on earlier answers.

For example, using the same scenario from Advanced Label:
If you have a dropdown called Viewer Mode with options like “Before Photo” and “After Photo”, you may want the description of your Image Viewer field to guide the user differently depending on what they selected.

So:
– If the user selects Before Photo, the description could say: “View images captured before the task.”
– If the user selects After Photo, the description could say: “View images captured after task completion.”

Formula:

IF({viewer_mode} = "Before Photo", "View images captured before the task.",  "View images captured after task completion.")

This helps users understand what is required from them without showing unnecessarily long or irrelevant instructions.

‍

Additional Examples (Apply to Both Advanced Label and Advanced Description)

1. Showing nothing until a selection is made

For example, if you have a dropdown field called Visit Category with options “Routine” and “Urgent”, you may want the label or description of a field to remain blank until the user first selects a category.

Once a selection is made:

• If the user chooses Routine, the field will display “Routine”.
• If the user chooses Urgent, the field will display “Urgent”.

Formula (can be used in either Advanced Label or Advanced Description):

{visit_category}The label/description stays empty until the dropdown has a selected value.
After the user picks an option, the selected text (Routine or Urgent) becomes the label or description.

2. Changing label/description based on language selection

For example, if your form includes a dropdown field called Select Language with options English, Spanish, and French, you can show the label or description in the selected language.

So:

• If the user selects English, show English text.
• If the user selects Spanish, show Spanish text.
• If the user selects French, show French text.

Formula (can be used in either Advanced Label or Advanced Description):

IF({select_language} = "English", "Enter details", IF({select_language} = "Spanish", "Ingrese detalles", "Entrez les détails"))The formula returns the text for the selected language.
Only one label/description is shown at a time, depending on what the user picks in the Select Language dropdown.

‍

Important Notes (applies to both Advanced Label and Advanced Description)

1. Variables do not change
When a field is created, its variable name is derived from the label you set in the Basic tab. That variable name is what you must use in formulas, workflows, and other logic. The visible label or description shown by Advanced Label / Advanced Description does not change the variable name.

2. Submissions tab: table view vs right panel
In the Submissions area, the table view always displays the labels from the Basic tab. When you open an individual submission, the right panel shows the labels and descriptions as they appear in the form (i.e., the Advanced Label and Advanced Description applied for that submission). This keeps the submission list consistent while letting reviewers see the context-aware labels and descriptions when viewing a record.

3. Bulk Edit shows Basic tab labels and descriptions
When you need to Bulk Edit submissions, the spreadsheet you download shows the labels and descriptions from the Basic tab only. Advanced Label and Advanced Description are not applied in Bulk Edit, so keep that in mind when preparing bulk updates.

4. Some fields cannot be used inside Advanced Label/Description formulas
Certain block types do not expose a variable that can be referenced in Advanced Label or Advanced Description. If a block does not expose a variable, you cannot use it inside the formula.

Geo Address

GPS Location

PaymentGateway

Audio

Live Tracking

Signature

Code Scanner

NFC Reader

Get Data from RestApi

Get Data from Other Apps

Get Data from Google Sheets

Get Data from Database

AI Block

Text, HTML & Embedding

Attached Files

Image Viewer

Video Viewer

PFD Viewer

Code block

Progress Bar

Action Button

‍

Display this field if

Use this option to show or hide the field under specific conditions. It accepts the standard Clappia formulae, similar to conditional sections or in the ‘Calculations & Logic’ block.

1. Type @ to get a list of all the fields you have added in the app and select the relevant field or type @ followed by the field name.
2. Use these field variables to write spreadsheet-like formulae for conditional display of the field in the app.

Block Width

Desktop View: Set the width of the PDF Viewer block in the desktop view. Options are 100%, 75%, 50%, or 25%.

Mobile View: Set the width of the PDF Viewer block in the mobile view. Options are 100% or 50%.

Using the Image Viewer in App Home

In the App Home view, users will see the uploaded image displayed directly within the app. Unlike the Attached Files block, the Image Viewer does not require users to download the image to view it. The image appears directly within the app interface, providing a seamless experience for users who need quick visual references.

Note

• If you need to share files other than images (such as documents, PDFs, or spreadsheets), consider using the Attached Files block instead or other attachment blocks.
• If you need your user to be able to upload documents, you can use the Camera, Images & Files block instead.