Well, here is a simple example :
The Signature Control is not responsive. Of course I could tell my phone and tablet users to zoom in or out, or switch orientation. But I don’t want to. Look, I’m just trying to make a point. Customers will always come up with things that we might not expect, and the Signature Control will be no exception.
The width of the control is fixed, by the parameter entered at Design Time :
Since we cannot extend the behaviour of the Signature, maybe we need another approach. Let’s look at some useful things we came across while researching this article.
var currentWidth = interview._session.config.interviewProperties["signature-width"];
This might be useful for some sort of fallback or default value.
In the above example, we use the styling capabilities of the Signature Control to change the ink colour, and we apply a CSS style to the Control as a whole. With that in mind, we can leverage media queries in the CSS to establish different sizes of display for different users:
In the example CSS below, the outline (the border) of the Signature can be changed depending on the size of the viewport / screen that the user is holding. Smaller viewports will use a one pixel border, larger ones will use 2 pixel. It’s a simple example.
4. The Signature Control might only need extending during the mount or unmount process – which makes a Container Control a good choice. For the update we will simply leave that blank since there is nothing on the Signature Control we want to work with.
The client didn’t like that funny dotted line you get when you need to sign the signature panel. Using our newly added Class, we can select the siblings of the Signature and remove the line:
5. We might also use jQuery to add a resize handler to the Interview window, and based on that we could resize the Signature to a certain degree. We can also trigger the resize handler when the window is first shown, to make sure our Signature Control is always presented in the right size. And that opens up a world of opportunities.
So what does all this give us? The following video shows some of the results. This is just a scratchpad idea – so as usual the example is given with no warranties. You can get the example code from the OPA Hub Shop by searching the code examples for Signature Control.
It’s a work in progress, but piggybacking on top of an extendable Control like the Container (which is also pretty much invisible, which is a bonus) let’s us imagine all sorts of trickery on the Signature Control. Plus, as good citizens we have learned along the way of some interesting standard styling and customization.
In the example code there are, as usual, a number of console logs as well as some experimental code that probably does nothing : as I always say, this is for educational purposes!