Include Images

Use an image control to include an image in your web form. Under image source properties, you can identify the image using an absolute or a relative image URL or a Base64 format string.

To configure an image control:

1. From the Advanced Palette, drag the Image control onto the canvas.
2. Select the control and edit its properties on the Properties pane's General tab.

   Field	Description
   Name	An internal identifier that you will use to identify the control.
   Binding	Defines a link between the control and a data attribute.
   Computed Value	Set this property to apply a computation to the control. See Create Computed Controls.
   From URL	To specify either an absolute or relative URL, select this option and enter the image URL in the field below it.
   From Base64	To specify an image converted to base64 format, select this option, then identify the image's format in the Image Format field and its binding in the Base64 Binding field. Base64 images can be viewed in preview mode only.
   Alternative text	Enter text to display if the image can’t be loaded.
   Events	Allows you to configure events for the control. You can assign actions or If/Then/Else conditions to the control based on a selected event. See Add Dynamic Behavior to Forms.

3. On the Styling tab, edit the control's styling properties.
4. Click Preview to try out using the control.

Upload and Preview a Base64 Image

You can embed Base64 encoded images in forms. They load quickly and are useful for email signatures.

1. Drag and drop an Image control onto the canvas and select it.
2. On the General tab, specify Base64 settings in the Image Source fields:
   1. Select From Base64.
   2. In the Image Format field, specify the format you chose when converting the image to base64.
   3. In the Base64 Binding field, enter a name for the image (for example, a data string called oracle).
3. If the encoded string of your base64 image starts with data:image/jpeg;base64, remove it.
   The base64 input you need begins with: "/9j/4AAQ....", not "data:image/jpg;base64,/9j/4AAQ...."
4. Click Preview, then Reload With Payload. In the Payload JSON field, enter the binding name and copied code string to the payload. Enclose the binding name and code string within quotation marks.

   
   Description of the illustration base64.png

5. Click OK and the image displays in the preview window.
   Note that the Reload with Payload button enables you to test the form’s functionality. In a typical use case, the encoded string would be passed as part of the payload.