How to set the Background of an Ink Control

Description

You can set the background image shown in the ink control to anything you want - either by specifying the URL or the base64 encoded data for an image.

 Setting the Ink Background

Images can be used as a background for the ink control. Using the <InkObject>.setBackground() method, you can set the background to an image URL or a base64 encoded image. For example,

var inkControl = {dialog.object}.getControl('INK1');
inkControl.setBackground({ image: { data: url} });

Watch the video below, which demonstrates setting the background of an Ink control to an image using an image stored in AmazonS3. The video also demonstrates how to set the background to a map, which is generated as a base64 encoded image using the A5.map.staticMap method.

 Controlling the "isDirty" State of the Ink Control when Setting the Background Image

When setting the background for an Ink control using the <InkObject>.setBackground() method, you can specify whether or not the background image should be submitted as part of the Ink data. The save property can be used to specify if the background image should be submitted as part of the Ink data.

For example, the following Ajax callback updates the background image for an Ink control, specifying that the image should not be saved with the Ink data:

function xb as c (e as p)
    dim fn as c

    fn = "C:\movieimages\4295.jpg"
    dim b as b
    b = file.to_blob(fn)
    dim b64 as c
    b64 = base64encode(b)
    b64 = "data:image/jpg;base64," + b64

    dim js as c
    js = <<%js%
    var inkObj = {dialog.object}.getControl('INK1');
    var _obj = {save: false, image: { data: '__b64__'}};
    inkObj.setBackground(_obj);
%js%

    js = stritran(js,"__b64__",js_escape(b64))

    xb = js

end function

When the data is submitted to the server, the base64 encoded image, "4295.jpg", will be omitted from the data for the Ink control.

To learn more, watch the video below.

Setting the Ink Control Background Image

Setting the background image in the Ink Control is a common practice. In this video we discuss various aspects of how you can set the Ink control image background and control whether the UX goes dirty when the Ink background is set.

2016-07-06

See Also