6 Replies Latest reply on Jan 9, 2019 1:54 PM by Franck N

    How to update page items with IG row values upon row selection

    BillUK

      Hi,

       

      I have an IG on a page and also some page items. When a row is selected in the IG, I would like to update the page items using some of the values in the row from the IG.

       

      i.e. I have a Master-Detail setup configured and when I click on the Master IG, I would like to populate some page items which sit above the Detail IG as a sort of header info area with some of the values from the row.

       

      Could someone please kindly explain how I can achieve this or point me in the direction of examples/posts where this has been achieved please?

       

      From reading around, it seems that I need to use DAs with the selection change event on the IG and get a handle on the selected row and then read the row values and populate the page items accordingly, but my understanding is weak in this area as I'm a novice with DAs.

       

      Appreciate any assistance with this.

       

      EDIT: this is on v18.2.

       

      Regards

        • 1. Re: How to update page items with IG row values upon row selection
          Jorgelina1

          Hi there!!

           

          Here is my best contribution to you:   https://github.com/mgoricki/orclapex-ig-cheat-sheet   (done by the amazing Marko Gorički)

           

          There is a section:

          Interactive Grid Events

          • interactivegridviewmodelcreateexplanation and example here
          • interactivegridviewchange
          • interactivegridcreate
          • interactivegridreportsettingschange
          • interactivegridselectionchange
          • interactivegridsave

           

          You can create a DA based on the regions that is the Interactive Grid (or IG) and select a custom event, this to be the  intearctivegridselectionchange

          Then there you can create a javascript action... to fire things like:

           

          apex.region("emp").call("getViews","grid").view$.grid("getSelectedRecords")    (beware - if you are using Apex 5.x you will need to use apex.region("emp").widget().interactiveGrid("getViews", "grid") ... etc)  ... and this being "emp" the static region ID for your IG region.

           

          You should be sure that only one row can be selected any time.

          In the documentation you will find lots of scripts of "how to do things", for getting the values into an apex item, you would have to script something like (I have not been able to test it, but if any errors, something like this would be the way to go):

           

          var view$ = apex.region("emp").call("getViews", "grid");

          var record = view$.grid("getSelectedRecords") [0];

          apex.item("My_item_for_field1").setValue(view$.model.getValue(record, "FIELD1");

          apex.item("My_item_for_field2").setValue(view$.model.getValue(record, "FIELD2");

           

          The documentation contains a lot ... A LOT of things you could do (and also the base ideas to do even more complex things), like for instance, instead of using a selection, being able to click on an icon (set on a column) to do the same thing, and coloring the background of the line so it is clear to the user that is the one "selected".

          If you are not very used to jscript, just open up the browser with your apex app and report, hit F12 (with this you open a developer tool from the browser), and get to the "Console" section (all of them have one), you can then, there, type these lines of jscript one by one, and execute them, in order to see what it does...  select one row, and see what a :

          apex.region("IGREGION").call("getViews", "grid").grid("getSelectedRecords")[0] 

          does, so you can understand better what is the jscript that is best for you.

           

          Regards.

          • 2. Re: How to update page items with IG row values upon row selection
            Franck N

            Hi,

             

            Basically you need something like this demo.

             

            for that indeed you need a DA of type: Selection Change[Interactive grid]

            execute JS Code :

             

            //This is the delimiter
            var i, selectedIds = ":",
                model = this.data.model;
            
            for ( i = 0; i < this.data.selectedRecords.length; i++ ) {
            //here you fetch the records of the column you want to pass to the ITEM
                selectedIds += model.getValue( this.data.selectedRecords[i], "ENAME") + ":";
            }
            
            //your item to be set on click in the IG
            $s("P6_SELECTED", selectedIds);
            //apex.region("barchart").refresh();
            

            regards,

            Franck

            • 3. Re: How to update page items with IG row values upon row selection
              BillUK

              Hi,

               

              Many thanks for your swift responses and valuable advice.

               

              I'm not sure but my original post might have been misleading so I just wanted to double check that we're on the same page. In my Interactive Grid there are no row selection checkboxes and users can just click on a row to select it. Therefore, only one row will be selected at a time. It seems the responses cover iterating over rows selected using the row selection checkboxes? (Apologies if that's not the case!). In any case, that is still very useful and I'm bound to hit a requirement related to that scenario soon.

               

              So, does the same concept still apply regardless of whether the selection is by clicking on row selector checkboxes or the actual row itself?

               

              Regards

              • 4. Re: How to update page items with IG row values upon row selection
                Franck N

                Hi,

                selecting your checkbox will basically select the row at the time.

                so it will work also.

                if you do not manage to get it to work. Please provide a sample application online.

                 

                And we could help you through

                • 5. Re: How to update page items with IG row values upon row selection
                  Eslam_Elbyaly

                  Franck N wrote:

                   

                  Hi,

                  selecting your checkbox will basically select the row at the time.

                  so it will work also.

                  if you do not manage to get it to work. Please provide a sample application online.

                   

                  And we could help you through

                  He's saying there are no check boxes. He means "navigating" to a record through clicking any field(cell) of the record by the mouse. Would those solutions work in this case?

                  • 6. Re: How to update page items with IG row values upon row selection
                    Franck N

                    Hi,

                     

                    Eslam_Elbyaly schrieb:

                     

                    He's saying there are no check boxes. He means "navigating" to a record through clicking any field(cell) of the record by the mouse. Would those solutions work in this case?

                    indeed i oversaw the NO. The solution will work regardless of the checkbox sinc it´s based on Row Click.