Multiple ESignatures On a page not working about lightning-esignature HOT 10 OPEN

I got it working! I also need to use this variable on this line in ESignatureHelper.js
var wrapper = document.getElementById(cmp.get('v.signatureWrapperID'))

from lightning-esignature.

from lightning-esignature.

from lightning-esignature.

Hi David,
Thanks for your help.
I tested and it works only if I put all 3 esignature components inside the same lightning component.

My application has one parent LC and multiple children LC. I have a requirement to have 3 esignature on 3 different children LC (i.e. one esignature per child LC).

Can please help?

Thanks

Ming

from lightning-esignature.

Hi David,

I think I found the issue.
My App has one parent LC with many children LC. It is a step by step wizard.
So when parent LC loaded, It only shows the first child LC and hides the reset child LCs. When a user clicks next button, it hides current child LC and shows next child LC.

The issue is that when e-signatures are loaded on different child LC, it executes "onScriptReady" which set the correct location of the canvas. but my app hides and shows child LCs and it changes the canvas coordinations. I think this is why the first signature works and rest do not.

I put a 'getReady' method on the esignature, and use a button click on the child LC to call this method and this calls onScriptReady
<aura:method name="getReady" action="{!c.onScriptReady}" description="re-init signature"/>

Is there any way to reset the esignaure without a button click?

Thanks

from lightning-esignature.

Hi David,

I found a solution to my problem. Not sure if this is the best solution.

I add onmouseover="{!c.onMouseOver}">
to <div class="mb-signature-container"
then call h.init(cmp); once.

onMouseOver: function(cmp, evt, h) {
console.log("onMouseOver");
var doneMouseOver = cmp.get("v.mouseOverDone")
console.log(doneMouseOver);
if (doneMouseOver == false) {
cmp.set("v.mouseOverDone", "true");
h.init(cmp);
}

Thanks

from lightning-esignature.

you need to assign different id for esignatrue for different children. each sig has its own document element id. it will not interfere with each other. when saying "hide children', are you using aura:if. it is not hiding, it is just remove hidden component from DOM tree. The real hiding is actually through CSS display: none.

from lightning-esignature.

Thanks for your reply. I hide these children components through CSS display: none.

from lightning-esignature.

from lightning-esignature.

Hi David,

Can you show me how please? Thanks.

Ming

from lightning-esignature.