9 Replies Latest reply: Apr 6, 2010 7:20 AM by 653067 RSS

    Printer Friendly Interactive Reports - Hide Search Bar

    631646
      I just found the "Printer Friendly" template and I'm using it when a user wants to print the results of an interactive report. I want the Search Bar to be visible when the user is working with the report, but when they're ready to print the report (Printer Friendly template), I want to hide the Search Bar. I've edited the Printer Friendly template to make it omit the header and footer of the page, but I don't see a way to make it omit the Search Bar. And I also don't see a "Conditional" attribute for the Search Bar when defining the interactive report region on the page. How do I conditionally hide the Search Bar (only when in Printer Friendly mode)?

      Thanks,
      Darrin
        • 1. Re: Printer Friendly Interactive Reports - Hide Search Bar
          631646
          Does anyone know how to hide the Search Bar on an interactive report when a user is ready to print the screen from the browser?

          I have a button on the page that applies the Printer Friendly template then calls the browser print function, but I can't figure out how to hide the search bar. Can it be done by editing the Printer Friendly template? Can it be done programatically through JavaScript? Any other suggestions?

          Thanks,
          Darrin
          • 2. Re: Printer Friendly Interactive Reports - Hide Search Bar
            631646
            It doesn't look like the Printer Friendly template can be configured to do this, so I added javascript to the region footer. This code creates two buttons in the footer: one will hide the interactive report search bar and the other will hide the interactive report control panel (the section that displays current filter settings, etc.). Rather than using these buttons (which are just for illustration), the code can be added to a "Print Report" button on the page which applies the Printer Friendly template and removes the Search Bar all at once.

            <script language="javascript">
            function hide(itemID)
            {
            document.getElementById(itemID).style.display="none"
            }
            </script>

            <input
            type="button"
            value="Hide Search Bar"
            onClick="hide('apexir_TOOLBAR')">

            <input
            type="button"
            value="Hide Control Panel"
            onClick="hide('apexir_CONTROL_PANEL')">
            • 3. Re: Printer Friendly Interactive Reports - Hide Search Bar
              631646
              This is an example of how to add a "Print this Page" button to the top an Interactive Report. This button will hide the Search Bar, the Control Panel and the "Print this Page" button, then open up the Printer window for the user to select the printer and print the page, then unhide everything so the user can continue interacting with the report.

              Add this to the Region Header:


              <script language="javascript">
              function show(itemID)
              {
              document.getElementById(itemID).style.display="block"
              };
              function hide(itemID)
              {
              document.getElementById(itemID).style.display="none"
              }
              </script>

              <input
              type="button"
              id="PrintButton"
              value="Print this page"
              onClick="
              hide('apexir_TOOLBAR');
              hide('apexir_CONTROL_PANEL');
              hide('PrintButton');
              window.print();
              show('PrintButton');
              show('apexir_TOOLBAR');
              show('apexir_CONTROL_PANEL');
              ">
              • 4. Re: Printer Friendly Interactive Reports - Hide Search Bar
                fac586
                Any other suggestions?
                Using a print media style sheet:
                &lt;style type="text/css"&gt;
                @media print {

                /* Interactive report tools */

                .apex_toolbar, .control_panel {
                  display: none;
                }

                /* Unwanted page elements */

                #t17NavBar, #t17Tabs, #t17PageFooter, #style-sheet {
                  display: none;
                }

                }
                &lt;/style&gt;
                in the page HTML Header.
                • 5. Re: Printer Friendly Interactive Reports - Hide Search Bar
                  427660
                  Paul,

                  Interesting tip, thanks for posting that.

                  - Marco
                  • 6. Re: Printer Friendly Interactive Reports - Hide Search Bar
                    631646
                    Paul-
                    Thanks for the great tip. I wasn't familiar with print media style sheets, but this seems like the correct way to do it. I implemented it for our app and it works great. However, do you know how to make it also hide the developer toolbar at the bottom of the screen? I'm talking about the bar that says Home, Edit Page, Create, Session, etc. I tried adding ".htmldbToolbar" to the style sheet, but it didn't cause the developer toolbar to be hidden when printing. Here's the excerpt of what I'm using:

                    .apex_toolbar, .control_panel, .htmldbToolbar {
                    display: none;
                    }


                    Thanks,
                    Darrin
                    • 7. Re: Printer Friendly Interactive Reports - Hide Search Bar
                      fac586
                      Darrin

                      There must be a rule somewhere in the CSS/Javascript, overriding this one. Adding the "!important" directive seems to do the trick:
                      .apex_toolbar, .control_panel, .htmldbToolbar {
                         display: none !important;
                      }
                      • 8. Re: Printer Friendly Interactive Reports - Hide Search Bar
                        631646
                        wow - you're good!!!

                        it worked - thanks!

                        Darrin
                        • 9. Re: Printer Friendly Interactive Reports - Hide Search Bar
                          653067
                          Hello,
                          I am using 10 number theme
                          my code is

                          <style type="text/css">
                          @media print {

                          /* Interactive report tools */

                          .apex_toolbar, .control_panel, .htmldbToolbar {
                          display: none;
                          }

                          /* Unwanted page elements */

                          #t10NavBar, #t10Tabs, #t10PageFooter, #style-sheet {
                          display: none;
                          }
                          }
                          </style>


                          but this code do not hides tabs navigation links etc.. in print preview. What is the reasion

                          Thanks in Advance
                          Avinash.