Image Widget

Use this widget to display an image on the form.

Last published at: June 3rd, 2024

Description:

Displays an image on the Form.

Inputs

  • ID/Name - Name of widget generated by FlowWright (read-only field)
  • Image URL - Enter the HTTP URL link
  • Alternate Text - Enter description for alternate text
  • Width (%) - Enter the percentage value for width
  • Height (px) - Enter the pixel value for height
  • Hide - Select the checkbox to Hide (tick mark)
  • Tool Tip - Enter information to display on mouse hover on form render
  • Styles - Enter the CSS scripts for widget styles
  • Apply Classes - Select between custom classes defined 
  • Save - Save the input values 
  • Delete - Remove this form widget from the designer page 
  • Close - Close the input popup window
 

 

Design: 

 

 

Example:

Let’s build and execute the “ImageDef” example.  

  • Create a new form definition called “ImageDef.”  
  • Select the Open Designer checkbox and click the “Create” button
  • Drag an Image widget to the canvas
  • Double-click on the widget to configure the “Settings” properties. Provide a name to the control. Select the image from the folder. Provide alternate text if necessary. Provide a navigation link when clicking during run time. Select the check box to hide the image during run time. 

 

  • Click the Choose Files button to select the image from the local folder.  

 

  • The image appears as a thumbnail on the popup. You may continue to choose as many image files from the local folder as possible and pick one for selection next. 

 

  • Click the SELECT button to associate this picture with the image form control. The image is copied to the application file path as represented by the URL text.

 

  • The selected image is now visible on the image control on the form designer canvas. 

 

  • Double-click on the image widget to select/change to another picture using the above procedure. 

 

  • Select the image thumbnail and click the REMOVE button to delete the picture from the application file path. 

 

  • Double-click on the image widget to configure the “Styling” properties. Provide the style script. If the class was previously uploaded, select it from the drop-down list.  

 

  • Double-click on the widget to configure the “Other” properties. Provide the tooltip text.

 

  • Click on the Save button and Close the popup window
  • Navigate to the UI menu and Preview the form. The rendered widget will appear as shown in the graphic below