Image
The Image control allows you to add images to your forms. Image can either be used as decoration or as a link.
This page contains a detailed description of the control properties and JavaScript samples which you can use with this control.
Properties
Here you can find properties available for the Image control.
Name
A unique identifier for the control.
The Name property is used in JavaScript to select a specific control.
JavaScript
The Name property allows to work with the control via JavaScript code, like this:
fd.spRendered(function(){
//can access the control using its Name:
fd.control('Control1');
});
Width
The property defines the width of the control in pixels.
If left blank, the control takes up the entire available width in the current grid cell.
Height will automatically adjust to keep the proportions of the image, based on the width. If left blank, the image will be able to take up all the available width in the current grid cell.
Height
You can specify the height of the image in pixels:
If left empty, the image will automatically adjust its height to keep the proportions of height and width, shrinking or growing based on the available width. If the width is not set, then lowering the height will automatically lower the width to keep the proportions.
Alt
Allows you to specify an alternate text for an image here.:
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Class
Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work like class attribute for an HTML tag.
Same class can be applied to multiple controls, and then you can use CSS to modify the appearance of these controls.
Style
Add custom CSS style to the control. This will work like style attribute for an HTML tag.
You can apply different styles to the control. For example, the following style will add a shadow under the control:
box-shadow: 0 9px #999;
And this makes the control invisible to user (but still usable with JavaScript):
display: none;
Target
The target attribute specifies where to open the link. Enter _self to open link on the same page or _blank to open link in a new tab.
Click
Add JavaScript to execute when an image is clicked.
JavaScript
Add event.preventDefault(); to your code to prevent redirection when the image is clicked:
event.preventDefault(); alert('Clicked');
JavaScript framework
In this section, you can find basic examples of how to work with the control using JavaScript.
If you are not familiar with the JavaScript framework, get started with the JavaScript basics.
Note
The control is only accessible once the form is rendered, so all calls to the control must be inside fd.spRendered event:
fd.spRendered(function(){
//hide the control
fd.control('Control1').hidden = true;
//show the control
fd.control('Control1').hidden = false;
});
Get or set image source
Get or set the source of the image with the following property:
//return the source of the image as a URL string fd.control('Control1').source; //set the source of the image as a URL string fd.control('Control1').source = 'https://images.com/my-image.png';
Get HTML element
Access HTML element inside the control in order to modify it, hide it, or do something else.
//access control's HTML var htmlControl = fd.control('Control1').$el;
Hide control
Hide a control from a user. The control value can still be accessed and changed with JavaScript.
//hide control fd.control('Control1').hidden = true; //show control fd.control('Control1').hidden = false;
Get or set alt text
Get or set the alternate text of the image with the following property:
//return the alternate text of the image fd.control('Control1').alt; //set the alternate text of the image fd.control('Control1').alt = 'This picture is awesome, if only you could see it!';
Get or set image width and height
Get or set the width or height of the image with the following properties:
//return the width of the image fd.control('Control1').width; //return the height of the image fd.control('Control1').height; //set the width of the image fd.control('Control1').width = '256'; //set the height of the image fd.control('Control1').height = '512';
Get or set link that opens on click
Assign a link that will open on click, and the target property to select if it will open in a new tab:
//return the link of the image fd.control('Control1').href; //set a link that will open on click fd.control('Control1').href = 'https://plumsail.com/'; //set target attribute, this will open link in a new tab fd.control('Control1').target = '_blank';
Get or set script that runs on click
Property that holds JavaScript that is executed when link is clicked:
//get the script that runs on click fd.control('Control1').onclick; //set the script that runs on click fd.control('Control1').onclick = 'alert("Hyperlink is clicked!")'; //trigger the code to run with JavaScript fd.control('Control1').click();