Add an Image Widget

About this task

Use the Image widget to add images to your app. Images must be in one of the following file formats: .gif, .jpg (.jpeg) or .png.

To add an image widget to your app:

Procedure

  1. In the Canvas, open the Widgets tab.
  2. Double-click or drag and drop the Image widget onto the app canvas.
  3. In the Image Properties panel, click New Image.
  4. Browse to the location of the image on your computer and upload it to SOTI Snap.
    You can replace or delete this image at any point.
  5. Enter a name for the image in the Name field.
  6. Use the image editing tools to modify the image.
    Hover over each icon to see the available tools.
    • Reset
    • Crop
    • Rotate 90 Anti-Clockwise
    • Rotate 90 Clockwise
    • Flip Horizontal
    • Flip Vertical
    • Zoom
  7. Choose how you want your image to appear in the app.
    • Align Left
    • Center
    • Align Right
  8. Optional: Add hotspots to the image. Hotspots allow you to control what happens when the app user clicks an area in the image in the app.
    1. In the Add Hotspot dialog box, click New Image Hotspot.
    2. Enter a name for the hotspot.
    3. Drag the blue square to the area on the image where you want to add a hotspot.
      Light colored image to prominently display hotspots
      Tip: Drag on the corners of the hotspot to resize it.
    4. Repeat for any additional hotspots.
    5. Switch to the Events tab.
    6. Select a hotspot from the Hotspot dropdown list, then click Add beside Actions.
    7. Select an action and click Add to apply it.
    8. Click Save to save the action.
    9. Repeat for the rest of the hotspots and return to the Image Properties tab.
  9. Choose how you want to align your widget in the app.
    • Align Left
    • Center
    • Align Right
  10. Optional: Add a visibility rule to the widget.
    Use visibility rules to control when a widget is visible to the app user. For example, you can create a condition that a widget should only appear after the app user fills in a field or submits a form.
    1. Select Visibility Rule to open the Set Visibility Rule dialog box.
    2. Select whether the visibility rule requires meeting all or any conditions.
    3. Select an app field or variable and an operator from the Field list. Enter the value required for the widget to be visible.
    4. Select Add Condition to add another condition.
    5. Select Save.
  11. Move to the Format tab to customize the widget's appearance.
  12. Select Save in the SOTI Snap banner to apply your changes.
    Save app button

Results

Tip: Select Preview to see how the widget appears in your app.