Image Component
The image component allows you to display images within your space. Each image component can display one image at a time (this image can dynamically change based on tool configuration). These can be product photos, user headshots or any other images that your internal tool requires.
Image Configuration
The image component displays an image based on a template URL that you define here. This template specifies the path (and filename) for your image.
Example template: "https://assets.example-files.com/${customField1.value}"
In this example, we have a fixed portion of the URL ("https://assets.example-files.com/") as well as the variable portion (" ${customField1.value} "). The variable portion will pull the remainder of the path (including the image filename) from what is entered into the filter component (called customField1).
Check out our video tutorial on setting up the image component:
Basics
First, choose whether or not you need to fetch more data to construct the template URL - if you have any variables in the path, do you have existing components in this Space (like a filter component or table component), that will provide the data for the variable?
Note: If you are inserting this image component in-line within another component, you do not have the option to fetch data from a resource ("toggle on"). The resource that the parent component is using will be the resource that the image component fetches data from.
1 -Toggle Off
If you can construct your URL from existing components in this Space, then leave this toggle off. In the template start typing in the URL for your image. If you come to any part of the URL that is not a fixed value, use the "insert a variable" link - you can then specify where your variable values will come from (a filter component, detail component, or table row).
Example using a table to provide template data
You have a number of product photos stored at the path "www.example.com/images/". Each image file name is stored in the "Products" database table, under the column "imagefile" (ie, "product11.png"). You want to build a tool that will show the image for each product when a user clicks on that product.
First, add a table for your "Products" resource and make sure the "imagefile" column is available as an input (either as a table field or hidden field). Then, add your image component. In template, enter "www.example.com/images/" and then click "Insert a variable". Choose the Products table you added earlier, and then choose Selected Row -> Data -> imagefile.
This will bind the image component to the Products table so that any time a user selects a row in the Products table, the image component will look for the associated image for that product and display it in the Space.
2 - Toggle On
If you need data from a resource that isn't already included in this Space, you'll need to fetch the data from a resource.
Once you turn on the toggle, you'll be asked to choose the data source and resource that you want to fetch from. You'll want to choose the resource that has the data needed to complete the template URL.
Next, you'll build out the template URL as before - simply start typing the path, and when you come to a variable portion, use the "insert a variable" link. This time, you'll want to select Own Query -> Data -> columnname, where columnname contains the variable data you need for the image URL. "Own Query" means we're grabbing this data from a query of this resource - essentially we are skipping over the step of adding a table with this data and getting it directly from the resource.
Example using a resource to provide template data
Let's use the same set-up as the previous example, where we have a resource ("Products") that has a column ("imagefile") with the variable data we need for the template URL.
First, enable the toggle, and then select the data source and then the "Products" resource that we need. In template, enter "www.example.com/images/" and then click "Insert a variable". Choose Own Query -> Data -> imagefile.
Using filters (Advanced tab)
If you choose to grab data directly from the resource, Internal needs to determine which record's data to use. For example, if you chose to use the "imagefile" column to provide the data, you still need to identify which record's data should be used (which row of table data).
You can do this by using filters to identify a specific record. If more than one record fulfills the filter criteria, the first available record's data will be used (first is defined by the ordering criteria, see below).
Click “+ Add filter” to add your first filter. You can use the trash can icon to delete a filter, and add more filters by using the button below. For each filter, you must define the field, operation, and value:
Field: In the first input, select the field that you want to filter on.
Operation: In the second input, you’ll choose how you want to compare values and select whether you are comparing against a fixed value or a dynamic value that comes from another component.
Operators - “equal to”, “is not equal to”, “greater than”, “greater than or equal to”, “less than”, “less than or equal to”, “is null” (preset filter-only), “is not null” (preset filter-only), and “contains” (string-only)
Value: For a preset filter, input the comparison value here. In the case of a dynamic filter, you will see a dropdown list of other components in the space.
To filter based on the value a user inputs into a filter component, simply select the name of the filter component and then choose “Value”.
To filter based on a row selected in a table , select the name of the table component, then choose “Selected Row”, “Data'', and then finally the specific field to provide the comparison value (this can include hidden fields in that table).
To filter based on a detail component, select the name of the detail component, then choose "Data" and then finally the specific field to provide the comparison value.
How should the query for your image data be ordered? (Advanced tab)
As mentioned earlier, if multiple records fulfill the filter criteria, Internal will grab the data from the first record. Here, you can determine the ordering used by the query, which will allow you to control what the first record will be.
Choose the field that you want to sort on, and. then pick whether it's ascending or descending.
Signing with S3 (Advanced tab)
To allow the download and display of images from a private S3 bucket, you can sign the request with your S3 credentials. Simply select the S3 data source.
Name (Basics tab)
The name you give your image component will be used to reference the component but is not displayed in your Space to users.
Provide a label for the field (Basics tab)
Note that this option only appears for image components that are inserted in-line within another component (like a detail or card list). This label will be shown above the image.