[Signature] IE8 Support

[Signature] IE8 Support

  
Forge Component
(11)
Published on 12 Oct by OutSystems Labs
11 votes
Published on 12 Oct by OutSystems Labs
I've noticed that this does not include support for IE8 and browsers that do not support the HTML5 canvas element. Has anyone been able to make this work for IE8 using a fallback of excanvasflash canvas or any other method such as these? So far I haven't had any luck.

Thanks,
Brian
Hi Brian,

If I remember correctly, the pluggin itself, supports the fallback:

You should check if there's some option that this component is missing to allow that.

Cheers,

RG


Hi Ruben,

Thanks for the quick reply. I've tested this myself in IE8 on a VM and have seen the error that the component throws:

"Sorry, something happen: {"description": "Canvas element does not support 2d context. jSignature cannot proceed."}..."

On the component itself, I only see three options, those being the PlaceId, ImageInputId, and ShowClearLink.

Thanks,
Brian
Have you tested their demo?
http://willowsystems.github.io/jSignature/#/demo/

Same result?

Just noticed that you're right. The component is not ready for IE8.
To be, we'd need to add the following:

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->

The flashcanvas.js, would have to be in the same directory than the other JS.
Do you wanna join the team, and to that improvement? :D

I've actually tried adding that line to the JS of the webblock that holds the signature component, and I have the flashcanvas.swf in the same directory, but it still does not work. Here is my setup:

A webblock that holds the signature component, inside the JS of the webblock is the following:

<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->
I have two resources added:

1. js\flashcanvas.js
2. js\flashcanvas.swf

This produces the same result. I get the error message that 2d context is not supported, and do not see the canvas rendered on the page.

Thanks,
Brian
Are those resources marked as to be deployed to target directory?
Yes they are.
Is the tag there? (on IE8?)

Can you post the eSpace or the send the url of a sample app?
I do not see the tag for either the canvas element or the flashcanvas.js script tag when viewed through IE8.

You can access my example hereIf you just enter dummy data to get to the final screen you'll see where the jSignature component should be. I can work on getting a test eSpace for you, the only one I currently have has a lot of references to other eSpaces.
Can you show how you're adding those tags? (screen shot)

Here are screenshots of how I am adding the tags:

"flashcanvas.js" script tag added in web block JS:
https://drive.google.com/file/d/0B5wKzC4eqxlATkJic1dSaS1MWHc/edit?usp=sharing

Resources screenshot:
https://drive.google.com/file/d/0B5wKzC4eqxlAVUEtRWN1Zi1tcTQ/edit?usp=sharing

Thanks,
Brian
Uhm, I don't think that this tag works on a JS file.

<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->

Then, I don't see the JS of the component anywhere on your example..
Remember as well as that JS file above, MUST be included before the other one.
That is how it is documented to be used from the jSignature demo:
https://github.com/willowsystems/jSignature#adding-jsignature-to-your-page

However, I did figure out part of my problem... I had that IF & script tag placed in the Javascript of the web block rather than in an expression on the screen before the jSignature component was rendered. If you look at the URL I sent you now you'll see that 'flashcanvas.js' is a valid script tag on the screen and the signature component appears to be valid. However, when you go to draw on it, nothing appears.

Here is a screenshot of my testing on IE8 after attempting to draw:
https://drive.google.com/file/d/0B5wKzC4eqxlAUUVFYlNyVThaXzQ/edit?usp=sharing

The good news is that the component renders on the page "correctly", only you can't draw on it.

EDIT: Also, the "clear signature" link does not work. It throws an error:
https://drive.google.com/file/d/0B5wKzC4eqxlAR1JQQmczb195U2M/edit?usp=sharing

Thanks for your help,
Brian
UPDATE: Actually, I've found that it IS drawing to the canvas, but the canvas itself is just not the proper size or whatever flash canvas uses to imitate the canvas element isn't. If you go to that URL and try drawing below the line that marks as what to draw on, you'll see the mark appear at the very top of the canvas. I'm looking further into this now...

So aside from that, the only issue I'm having is with the clear signature link with the error message I posted above.

EDIT: It is also not loading the value into the text input used by the web block to store the binary signature value.

Thanks,
Brian
Hi Brian,

Sanity check, do you reaalllyyy need to support IE8? :)
Hi Ruben,

For some reason I tried accessing this thread the other day and it was giving me 404 errors, works now anyway.

Yes you are right, supporting IE8 is frankly a waste of resources. When I originally created this thread it was a concern of ours for the few users that were attempting to sign using IE8. We have since decided to simply throw a message alerting them their browser is crappy and outdated. Now that Microsoft has stopped supporting it, there's certainly no reason for us to do so.

Thanks for your help, have a great day!

- Brian