Loading...

RECOMMENDATION: If you are using a version of The Portal Connector higher than 4.0, we strongly recommend utilizing the MVC based widgets and components to create your site. This documentation is for legacy purposes only and will soon be deprecated.

Image

Properties API Related
Widget Type:
Form Widgets
TPC Version:
  • 4.0
imagelogo
The Image widget allows you to upload an Image to a CRM Entity via Form Submission. It has the option of determining the max dimensions that the image will appear at on the page as well as a caption for the image that will display in the lightbox and when one hovers their cursor over the image. If an uploaded image has a higher resolution than the defined maximum resolution, you will be able to click on the image to view it at full size. 

Please note that the maximum allowed filesize is five megabytes by default, image transparency is not preserved, and you may only have one image per record. The only allowed filetypes are .bmp, .tiff, .tif, .jpeg, .jpg, .png, .gif, and .ico.

CRM Image

Configuration

Basic

Make sure you have a Form with Form Configuration and a TPC Form Layout already attached.

Drag and drop the Image widget from the Portal Connector widget list into the body of your form and click edit to display the properties prompt.

The Title will allow you to set the label for the control.

The Image Caption allows you to define some text that will appear below the image box.

The image Height and Width can be set manually as well. By default it is set to 144x144.

image-instructions-1

Widget Properties

Basic Properties

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

Image Caption

The Image Caption property allows you to define some text that will be displayed below the image.

Image Display Width

The Image Display Width property defines the width at which an image will appear. For the CRM Image widget, the default and maximum applicable value is 144px.

Image Display Height

The Image Display Height property defines the height at which an image will appear. For the CRM Image widget, the default and maximum applicable value is 144px.

Read Only

The Read Only checkbox will not allow the user to interact with the widget when checked.

Tool Tip

The Tool Tip allows you to add a description or Hint to your widget.

ToolTipPosition

This property determines the position of the tool tip. By default this property is set to "Auto". You can change this to Left , Right , Top , Bottom. 

IsHidden

Allows you to hide the widget when this property is set to true

Hide Title

You can hide the title by setting the property value to true

LabelPosition

The LabelPosition advanced property specifies where the label of a widget will appear. By default, the label will appear on top of the widget. Applicable options include: Top and left. The content of the label is controlled by the Title property. The default value for this is 'Top'.

RequiredIndicationLabel

The label text that appears next to the widget when marked as required.

ClientSideRequired

Allows you to enable or disable "required" from client side  

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

Image Caption

The Image Caption property allows you to define some text that will be displayed below the image.

Image Display Width

The Image Display Width property defines the width at which an image will appear. For the CRM Image widget, the default and maximum applicable value is 144px.

Image Display Height

The Image Display Height property defines the height at which an image will appear. For the CRM Image widget, the default and maximum applicable value is 144px.

Read Only

The Read Only checkbox will not allow the user to interact with the widget when checked.

Tool Tip

The Tool Tip allows you to add a description or Hint to your widget.

ToolTipPosition

This property determines the position of the tool tip. By default this property is set to "Auto". You can change this to Left , Right , Top , Bottom. 

IsHidden

Allows you to hide the widget when this property is set to true

Hide Title

You can hide the title by setting the property value to true

LabelPosition

The LabelPosition advanced property specifies where the label of a widget will appear. By default, the label will appear on top of the widget. Applicable options include: Top and left. The content of the label is controlled by the Title property. The default value for this is 'Top'.

RequiredIndicationLabel

The label text that appears next to the widget when marked as required.

ClientSideRequired

Allows you to enable or disable "required" from client side  

API

set_value()

Sets the value of the widget.

Returns

None

get_type()

Returns the widget type.

Returns

String

enable()

Enables the widget on the form.

Returns

None

disable()

Disables the widget on the form.

Returns

None

clear()

Clears the value of the widget.

Returns

None

get_input()

Returns the input element of the widget.

Returns

jQuery Object

get_element()

Returns the input element of the widget.

Returns

jQuery Object

get_container()

Returns the container element of the widget.

Returns

jQuery Object

hide()

Hides the widget from the form.

Returns

None

show()

Shows the widget on the form.

Returns

None

get_imageView()

Returns the image container associated with the widget.

Returns

jQuery Object

get_value()

Returns the current image in the widget as a DataURL.

Returns

String

get_model()

Returns an object containing various properties about the widget.
In the case of the Image widget, the returned properties and their types are:

  • MaxFileSizeBytes: Integer

Returns

Object

toggle()

Toggles the visibility of the widget. 

Returns

None

readonly()

Sets the widget state to read only.

Returns

None

Full API With Examples

Related examples of Image Configuration