Showing posts with label APEX. Show all posts
Showing posts with label APEX. Show all posts

Monday, September 24, 2018

USING APEX_ERROR NOTIFICATIONS TO MANAGE CUSTOM ERROR MESSAGES

Include User Notifications or Custom Messages and Error Messages in Oracle APEX’s default Success and Error Message style. 


Default Success message :



Default Error message :



Steps in APEX :

ü  Step 1 : Create a text field item P11_ENAME.




Step 2 : Create a File Browse Item P11_FILE_BROWSE and change the Storage Type as APEX_APPLICATION_TEMP_FILES and Change the Purge File at End of Session.


APEX Screen :


ü  Step 3 : Create an Application Process Insert Image and copy the below code as source.
Code :
        
DECLARE
   v_blob      BLOB;
   v_emp_cnt   NUMBER;
   v_name      VARCHAR2 (100);
   v_sno       NUMBER;
BEGIN
   BEGIN
      SELECT blob_content, NAME
        INTO v_blob, v_name
        FROM apex_application_temp_files
       WHERE ID = (SELECT MAX (ID)
                     FROM apex_application_temp_files);
   EXCEPTION
      WHEN OTHERS
      THEN
         raise_application_error (-20038, 'Table');
   END;

   BEGIN
      SELECT NVL (MAX (sno), 0) + 1
        INTO v_sno
        FROM emp_files;
   --RAISE_APPLICATION_ERROR(-20034,v_sno);
   END;

   BEGIN
      IF :p11_empno IS NOT NULL
      THEN
         BEGIN
            SELECT COUNT (1)
              INTO v_emp_cnt
              FROM emp123
             WHERE empno = :p11_empno;

            IF v_emp_cnt = 1
            THEN
               BEGIN
                  INSERT INTO emp_files
                              (sno, empno, file_name, blob_content
                              )
                       VALUES (v_sno, :p11_empno, v_name, v_blob
                              );

                  COMMIT;
                 apex_application.g_print_success_message :=
                        '<span style="color : white ">Success :</span>'
                     || TRIM (:p11_empno);
               EXCEPTION
                  WHEN OTHERS
                  THEN
                     raise_application_error (-20098,
                                              SQLERRM || '-' || 'INSIDE'
                                             );
               END;
            ELSE
               /*  apex_application.g_print_success_message :=
                       '<span style="color : white ">Error in Uploading Image for Employee :</span>'
                    || TRIM (:p11_empno);*/
               apex_error.add_error
                   (p_message               =>    'Employee No : '
                                               || :p11_empno
                                               || ' already exists.',
                    p_display_location      => apex_error.c_inline_in_notification
                   );
            END IF;
         END;
      ELSE
         apex_error.add_error
                   (p_message               => 'No value in the Employee number field.',
                    p_display_location      => apex_error.c_inline_in_notification
                   );
      END IF;
   END;
END;

Note : Above code contains two packages. apex_application.g_print_success_message for Success and apex_error.add_error  for Error Messages. You can change the Message info based on the requirement.

My Custom Success Message :

My Custom Error Message : I have passed the Employee Number in to the Error Notification.


JQUERY AUTOCOMPLETE FOR TEXT FIELD ITEM IN ORACLE APEX


Process of enabling users to quickly find and select from a  list of values as they type, searching and filtering without Native text with auto-complete in APEX.

This process works fine with Apex 4 and 5 versions but not 18.

Steps in APEX :


ü  Step 1 : Create a text field item P67_ENAME.
ü  Step 2 : Copy Below code in to the HTML Header of the page.
<!doctype html>
<html lang="en">
<head>
            <meta charset="utf-8">
            <title>autocomplete demo</title>
            <link rel="stylesheet"       href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css    ">
      <script src="//code.jquery.com/jquery-1.12.4.js"></script>
      <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

ü  Step 3 : a) Create an Application Process GET_NAMES.
          b) Change the Process Point to On Demand - Run this Process when                                                   requested by AJAX.
c) Copy the Below PL/SQL Code as source.
    
Note : This Process returns values matching the literals typed in the text field item in the JSON Format. 

DECLARE
   CURSOR c_names(pc_term IN VARCHAR2)
   IS
      SELECT      '{"label":"'
               || ename
               || '","id":"'
               || empno
               || '"}' ename
          FROM emp
         WHERE UPPER (TO_CHAR (ename)) LIKE
             UPPER ('%' || pc_term) || '%'
              ORDER BY 1;

   l_num                NUMBER          := 0;
   l_term               VARCHAR2 (4000);
  
BEGIN
   l_term := apex_application.g_x01;
   HTP.prn ('[');

   FOR rec IN c_names(l_term)
   LOOP
      IF l_num != 0
      THEN
         HTP.prn (',');
      END IF;

      HTP.prn (rec.ename);
      l_num := l_num + 1;
   END LOOP;

   HTP.prn (']');
END;

ü  Step 4 :

a) Create a dynamic action on change of P67_ENAME (Text Field).

  b) Create a True action as Execute Javascript Code and Check Fire on Page                      Load. Copy the below code.

Note : Below Javascript Code calls the AJAX Process whenever user types in the text field and passes the values to the process and displays the values in the textfield.
    
$( "#P67_ENAME" ).autocomplete({
  source:
function(req, add){
      //call the page process get_contact_data and put its return in greturn
      //this process returns markup for a JSON object so this can easily be parsed in jquery
      //x01: a temporary variable simply used for passing on a value
      $.post('wwv_flow.show',
             {"p_request"      : "APPLICATION_PROCESS=GET_NAMES",
              "p_flow_id"      : $v('pFlowId'),
              "p_flow_step_id" : $v('pFlowStepId'),
              "p_instance"     : $v('pInstance'),
              "x01"            : req.term
             },
              function(data){
                 if(data){
                    add($.parseJSON(data));
                               $("#P67_ENAME").removeClass("ui-autocomplete-loading");
                 }
                         else
                         {
                   $("#P67_ENAME").removeClass("ui-autocomplete-loading");
                         };
                         
             }
            );              
   },
   select: function(event, ui){
      $("#P67_ENAME").val(ui.item.value);
     // $("#P26_EMPNO").val(ui.item.value);
      event.preventDefault();
   },
   delay: 500,
   minLength: 1,
   autoFocus: true
});

Friday, September 21, 2018

Creating Checkbox Tree In Oracle Apex 5.0




 Required Tools
 vOracle Apex (Version 5)

Step 1
Create Tree Region

Sample code: 
                SELECT   CASE
            WHEN CONNECT_BY_ISLEAF = 1 THEN 0
            WHEN LEVEL = 1 THEN 1
            ELSE -1
         END
            AS status,
         LEVEL,
         Ename AS title,
         NULL AS icon,
         EMPNO AS VALUE,
         NULL AS tooltip,
         NULL AS LINK
         FROM   EMP 
       START WITH "MGR" IS NULL
CONNECT BY NoCYCLE PRIOR "EMPNO" = "MGR"  


Step 2 
       Assign Static ID to Tree region as Treestatic-id .
      

Step 3

       Paste below code under Page Attributes -> Javascripts->Execute when Page Load.

   Code :

regTree = apex.jQuery("#Treestatic-id").find("div.tree");
regTree.tree({
 ui : {
  theme_name : "checkbox"
 },
 callback : {
  onchange : function(NODE, TREE_OBJ) {
   if (TREE_OBJ.settings.ui.theme_name == "checkbox") {
    var $this = $(NODE).is("li") ? $(NODE) : $(NODE).parent();
    if ($this.children("a.unchecked").size() == 0) {
     TREE_OBJ.container.find("a").addClass("unchecked");
    }
    $this.children("a").removeClass("clicked");
    if ($this.children("a").hasClass("checked")) {
     $this.find("li").andSelf().children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");
     var state = 0;
    } else {
     $this.find("li").andSelf().children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");
     var state = 1;
    }
                $this.parents("li").each(function() {
     if (state == 1) {
      if ($(this).find("a.unchecked, a.undetermined").size() - 1 > 0) {
       $(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");
       return false;
      } else
       $(this).children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");
     } else {
      if ($(this).find("a.checked, a.undetermined").size() - 1 > 0) {
       $(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");
       return false;
      } else
       $(this).children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");
     }
    });
   }
  }
       ,onopen : function(NODE, TREE_OBJ) {
           $(NODE).removeClass("open").addClass("closed");
        }
       ,onclose : function(NODE, TREE_OBJ) {
           $(NODE).removeClass("closed").addClass("open");
        }
 }
}); 






         Tree region with checkbox:
                                                

          Inspect checkbox “JONES”
  

  

   Here column "EMPNO" from "Emp" table is the above "li id" ID value.


Step 4
      Create Hidden Item to capture checked Value.
       Item:  P16_EMP_HID


Step 5
       Create a button as SAVE (Define by dynamic action).


Step 6 
        Create a dynamic action
Event          : Click
Selection_type  : Button
Button         : SAVE

Create a true action using below code under Execute JavaScripts Code.

var lPassengers = [];
$("#Treestatic-id a.checked").parent()
  .each(function() { lPassengers.push($(this).attr("id")) });
$s("P16_EMP_HID",lPassengers.join(":"));

Step 7

Click Save button to find checked Value.




To Auto Check the tree using hidden item value
  
    1) Create dynamic action
           Event : On page Load.
        
Create a true action using below code under Execute JavaScripts Code.

        $(document).ready(function(){
$.each(  $v("P16_EMP_HID").split(":"),
        function(intIndex, objValue) {
        $("li#"+objValue+".leaf a:first-child").click();
         } );
         });