Allows a user to leave a drawing or handwritten note. Use the control to collect signatures, drawings, diagrams, schemes, or notes on an image.
This page contains a detailed description of the control properties and JavaScript samples, which you can use with this control.
Here you can find properties related to the Ink Sketch control.
A unique identifier for the 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('InkSketch1').disabled = true;
});
Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.
The same class can be applied to multiple fields and controls, and then you can use CSS to modify the appearance of these. For example, we’ve used the following CSS code in the CSS editor to give controls with my-class a gray background:
.my-class {
background: #c4c4c4;
}
Add custom CSS style to the control. This will work as a style attribute for an HTML tag.
You can apply different styles to the control. For example, the following style sets the image as the background of the canvas:
background-image: url('https://forms-storage.plumsail.com/397ad761-3174-49da-a4bf-a741828fbddb-images/b0fbd0fe-accident-diagram.jpg');
background-size: 500px 300px;
background-repeat: no-repeat;
Select Multiline Plain Text field in the current SharePoint List to save Ink Sketch data to. It will automatically render control in List View.
Alternatively create a new hidden field in editor. You can delete hidden fields by selecting “🖉 Manage” option in the dropdown.
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 the Ink Sketch control value. The control value is stored as a Base64 string.
//return control value as a Base64 string fd.control('Control1').value;
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 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;
Execute a function when a control value has been changed:
fd.control('Control1').$on('change', function(value) { //log changes to browser's console console.log('New value: ' + value); });
Make a control required or optional:
//make control required
fd.control('Control1').required = true;
//make control not required
fd.control('Control1').required = false;
Disable the control. The control value can still be changed with JavaScript and saved.
//disable control fd.control('Control1').disabled = true; //enable control fd.control('Control1').disabled = false;
Define the canvas dimensions in pixels.
//define canvas width fd.control('Control1').width = 300 //define canvas height fd.control('Control1').height = 300
Set the ink color. Define the color in the text, hex, or RGB format.
//set the ink color to red fd.control('Control1').inkColor = 'red' //set the ink color to black fd.control('Control1').inkColor = 'rgb(0,0,0)' //set the ink color to blue fd.control('Control1').inkColor = '#0000FF'