I am using the SignaturePad plugin from Enkitec. It is working 100% in Apex 4.2.6.00.03 (Figure A), but not at all in Apex 5.0.3.00.03 (Figure B).
Both applications run in the cloud, Apex 4 (apex.enciva.co.uk/pls/) and apex 5 (enciva-uk15.com/ords/)
I don't get any error message, the frame and line just don't get displayed.
Can anybody please help me with the attached code of the plugin. I have asked for help from Enkitec, but they don't support the plugin anymore.
Unfortunately i don't have any knowledge of JavaScript or html.
Figure A
Figure B
--================================================================================
-- Render Function
--================================================================================
function render_signature_pad (
p\_item in apex\_plugin.t\_page\_item,
p\_plugin in apex\_plugin.t\_plugin,
p\_value in varchar2,
p\_is\_readonly in boolean,
p\_is\_printer\_friendly in boolean )
return apex\_plugin.t\_page\_item\_render\_result
IS
l_retval APEX_PLUGIN.T_PAGE_ITEM_RENDER_RESULT;
l_onload_code varchar2(32767);
l_pk_name varchar2(32767) := p_item.attribute_01;
l_height varchar2(32767) := p_item.attribute_02;
l_width varchar2(32767) := p_item.attribute_03;
l_canvas_color varchar2(32767) := p_item.attribute_04;
l_pen_color varchar2(32767) := p_item.attribute_05;
l_pen_width varchar2(32767) := p_item.attribute_06;
l_line_color varchar2(32767) := p_item.attribute_07;
l_line_width varchar2(32767) := p_item.attribute_08;
l_line_margin varchar2(32767) := p_item.attribute_09;
l_line_top varchar2(32767) := p_item.attribute_10;
-- Its easer to reference things using a local name rather than the APEX Attribute Number
BEGIN
--
-- If we're in debug mode, then turn on debugging for the region.
--
IF apex_application.g_debug
THEN
apex\_plugin\_util.debug\_page\_item ( p\_plugin => p\_plugin,
p\_page\_item => p\_item );
END IF;
--
-- Add the signaturepad JavaScript
--
apex_javascript.add_library (
p\_name => 'jquery.signaturepad.min',
p\_directory => p\_plugin.file\_prefix,
p\_version => NULL
);
--
-- Add the signaturepad CSS
--
apex_css.add_file(
p\_name => 'jquery.signaturepad',
p\_directory => p\_plugin.file\_prefix,
p\_version => NULL
);
--
-- Add the json2.js to
--
apex_javascript.add_library (
p\_name => 'json2.min',
p\_directory => p\_plugin.file\_prefix,
p\_version => NULL
);
--
-- Add the flashcanvas.js to
--
-- apex_javascript.add_library(
-- p_name => 'flashcanvas',
-- p_directory => p_plugin.file_prefix,
-- p_version => NULL
-- );
--
-- Emit the Base Javascript for the SignaturePad DIV and the underlying HIDDEN filed that will hold the Signature JSON object
--
htp.p(q'!
<div class="sig sigWrapper" style="display: inherit">
<canvas class="pad" width="!'||l_width ||q'!" height="!'||l_height ||q'!"></canvas>
</div>
<input type="hidden" id="!'||p_item.name ||q'!" name="!'||apex_plugin.get_input_name_for_page_item (p_is_multi_value => FALSE) ||q'!" value="!'||p_value ||q'!">
!');
--
-- Emit the javascript functions necessary to
--
htp.p(q'!
<script type="text/javascript">
apex.ajax.clob = function (pReturn) {
var that = this;
this.ajax = new htmldb\_Get(null, $x('pFlowId').value, 'APXWGT', $x('pFlowStepId').value);
this.ajax.addParam('p\_widget\_name', 'apex\_utility');
this.ajax.addParam('x04', 'CLOB\_CONTENT');
this.\_get = \_get;
this.\_set = \_set;
this.\_return = !! pReturn ? pReturn : \_return;
return;
function \_get(pValue) {
that.ajax.addParam('x05', 'GET');
that.ajax.GetAsync(that.\_return);
}
function \_set(pValue) {
that.ajax.addParam('x05', 'SET');
that.ajax.AddArrayClob(pValue, 1);
that.ajax.GetAsync(that.\_return);
}
function \_return() {
if (p.readyState == 1) {} else if (p.readyState == 2) {} else if (p.readyState == 3) {} else if (p.readyState == 4) {
return p;
} else {
return false;
}
}
}
function clob_get_from_db(){
// Call the on demand procedure to Get the signature clob
// alert("clob_get_from_db");
var get = new htmldb_Get(null,$v('pFlowId'),'PLUGIN=!'|| apex_plugin.get_ajax_identifier ||q'!',$x('pFlowStepId').value);
get.addParam('x01', $v('!'||l_pk_name||q'!'));
var gReturn= get.get();
$x('!'||p_item.name ||q'!').value = gReturn;
get=null;
}
//
function clob_set(clobString){
var clob_ob = new apex.ajax.clob(
function(){
var rs = p.readyState
if(rs == 1||rs == 2||rs == 3){
$x\_Show('AjaxLoading');
}else if(rs == 4){
$x\_Hide('AjaxLoading');
}else{return false;}
}
);
//
clob_ob._set(clobString);
}
</script>
!');
--
-- Build the ONLOAD javascript including the OnDrawEnd callback
--
l_onload_code := q'!
$(document).ready(function(){
clob\_get\_from\_db(); //
if($v\_IsEmpty('!'||p\_item.name||q'!')){
$("#wwvFlowForm").signaturePad({drawOnly: true,
validateFields: false,
output: '#!'||p\_item.name||q'!',
onDrawEnd: function(){ var api = $("#wwvFlowForm").signaturePad();
var sig64 = api.getSignatureImage();
clob\_set(sig64);
},
bgColour: '!'||l\_canvas\_color||q'!',
penColour: '!'||l\_pen\_color||q'!',
penWidth: '!'||l\_pen\_width||q'!',
lineColour: '!'||l\_line\_color||q'!',
lineWidth: '!'||l\_line\_width||q'!',
lineMargin: '!'||l\_line\_margin||q'!',
lineTop: '!'||l\_line\_top||q'!'
});
}
else{
$("#wwvFlowForm").signaturePad({displayOnly:true ,lineColour:'#FFFFFF', lineTop:100}).regenerate($v('!'||p\_item.name||q'!'));
}
});
!';
--
apex_javascript.add_onload_code(
p\_code => l\_onload\_code
);
--
return l_retval;
END;
-- =================================================================
-- sigpad_ajax_callback
-- =================================================================
function sigpad_ajax_callback (
p\_item in apex\_plugin.t\_page\_item,
p\_plugin in apex\_plugin.t\_plugin )
return apex\_plugin.t\_page\_item\_ajax\_result
IS
l_return apex_plugin.t_page_item_ajax_result;
l_SQL varchar2(32767);
c_sig_cursor SYS_REFCURSOR;
l_code clob := empty_clob;
l_DB_COLUMN_NAME varchar2(30);
l_DB_TABLE_NAME varchar2(30);
l_DB_PK_COLUMN_NAME varchar2(30);
l_error_msg varchar2(32767);
BEGIN
IF apex_application.g_x01 is not null THEN
--
-- Get the name of the DB Column and table that are related to this item (if any)
--
BEGIN
--
-- This gets the Column and Table to be used in the dynamic cursor.
--
l\_error\_msg:= 'ERROR: unable to successfully retrieve Column Values';
select db\_column\_name, db\_table\_name
into l\_db\_column\_name, l\_db\_table\_name
from apex\_application\_page\_db\_items
where item\_name = p\_item.name
and application\_id = v('APP\_ID');
--
-- This gets the underlying DB Column for the Primary Key as identified in the attributes.
--
l\_error\_msg:= 'ERROR: unable to successfully retrieve PK COLUMN Values';
select db\_column\_name
into l\_db\_pk\_column\_name
from apex\_application\_page\_db\_items
where item\_name = p\_item.attribute\_01
and application\_id = v('APP\_ID');
--
EXCEPTION WHEN NO\_DATA\_FOUND THEN
-- When the item isn't a database item, then don't output anything
htp.prn(l\_error\_msg);
RETURN L\_RETURN;
END;
--
-- Create the select statement that will be used to return the JSON
--
l\_sql := 'select '||l\_db\_column\_name||' from '||l\_db\_table\_name||' where '||l\_db\_pk\_column\_name||' = '||apex\_application.g\_x01;
--
-- Execute the select statement
--
OPEN c\_sig\_cursor FOR l\_sql;
FETCH c\_sig\_cursor INTO l\_code;
IF c\_sig\_cursor%FOUND THEN
DECLARE
l\_clob\_source2 clob;
offset int:=1;
BEGIN
LOOP
l\_clob\_source2 := dbms\_lob.substr(l\_code,4000,offset);
htp.prn(l\_clob\_source2);
EXIT WHEN
offset + 4000 >= nvl(dbms\_lob.getlength (l\_code),0);
offset := offset + 4000;
END LOOP;
END;
ELSE
htp.prn('ERROR: Unable to retrieve clob from dynamic SQL');
END IF;
CLOSE c\_sig\_cursor;
END IF;
return l_return;
EXCEPTION
WHEN OTHERS THEN
-- Log error here
RAISE;
END;