7 Replies Latest reply on Oct 2, 2018 4:21 PM by DSteele41

    Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item

    DSteele41

      DSteele41 asked4 days ago

      Good Afternoon Community

       

      I am using APEX 5.1.0.00.45  with Oracle 12c Database utilizing  PL/SQL Developer and SQL Developer

       

      *** I know that my version of APEX needs to be upgraded and / or Patched;  but at this time is not possible with me being a contractor for a State Agency;  My Team and I  have to wait for it to be Authorized ***

       

      I have my Page I'm working on Replicated in  My  APEX.Oracle.com  Workspace ;  and am using Code from the IG Cookbook that works and does exactly what I need it to do.  but again we are on  5.1.0.....

       

      https://apex.oracle.com/pls/apex/f?p=4550:1:1666570127918:::::

       

      Workspace:       STEELE41_APEX_ORACLE

       

      USERNAME:    ORACLE_USER

       

      PW:                  Pa$$word123

       

      Application:   Receipt_Log_Multiple_Payments  (56585)  --->   Page 2

       

      ***If you have issues logging into the Workspace  And/ Or Application;  Please Let Me Know ***

      ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

       

      I have 2 different IGs   "Payments" and "Receipt_Lines"  both of which have Page Items (Subtotal and Payments Total) that are being Accumulated by Summing Columns ( Extended_Price & Payment_Amount) with Javascript Code  that is under Dynamic Actions,  The Adding of them is Working just fine.

       

      What I am I trying to do:

       

       

      If a User Needs to Delete an Item or a Payment  I need the Page Items to be Updated reflecting what has been Deleted

       

      I got this Message from John_Snyders_Oracle.... I am Reposting in Respect of Johns Time as I'm sure he his extremely busy.......Wanted to see if someone else could chime in

       

      I am unsure how to "Invoke Action Selection-Delete"   or How to Call the Javascript Code that Loops through the Columns to Add up the Totals and Set Total of Page Items  referenced above"

      You say that you want to get rid of the row actions button and use the Delete Payment button. When the button is pressed just delete the selection by invoking action selection-delete and then calling your code that loops over the model adding the total payment. The loop should already be skipping deleted records as is done in the code above by using && !meta.deleted."

       

       

      Things to Note:

       

      I have both Grids Manipulated to Show only  a  Add / and Delete Buttons in the Toolbar Through  Javascript Code in the Attributes of both Grids

       

      Here is the Code:

       

       

      function(config) {  
          config.toolbarData = [  
              {  
                  groupTogether: true,  
                  controls: [  
                      {  
                         type:      "BUTTON",  
                          action:   "selection-add-row",  
                          label:    "Add Payment",  
                          icon:     "fa fa-plus",  
                          labelkey: "Add Payment Type",  
                          iconBeforeLabel: true  
                      },  
                      {  
                          type:   "BUTTON",  
                          action: "selection-delete",  
                          label:  "Delete Payment",  
                          icon:   "fa fa-minus",  
                        //  hot:false,  
                          iconBeforeLabel: true  
                      }  
                 ]  
              }  
          ];  
          return config;  
      }  
      

       

       

      Here is the Code from the  IG Cookbook that works:  Being this is the part that I Believe is doing the Update of Grid 

       

       alert('IGCookBook Code ?');  
      // create a private scope where $ is set to apex.jQuery  
      (function($) {  
          // This is the function that calculates over all the rows of the model and then  
          // updates something else.  
          // Change this to do whatever calculation is needed.  
          // Call this whenever the model data changes.  
          function update(model) {  
              var salKey = model.getFieldKey("PAYMENT_AMOUNT"),   
                  total = 0;  
        
        
              console.log(">> starting PAYMENT_AMOUNT column")  
              model.forEach(function(record, index, id) {  
                  var extendedprice = parseFloat(record[salKey], 10),  // record[salKey] should be a little faster than using model.getValue in a loop  
                      meta = model.getRecordMetadata(id);  
        
        
                  if (!isNaN(extendedprice) && !meta.deleted && !meta.agg) {  
                      total += extendedprice;  
                  }  
              });  
              console.log(">> setting sum PAYMENT_AMOUNT column to " + total)  
              $s("P2_PAYMENTS_TOTAL", total);  
          }  
      alert('A');  
          //  
          // This is the general pattern for subscribing to model notifications  
          //  
        
        
          // need to do this here rather than in Execute when Page Loads so that the handler  
          // is setup BEFORE the IG is initialized otherwise miss the first model created event  
          $(function() {  
              // the model gets released and created at various times such as when the report changes  
              // listen for model created events so that we can subscribe to model notifications  
              $("#payments").on("interactivegridviewmodelcreate", function(event, ui) {  
                  var sid,  
                      model = ui.model;  
        
        
                  // note this is only done for the grid veiw. It could be done for  
                  // other views if desired. The imporant thing to realize is that each  
                  // view has its own model  
                  if ( ui.viewId === "grid" ) {  
                      sid = model.subscribe( {  
                          onChange: function(type, change) {  
                              console.log(">> model changed ", type, change);  
                              if ( type === "set" ) {  
                                  // don't bother to recalculate if other columns change  
                                  if (change.field === "PAYMENT_AMOUNT" ) {  
                                      update( model );  
                                  }  
                              } else if (type !== "move" && type !== "metaChange") {  
                                  // any other change except for move and metaChange affect the calculation  
                                  update( model );  
                              }  
                          },  
                          progressView: $("#P2_PAYMENTS_TOTAL") // this will cause a spinner on this field  
                      } );  
                      // if not lazy loaded there is no notification for initial data so update  
                      update( model );   
                      // just in case fetch all the data. Model notifications will  
                      // cause calls to update so nothing to do in the callback function.  
                      // can remove if data will always be less than 50 records  
                      model.fetchAll(function() {});  
                  }  
              });  
        
        
          });  
        
        
      })(apex.jQuery); 
      

       

       

       

      Here is the JS Code I'm Using in Dynamic Actions   (Not at Page Level in Function and Global Variable Declaration Section ..... Could Not get it to work)

       

      //alert('Beginning of CalcPaymentAmountOnChange');  
      var model = apex.region("payments").widget().interactiveGrid("getViews", "grid").model;  
      var PaymentsTotal = model.getFieldKey("HIDDEN_PAYMENT_AMOUNT");  
      //var PaymentsTotal = model.getFieldKey("PAYMENT_AMOUNT");  
      var totamt = 0;  
        
        
         console.log(">> starting sum PAYMENT_AMOUNT column")  
         model.forEach(function(r) {  
                
            var payAmt = (r[PaymentsTotal]);  
            var payAmtnum = parseFloat(payAmt.replace(/\,/g,''));  
              
      //alert('payAmtnum ' + payAmtnum );  
            recId = r[model.getFieldKey("ROWID")];  
           // alert('after ' + recId);  
            isDeleted = model.getRecordMetadata(recId).deleted;  
            if (typeof(isDeleted) == 'undefined') {  
              //  alert('deleted row');  
                isDeleted = false  
            };  
        
        
        
        
            if (!isNaN(payAmtnum) && !(isDeleted)) {  
             //alert('add inside if ' + payAmtnum);    
                            
              totamt += payAmtnum;  
              //  alert('After ' + payAmtnum);  
                 
             }   
        
        });  
            //apex.item('P64_PAYMENTS_TOTAL').setValue(totamt);  
            console.log(">> setting sum PAYMENT_AMOUNT column to " + totamt)  
            //$s('P64_HIDDEN_PAYMENTS_TOTAL',totamt);   
            $s('P64_PAYMENTS_TOTAL',totamt);  
      

       

        This part of the Code above is what is  Supposed to Look Through Code and Not Include Amounts in Total Summation Calculation

       

      recId = r[model.getFieldKey("ROWID")];  
           // alert('after ' + recId);  
            isDeleted = model.getRecordMetadata(recId).deleted;  
            if (typeof(isDeleted) == 'undefined') {  
              //  alert('deleted row');  
                isDeleted = false  
            };  
            if (!isNaN(payAmtnum) && !(isDeleted)) {  
             //alert('add inside if ' + payAmtnum);    
        
       totamt += payAmtnum;  
              //  alert('After ' + payAmtnum);  
      

       

       

      If there are any more Details Needed to Help Solve this Problem please let me know

       

      Respectfully,

       

      DSTeele41

        • 1. Re: Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item
          DSteele41

          John Snyders-Oracle

           

          John Changed the Compatibility to 5.0 in my Apex.Oracle.com.... where I replicated  and This Code from IG Cookbook Works still (Below)
          But Does Not Work in Our Version of APEX  5.1.0.00.45.... 

           

          --------------------------------------------------------------------------------

           

          alert('IGCookBook Code ?');

          // create a private scope where $ is set to apex.jQuery

          (function($) {

              // This is the function that calculates over all the rows of the model and then

              // updates something else.

              // Change this to do whatever calculation is needed.

              // Call this whenever the model data changes.

              function update(model) {

                  var salKey = model.getFieldKey("PAYMENT_AMOUNT"),

                      total = 0;

           

           

                  console.log(">> starting PAYMENT_AMOUNT column")

                  model.forEach(function(record, index, id) {

                      var extendedprice = parseFloat(record[salKey], 10),  // record[salKey] should be a little faster than using model.getValue in a loop

                          meta = model.getRecordMetadata(id);

           

           

                      if (!isNaN(extendedprice) && !meta.deleted && !meta.agg) {

                          total += extendedprice;

                      }

                  });

                  console.log(">> setting sum PAYMENT_AMOUNT column to " + total)

                  $s("P2_PAYMENTS_TOTAL", total);

              }

          alert('A');

              //

              // This is the general pattern for subscribing to model notifications

              //

           

           

              // need to do this here rather than in Execute when Page Loads so that the handler

              // is setup BEFORE the IG is initialized otherwise miss the first model created event

              $(function() {

                  // the model gets released and created at various times such as when the report changes

                  // listen for model created events so that we can subscribe to model notifications

                  $("#payments").on("interactivegridviewmodelcreate", function(event, ui) {

                      var sid,

                          model = ui.model;

           

           

                      // note this is only done for the grid veiw. It could be done for

                      // other views if desired. The imporant thing to realize is that each

                      // view has its own model

                      if ( ui.viewId === "grid" ) {

                          sid = model.subscribe( {

                              onChange: function(type, change) {

                                  console.log(">> model changed ", type, change);

                                  if ( type === "set" ) {

                                      // don't bother to recalculate if other columns change

                                      if (change.field === "PAYMENT_AMOUNT" ) {

                                          update( model );

                                      }

                                  } else if (type !== "move" && type !== "metaChange") {

                                      // any other change except for move and metaChange affect the calculation

                                      update( model );

                                  }

                              },

                              progressView: $("#P2_PAYMENTS_TOTAL") // this will cause a spinner on this field

                          } );

                          // if not lazy loaded there is no notification for initial data so update

                          update( model );

                          // just in case fetch all the data. Model notifications will

                          // cause calls to update so nothing to do in the callback function.

                          // can remove if data will always be less than 50 records

                          model.fetchAll(function() {});

                      }

                  });

           

           

              });

           

           

          })(apex.jQuery);

          • 2. Re: Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item
            DSteele41

            Please Forgive me.. Trying to be Patient. Could Someone Chime in on this Please

             

            Basically Need to know how to reference the "Delete Payment" Button that is in the Toolbar.. that When it is Pushed to update the Page Item that Totals the Columns  ( Payments Total).

             

            Payments Total should show Reduced Amount when and if a Payment is Deleted with "Delete Payment"  Button

             

            Respectfully,

             

            DSteele41

            • 3. Re: Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item
              DSteele41

              Mahmoud_Rabie

               

              Good Day Mr. Rabie,

               

              First, Thank You for accepting my Friend Request for this Oracle Community.

               

              I have been trying to resolve this issue  (above) for almost a few weeks....

              Could you please attempt to help me on this..... I am more than Happy to Clarify anything that may need Clarifying.

               

              Respectfully,

               

              DSteele41

              • 4. Re: Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item
                Mahmoud_Rabie

                Hi DSteele41

                 

                Once I find a time, I will attempt to solve it.

                 

                Now, I am extremely busy on other projects.

                 

                Regards

                Mahmoud

                • 6. Re: Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item
                  DSteele41

                  I have a Solution for this and will Replicate in my APEX.ORACLE.COM  Replicated Page

                   

                  Regards,

                   

                  DSteele41

                  • 7. Re: Invoke Action:  selection-delete  When Button Pressed and Update Accumulated Page Item
                    DSteele41

                    John Snyders-Oracle

                    Mahmoud_Rabie

                     

                    Here is the Jist of the Solution

                     

                    I have my Page I'm working on Replicated in  My  APEX.Oracle.com  Workspace ;  and am using Code from the IG Cookbook that works and does exactly what I need it to do.  but again we are on  5.1.0.....

                     

                    https://apex.oracle.com/pls/apex/f?p=4550:1:1666570127918:::::

                     

                    Workspace:       STEELE41_APEX_ORACLE

                     

                    USERNAME:    ORACLE_USER

                     

                    PW:                  Pa$$word123

                     

                    Application:   Receipt_Log_Multiple_Payments  (56585)  --->   Page 2

                     

                    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                    **  This is in the Attributes of Each IG to manually Configure Toolbar

                    **  The option to  "Insert"  Syntax Highlighting  Not Available when I choose  "Reply to Original Post"  here

                     

                    function(config) {

                        config.toolbarData = [

                            {

                                groupTogether: true,

                                controls: [

                                    {

                                        type:     "BUTTON",

                                        name:     "add-row",

                                        action:   "selection-add-row",

                                        label:    "Add Item",

                                        icon:     "fa fa-plus",

                                        labelkey: "Add Payment Type",

                                        iconBeforeLabel: true

                                    },

                                    {

                                        type:     "BUTTON",

                                        action:   "delete-row",

                                        label:    "Delete Item",

                                        icon:     "fa fa-minus",

                                        labelkey: "Delete Payment Type",

                                        //  hot:false,

                                        iconBeforeLabel: true

                                    }

                                ]  

                                   

                             }

                            /*,      

                             {

                                       align: "end",

                                       controls: [

                                      {

                                        type: "BUTTON",

                                        action: "reset-report",

                                        labelkey: "APEX.IG.RESET",

                                        //state:    "always-enabled",

                                        iconBeforeLabel: true

                                      } 

                                 ]

                             }

                             */

                      ]; 

                       

                           config.initActions = function(actions) {

                           actions.add([{

                               

                                     name: "add-row",

                                     action: function(event, focusElement) {

                                          apex.region('grdRcptLog').widget().interactiveGrid("getActions").invoke("selection-add-row");

                                     var lResult = getRcptLogLines();

                                       

                                   },

                                  

                                    name: "delete-row",

                                    action: function(event, focusElement) {

                                          apex.region('grdRcptLog').widget().interactiveGrid("getActions").invoke("selection-delete");

                                     var lResult = getRcptLogLines();

                                       

                                   }

                                }]

                            );

                        };

                         

                        return config;

                    }

                     

                    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                    .invoke("selection-delete");  and .invoke("selection-add-row")    &  Calling  Code at Page Level under  Function and Global Variable Section

                    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                     

                    function getRcptLogLines() {

                    var model = apex.region("grdRcptLog").widget().interactiveGrid("getViews", "grid").model;

                    var EtotalKey = model.getFieldKey("HIDDEN_EXTENDED_PRICE");

                    //var EtotalKey = model.getFieldKey("EXTENDED_PRICE");

                    var totamt = 0;

                      model.forEach(function(r) {

                        //var eamt = parseFloat(r[EtotalKey], 10); //get rid of the base (10) argument it only applies to parseInt not parseFloat.

                        

                          var eamt = (r[EtotalKey]);

                          //alert('before ' + eamt);

                          var eamtnum = parseFloat(eamt.replace(/\,/g,''));

                     

                     

                          recId = r[model.getFieldKey("LINE_ID")];

                          isDeleted = model.getRecordMetadata(recId).deleted;

                          if (typeof(isDeleted) == 'undefined') {

                              isDeleted = false

                          };

                         

                           if (!isNaN(eamtnum) && !(isDeleted)) {

                                            

                            totamt += eamtnum;

                            //alert('After ' + eamtnum);

                            

                           }

                     

                     

                      });

                    console.log(">> setting sum EXTENDED_PRICE column to " + totamt)

                     

                    //alert('Subtotal '+ totamt);

                    $s('P64_SUBTOTAL_HIDDEN',totamt);

                    //alert('Subtotal '+ totamt);

                    //$s('P64_SUBTOTAL',totamt);

                    }