Signature in Oracle APEX Page

 Signature in APEX Page 

Special Thanks to Daniel Hochleitner
Download Plug In:- https://github.com/Dani3lSun


1) Create Table

CREATE TABLE  "SIGNATURE" 
   ( "COMPCD" VARCHAR2(2), 
"LOCNCD" VARCHAR2(2), 
"BRCD" VARCHAR2(3), 
"DEPTCD" VARCHAR2(3), 
"DOCNO" NUMBER, 
"DOCDT" DATE, 
"DOCTYP" VARCHAR2(2), 
"REFCD" VARCHAR2(6), 
"NETVALLC" NUMBER(17,3), 
"NETVALFC" NUMBER(17,3), 
"FILE_NAME" VARCHAR2(250), 
"MIME_TYPE" VARCHAR2(250), 
"DOCIMG" BLOB, 
"CRTDT" DATE, 
"CRTUSER" VARCHAR2(6)
   )
/
2) Import Plugin 
region_type_plugin_de_danielh_apexsignature.sql

3) Import Static file 
apexsignature.js , apexsignature.min.js, signature_pad.js, signature_pad.min.js

4)  Copy the staic file path to  UserInterface -- Java Script 
#APP_IMAGES#apexsignature.js
#APP_IMAGES#apexsignature.min.js
#APP_IMAGES#signature_pad.js
#APP_IMAGES#signature_pad.min.js

5) Go to any Page --> Create Region Signature--> Type APEX-Signature [Plug-in]

6) Go to Attribute of Signature --> PL/SQL Code
DECLARE
  --
  l_collection_name VARCHAR2(100);
  l_clob            CLOB;
  l_blob            BLOB;
  l_filename        VARCHAR2(100);
  l_mime_type       VARCHAR2(100);
  l_token           VARCHAR2(32000);
  --
BEGIN
  -- get defaults
  l_filename  := 'signature_' ||
                 to_char(SYSDATE,
                         'YYYYMMDDHH24MISS') || '.png';
  l_mime_type := 'image/png';
  -- build CLOB from f01 30k Array
  dbms_lob.createtemporary(l_clob,
                           FALSE,
                           dbms_lob.session);
  FOR i IN 1 .. apex_application.g_f01.count LOOP
    l_token := wwv_flow.g_f01(i);
  
    IF length(l_token) > 0 THEN
      dbms_lob.writeappend(l_clob,
                           length(l_token),
                           l_token);
    END IF;
  END LOOP;
  --
  -- convert base64 CLOB to BLOB (mimetype: image/png)
  l_blob := apex_web_service.clobbase642blob(p_clob => l_clob);
  --
  -- create own collection (here starts custom part (for example a Insert statement))
  -- collection name
  l_collection_name := 'APEX_SIGNATURE';
  -- check if exist
  IF NOT
      apex_collection.collection_exists(p_collection_name => l_collection_name) THEN
    apex_collection.create_collection(l_collection_name);
  END IF;
  -- add collection member (only if BLOB not null)
  IF dbms_lob.getlength(lob_loc => l_blob) IS NOT NULL THEN
    apex_collection.add_member(p_collection_name => l_collection_name,
                               p_c001            => l_filename, -- filename
                               p_c002            => l_mime_type, -- mime_type
                               p_d001            => SYSDATE, -- date created
                               p_blob001         => l_blob); -- BLOB img content

     insert into signature (compcd,locncd,brcd,deptcd,docno,docdt,doctyp,refcd,netvallc,netvalfc,file_name,mime_type,docimg,crtdt,crtuser)
    values (:p710_compcd,:p710_locncd,:P710_ICSLOC,:P710_CUSTADDR4,:p710_docno,:p710_docdt,:p710_doctyp,:p710_custcd,:P710_NBT_SNETVAL,:P710_NBT_SNETVALLC,l_filename,l_mime_type,l_blob,sysdate,
    :APP_USERCD);                         
  END IF;
  --
END;

7)  Create Two Button on Signature Region --> Save (Static ID #Signature_Save), Clear (Static ID #Signature_Clear)

8)  Go to Attribute property of Signature Region --> 

--> Define value for Clear Button JQuery Selector  to #Signature_Clear
--> Define value for Save Button JQuery Selector  to #Save_Signature

9) Create Another Region (Signature Report) with Classic /Interactive Report 
SQL Query :
select crtdt,crtuser,
decode(nvl(dbms_lob.getlength(docimg),0),0,null,
'<img class="center" alt="'||apex_escape.html_attribute(docno)||'" title="'||apex_escape.html_attribute(docno)
||'" style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;" '
||'src="'||apex_util.get_blob_file_src('P4302_DOCIMG',docno)||'" height="100" width="350" />') DOCIMG
from signature where docno=:p710_docno 

10) Create DA on Save button --> Refresh Page --> Signature Report

11) Create DA on Clear Button --> Behaviour--> Defined by DA Action 



Signature Region 



Signature Report 







       


Comments

Popular posts from this blog

Telegram Integration with Oracle

Row Initialization event on the IG region (Set Default value for column of Row)- Oracle Apex

The username or password for the connection pool named |apex||, are invalid, expired, or the account is locked