Designing Apps - Image Widget

The image widget allows to add images to the application document. In addition, the image can also be set in the appropriate size by the Designer using the image URL.

1. Disable editing

• Allows you to set whether the widget will be unavailable from the start: you can change this later using action steps.

2. Hide on workboard

• Option determines whether the image inserted by the user in the application document is displayed on the board. (more about it here)

3. Images limit 

• You can set the maximum number of images that can be inserted into an application document.

4. Scaling

• You can scale image with options, which are included in the "Scaling" drop-down list

5. Max. edge length

• You can choose the maximum edges length of picture

6. BMP to JPG

• Converts the added image in BMP format to JPG in this section

7. Alignment

• Allows you to set what the image will be aligned to when the section is larger than the image.

Images in 'Compact' view are not visible on work board.

SVG File Support

For security reasons, all uploaded SVG files are automatically sanitized before being saved and displayed. This process removes potentially dangerous elements.

Scaling and resizing are disabled for SVG files. Thumbnails display the original file instead of a scaled preview.

Style - Image

Section:

• We can choose a style from the list or specify it using a formula.
• Border settings:
  • Using the border options, we can set its parameters (top, bottom, left, and right) by selecting the appropriate color and rounded edges.
• Adding section shadow:
  • By adding a shadow to the section, we have the option to adjust its color
• Header:
  • We can apply a style in the image section using a list of styles or calculate it using formulas. Additionally, we can set a custom style from the formatting bar, add borders, and save the style.
• Button:
  • We can choose a style for the button from the available options in the list of styles or calculate it using formulas. Alternatively, we can independently assign a color. After determining the preferred style, we can save it for later use.
• Button (hover):
  • Style options can be specified similarly to the button, with the difference that the style will be applied when hovering over the button.
• Content:
  • We can select a style for the image content from the list of styles or calculate it using formulas. Additionally, we can assign a color to the content, set borders, and save the style.

Next to each style property, there is an icon  thet allows you to:

- reset the applied style

-save the selected style