13 Replies Latest reply: Jan 26, 2009 12:04 PM by 614588 RSS

    OnClick Event on Standard Report/Tabular Form Row

    614588
      Hi All

      We have complex requirements and would need your help here.In the Application( referred below on OTN), we need the following:

      Whenever User clicks anywhere on any row, the values in the Disabled Text fields(or we may chnage to disabled Text Areas if required) in the region at the bottom should come from the corresponding columns of the Row clicked. e.g. When User clicks anywhere on the row with Empid as 1, the disabled text fields should show Empname as "Ravijeet" and Departmentname as "Coprorate Application".


      Application Reference:
      URL: [http://apex.oracle.com/pls/otn/f?p=12190:3]
      workspace: VCS
      Userid: *************
      password: ***************

      Please let us know.

      Regards
      Ravijeet

      Edited by: Ravijeet on Jan 26, 2009 10:02 AM
        • 1. Re: OnClick Event on Standard Report/Tabular Form Row
          ATD
          Hi Ravijeet,

          Have a look now.

          I've created a Row Template for the report that uses the following defintions:

          Before Rows:
          <table>
          <tr>
          <td> </td>
          <td><b>Empid</b></td>
          <td><b>Empname</b></td>
          <td><b>Salary</b></td>
          <td><b>Departmentid</b></td>
          <td><b>Departmentname</b></td>
          </tr>
          Row Template 1:
          <tr onclick="javascript:passValues('#4#','#7#');">
           <td>#1#</td>
           <td>#3#</td>
           <td>#4#</td>
           <td>#5#</td>
           <td>#6#</td>
           <td>#7#</td>
          </tr>
          Note that #1# refers to the first column in the SQL, #2# is the second column etc. empname is #4# and departmentname is #7# - so these are the ones used in the javascript.

          After Rows:
          </table>
          And on the page's HTML Header setting:
          <script type="text/javascript">
          function passValues(ename, dname)
          {
           $x('P3_EMPNAME').value = ename;
           $x('P3_DEPARTMENTNAME').value = dname;
          }
          </script>
          Note that I have also added a dummy field to the end of the report's SQL. This has been done because the EMPID hidden field gets added to the end of the last displayed field - in this case, the departmentname field and you don't want this included in the data passed to the bottom fields. The Row Template, however, does not include this column, so this dummy field will not show on the page.

          Andy
          • 2. Re: OnClick Event on Standard Report/Tabular Form Row
            Roel
            Hello Ravijeet,

            Looking at your application it seems you already solved this yourself...

            Greetings,
            Roel

            http://roelhartman.blogspot.com/
            http://www.bloggingaboutoracle.org/
            http://www.logica.com/
            • 3. Re: OnClick Event on Standard Report/Tabular Form Row
              614588
              Hi Andy,

              Many Thanks for your effort & valuable time, Your solution works like charm & we really appreciate the help provided ,going extra miles to even to do the chnages to help us out, but we need the following features too:

              1) The formatting of Report ( Column Header & Report rows) to be like as it comes through "STANDARD or STANDARD(PPR)" Report Template.

              2) I was not able to do any update on the salary filed, looks like MRU is not getting fired.

              3) When I change the field type, say for "Department Name" column to "Text Area or Text field" it breaks completely.

              Do we have some way around to change the 'standard' or 'Standard (PPR)' Report Template itself to invoke the Javascript on the Page ,whenever we click anywhere on any row of the report? If This is done,its going to resolve all the requirements we have.

              HI Roel,
              Changes and Fixes have been done by Andy, to help us.

              Thanks and Regards
              Ravijeet
              • 4. Re: OnClick Event on Standard Report/Tabular Form Row
                614588
                HI Andy

                was just wondering if we can call Javascript from TR tag of "Standard" or "Standrad(PPR)" Report template, pass Rownum and can grab the column values of the row clicked?

                Would it be possible?

                Thanks and Regards
                Ravijeet
                • 5. Re: OnClick Event on Standard Report/Tabular Form Row
                  ATD
                  Hi,

                  OK - I've created a new Report Template based on a copy of the Standard PPR template. The only thing I've changed is the Before Each Row setting:

                  Was:
                  <tr #HIGHLIGHT_ROW#>
                  Changed to:
                  <tr #HIGHLIGHT_ROW# onclick="javascript:passValues(this);">
                  The javascript code on the page's HTML Header is now:
                  function passValues(r)
                  {
                   var d = r.getElementsByTagName("TD");
                   var k;
                   if (d)
                   {
                    for (k = 0; k < d.length; k++)
                    {
                     if (d[k].headers == 'Empname')
                     {
                      $x('P3_EMPNAME').value = d[k].firstChild.nodeValue;
                     }
                     if (d[k].headers == 'Departmentname')
                     {
                      $x('P3_DEPARTMENTNAME').value = d[k].firstChild.nodeValue;
                     }
                    }
                   }
                  }
                  Check the functionality now.

                  There is no need to identify a row number - using "this" identifies the current row and the code just retrieves data from that row.

                  In answer to your questions/requirements:

                  1 - OK - see above
                  2 - This should now be working
                  3 - Changing the field type will affect how javascript can get to the data. The above assumes that the data is just text within a TD tag. If this changes, you can update:
                  d[k].firstChild.nodeValue
                  to
                  d[k].firstChild.firstChild.nodeValue
                  By changing the object type, you are changing the TAG structure and as the javascript code uses this structure to get to the data, it must be changed as well.

                  Andy
                  • 6. Re: OnClick Event on Standard Report/Tabular Form Row
                    614588
                    Hi Andy

                    Many Thanks as usual for your great help, people like you inspire to work on the Application more & more... The Application works like a charm, understood the concept of TAG Structure which I would always use in future.

                    Have one more requirement pending:

                    If I Hide the column "Departmentname" from Tabular Form ,since i dont want to show this field at the report level(by unchecking the show field or making the field type as hidden), I see that P3_DEPARTMENTNAME doesn't get populated on click of the row & tried to understand the reason.Whenever we do this, No TAG gets generated for this column (Hidden columns) and hence the corresponding field in the last region "P3_DEPARTMENTNAME" doesn't get populated as the Java script conditions fails in this case.

                    How can we generate these Tags despite the field not being shown on the report or some other way around?
                    I am expecting you must have some trick for this too :-)

                    Thanks again.

                    Regards,
                    Ravijeet
                    • 7. Re: OnClick Event on Standard Report/Tabular Form Row
                      ATD
                      Hi,

                      If we were using a Row Template, we could add style="display:none" into the TD tags for the column(s) we want to hide.

                      In your case, we're using a Column Template, so we can't do this (you can hide the data but not the column headings).

                      So, I've added the following into your report's Region Footer:
                      <script type="text/javascript">
                      function hide(coltohide) {
                      var t = document.getElementById("report_#REGION_ID#");
                      var r = t.getElementsByTagName("TABLE")[0];
                      var rows = r.rows;
                      var k;
                      for (k = 0; k < rows.length; k++)
                      {
                       rows[k].cells[coltohide].style.display = 'none';
                      }
                      }
                      hide(2);
                      hide(5);
                      hide(6);
                      </script>
                      This will loop through the rows and hide columns 3, 6 and 7 (column numbers are zero-based). As the hide(2) etc instructions are not within a javascript function, they will run automatically as soon as this code is reached during the page load by the browser. Additionally, Apex will replace #REGION_ID# with the appropraite ID for your region, and as this ID is also shown in the report template, the javascript will know which report to work on.

                      Andy
                      • 8. Re: OnClick Event on Standard Report/Tabular Form Row
                        614588
                        Hi Andy

                        This worked again like a charm,Many thanks again as usual for your valuable time and resolving the issues.
                        This meets our requirement.Even the Performance looks good on the actual application and this along with any browser dependency should not be an issue, please correct me If I am wrong.

                        Was just thinking, if we can highlight the first row when ever Page loads so that the values in the fields P3_EMPNAME & P3_DEPARTMENTNAME are never null and whenever we load this page (or refresh when filter is not on Primary key and returns more than 1 row) the values in the fields P3_EMPNAME & P3_DEPARTMENTNAME are as per the first row of the tabular form (even if the row is not highlighted).

                        Would it be possible?

                        Thanks again!

                        Regards,
                        Ravijeet
                        • 9. Re: OnClick Event on Standard Report/Tabular Form Row
                          ATD
                          Hi Ravijeet,

                          Yes, it's possible. I've updated your page to do this.

                          The report's Region Footer now contains:
                          <script type="text/javascript">
                          var t = document.getElementById("report_#REGION_ID#");
                          var r = t.getElementsByTagName("TABLE")[0];
                          function hide(coltohide) 
                          {
                            var rows = r.rows;
                            var k;
                            for (k = 0; k < rows.length; k++)
                            {
                              rows[k].cells[coltohide].style.display = 'none';
                            }
                          }
                          hide(2);
                          hide(5);
                          hide(6);
                          </script>
                          which is only a slight change - we need the variables t and r to be global, so I have moved them outside of a function block.

                          In your Display region's Report Footer, I have added:
                          &ltscript type="text/javascript">
                          passValues(r.rows[1]);
                          &lt/script>
                          This uses the r variable to get to the second row (the first one that contains data as the first one contains the headings - and row numbers are also zero-based, hence [1] above) and we just call the same function to populate the fields. This code has to be here as it needs to be underneath the fields that are being populated. As this is a separate region from the report, we need to be able to get to the report region's ID, hence making the t and r variables global as the report region's ID is then available to this region as well.

                          Andy
                          • 10. Re: OnClick Event on Standard Report/Tabular Form Row
                            614588
                            Hi Andy,

                            Thanks again as usual for your valuable time and inputs, this too worked perfectly fine as usual :-)

                            One thing I missed Yesterday :

                            1) a) In all cases when ever the Page loads (or refreshes based on filter) the display items P3_EMPNAME
                            & P3_DEPARTMENTNAME in the last bottom Region would have Values as per the First row of the Tabular
                            Form, which we achieved yesterday.
                            But in case we do 'SUBMIT' the page via "Submit" button to change value of salary field, the display items P3_EMPNAME & P3_DEPARTMENTNAME should have value as per the last row clicked i.e. in which salary value was changed.

                            b) I am supposed to Focus the cursor by default on the salary field, which i tried to do using your reply
                            on other thread : Tabular form - initially position the cursor on a given field

                            Since we would not have to add any Row in tabular form so I removed the inner 'If' condition to setfocus always on first row's corresponding column (I saw certain problem in using arrow left and arrow right key,but this is minor problem).
                            Extra requirement is that in case some other Row's Salary field has been changed and "submit" button is pressed then cursor should focus on the salary field of that row after submit.
                            (like Displayed items in last region should be of row canged in case a above).



                            We have few other really complex Requirements and have updated corresponding old threads on OTN (still open) :

                            1) In the Tabular Form Users want to navigate in the "salary" field of our tabular form,
                            use the Keyboard Keys "Arrow Up" or "Enter" to go to the salary field of the previous Row and "Arrow Down"
                            to go to the salary field of the Next Row.

                            Came across this thread, but could not get the complete code since would have to download complete ApexLib Framework:

                            screen (behavior expected/required): http://apex.oracle.com/pls/otn/f?p=33231:52:4145765023028237::NO:::
                            Thread: Use navigation keys in tabular form

                            2) Scrollable Region with Constant Header would be also required, since in our case Tabular form would always have
                            number of records more than can be displayed on one window screen.
                            First I tried doing by putting in Tabular Report's Regions's Header: <div style="height:100px;overflow-y:scroll;">
                            and footer : </div>
                            This is the only change I did to our application on OTN, not to disturb it :-)
                            As you see that as we drag the scroll bar below, column headers get hidden as they also move up.Requirement is to keep it constant.
                            Went through the following thread discusses by so many People , but there is still no solution workable for all Browsers: How to implement fixed column headers

                            Applied the solution provided for all browsers as per the thread,Column headers get really distorted.


                            Users & I Prefer to have Scrollable region rather then having Pagination links (Noticed yesterday
                            on my local application that in case we put pagination link our Java script to hide the extra columns in tabular report
                            like 'XXX' OR 'Department Name' fails,which we grab to display in last region's displayed items, become visible).

                            I know its more than enough questions on this thread. The thread is well answered by You with
                            multiple correct solutions as per my all questions till now, but users Requirement Need all of these.
                            I also know that if these are possible in APEX ,You would have the best idea.

                            Have also updated the other threads ,mentioned above.

                            Please suggest, if these would be possible?

                            Many Thanks again as usual for all your valuable time and solutions provided.

                            Regards
                            Ravijeet
                            • 11. Re: OnClick Event on Standard Report/Tabular Form Row
                              ATD
                              Hi,

                              I'll leave it to others to respond to the other threads - I'm sure there's answers for them though.

                              For you SAL focus requirements, I have created a new hidden page item called P3_SAL which will hold the ID for the last used Salary field. This is then populated using the javascript in the HTML Header setting:
                              function passValues(r)
                              {
                               var d = r.getElementsByTagName("TD");
                               var k;
                               if (d)
                               {
                                for (k = 0; k &lt d.length; k++)
                                {
                                 if (d[k].headers == 'Empname')
                                 {
                                  $x('P3_EMPNAME').value = d[k].firstChild.nodeValue;
                                 }
                                 if (d[k].headers == 'Departmentname')
                                 {
                                  $x('P3_DEPARTMENTNAME').value = d[k].firstChild.nodeValue;
                                 }
                                 if (d[k].headers == 'Salary')
                                 {
                                  var s = d[k].getElementsByTagName('INPUT');
                                  if (s)
                                  {
                                   $x('P3_SAL').value = s[0].id;
                                  }
                                 }
                                }
                               }
                              }
                              Now, to ensure that we retain the information in the displayed fields and reselect the last used Salary field, the code that is in the last Region Footer needs to be updated to:
                              &ltscript type="text/javascript"&gt;
                              var s;
                              if ($v('P3_EMPNAME') == '') 
                              {
                               passValues(r.rows[1]);
                               s = 'f03_0001';
                              }
                              else
                              {
                               s = $v('P3_SAL');
                              }
                              var sal = document.getElementById(s);
                              if (sal)
                              {
                               sal.focus();
                              }
                              &lt/script&gt;
                              Andy
                              • 12. Re: OnClick Event on Standard Report/Tabular Form Row
                                614588
                                Hi Andy

                                Many Thanks again, it worked as usual.

                                In My Local Application (Not on OTN,just not to disturb it) , I just created one more hidden item on page, assigned it the value of request from the process executed by 'Submit' button and used that as condition in Last Region's Report Footer javascript for checking where the focus should be , since in earlier case when we were checking on basis of P3_EMPID and when i was selecting some particular employee id from LOV, the cursor focus and displayed value on last region were coming as per the first row.Same technical concept as you put before, this has been very useful for me.The thread is completely resolved now.

                                I am still waiting for others to respond to the two problems of getting scrollable region with Constant header & navigating using Arrow up and Arrow down key in tabular form,Have updated the threads again since no one responded. Looks like this too would need your intervention, whenever you get time.

                                Thanks again for your help!

                                Regards,
                                Ravijeet
                                • 13. Re: OnClick Event on Standard Report/Tabular Form Row
                                  614588
                                  Hi Andy

                                  Firstly Thanks for helping on various threads, looks like I am surrounded by requirements, but most of them got/getting resolved with your valuable suggestions :-)

                                  As per discussion above, I noticed above that (keeping apart constant column headers report with scrollable region),
                                  if I try to use Pagination the hidden columns of tabular report become visible that means that the javascript in the Report Footer to hide the extra columns we have fetched for display items are not getting fired.
                                  What can be solution for this Andy?

                                  I am asking this since If we dont get solution for fixed column headers to Users we would use pagination.

                                  Regarding the two issues mentioned above for other threads:

                                  1) Arrow up & Down key Navigation => Resolved, put comments and questions for you in the thread:
                                  Use navigation keys in tabular form

                                  2) Constant Headers for tabular Report with scrollable region in the thread:
                                  Re: How to implement fixed column headers

                                  Have updated the thread, the solution provided there is just amazing & it would work as per the threads requirement , as usually any solution provided by you :-).
                                  But it would fail in our case, since we would have different region / report ids here, which we have used to hide the columns as discussed before in this thread and secondly in passing the row values when key up or down is pressed as per the thread :
                                  Use navigation keys in tabular form

                                  & also alternatively Pagination is also not working.



                                  Please suggest

                                  Many Thanks again for all your valuable time as usual.

                                  Regards
                                  Ravijeet

                                  Userid and passwords related to otn application changed...

                                  Edited by: Ravijeet on Jan 26, 2009 10:03 AM