5 Replies Latest reply on Sep 23, 2017 1:38 AM by LA County APEX

    How to Display a icon for a text area in IR?

    Sgodavar-Oracle

      I'm using APEX 5.0. I'm creating an interactive report where one of the columns is large text area field. In order to save some real estate, I need to display that area field as "?" icon and when user really wants to see the contents, the user can hover on the question mark icon to  to show the text as floating window or expand the field or show it as pop-up help?. any ideas, thanks.

        • 1. Re: How to Display a icon for a text area in IR?
          LA County APEX

          In the item post text, add the following script:

          <i class="fa fa-question-circle"></i>

          <div id="helpcont"></div>

          ----------

          add the following code to the inline block under the page CSS section:

          .fa-question-circle{

          padding:5px;

          }

          .fa-question-circle:hover{

          cursor:pointer;

          }

          #helpcont{

          display:none;

          position:fixed;

          width:30vw;

          min-height:20vh;

          padding:4px;

          background-color:#fff;

          border:1px solid #aaa;

          box-shadow:1px 3px 3px #848484;

          z-index:9999;

          }

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

          Create a dynamic action Mouse Enter:

          • Selection Type: JQuery Selector
          • JQuery Selector: .fa-question-circle
          • True Action: JavaScript:

                  Code:

          var x = $('.fa-question-circle').offset();

          $('#helpcont').css({'display':'block','top':x.top,'left':(x.left+30)});

          $x('helpcont').innerHTML = 'My help content goes here';

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

          Create a dynamic action Mouse Leave:

          • Selection Type: JQuery Selector
          • JQuery Selector: .fa-question-circle
          • True Action: JavaScript:

                  Code:

                   $('#helpcont').css({'display':'none'});

          • 2. Re: How to Display a icon for a text area in IR?
            Sgodavar-Oracle

            Thank you very much for your help. Almost got it, except, how do I put my IR corresponding report column text in that inner html "'My help content goes here'"?, thanks

            • 3. Re: How to Display a icon for a text area in IR?
              LA County APEX

              You can prefetch the help content into the hidden item. And, supposed your hidden item P1_HELP_CONTENT, replace the My help content goes here with '&P1_HELP_CONTENT.'

              If you use different help content based on the record id, you need to call a javascript function populate the help content into the helpcon div.

              I can give you a bunch of idea that may or may not help. The best way is to create a test case on OTN.

              • 4. Re: How to Display a icon for a text area in IR?
                Sgodavar-Oracle

                thank you very much for your help. Basically, that help column is one of the columns in the report and varies with every record. I need to use different help content based on the record id. could you please provide some help with that?. thanks once again.

                • 5. Re: How to Display a icon for a text area in IR?
                  LA County APEX

                  Request a workspace from here --> https://apex.oracle.com/pls/apex/f?p=4550

                  And create a test case. Try something like:

                  select apex_item.textarea(1,e.PHONE_NUMBER,1,14,'style="text-align:center;"') ||

                            apex_item.hidden(2,e.FIRST_NAME || ' ' ||  e.LAST_NAME,'id="C_' || rownum || '"') ||

                            ' <i id="R_' || rownum || '" class="fa fa-question-circle" onMouseEnter="javascript:hcont(this);" onMouseOut="javascript:$(''#helpcont'').css({''display'':''none''});"></i>' phone_number

                  from tbl

                  ------------JavaScript function

                  function hcont(pThis)

                  {

                      var hc = pThis.id.replace('R','C');

                      var x = $('#'+pThis.id).offset();

                      $('#helpcont').css({'display':'block','top':(x.top-110),'left':(x.left+36)});

                      $x('helpcont').innerHTML = $x(hc).value;

                  }

                  -----------Add the following script to your region Footer Text

                  <div id="helpcont" class="arrow_box"></div>

                  <style>

                  .fa-question-circle{

                  padding:5px;

                  }

                  .fa-question-circle:hover{

                  cursor:pointer;

                  }

                  .arrow_box {

                  display:none;

                  padding:4px;

                  position:fixed;

                  width:30vw;

                  height:14vh;

                  background: #e9ebf2;

                  border: 1px solid #7ab9de;

                  z-index:9999;

                  }

                  .arrow_box:after, .arrow_box:before {

                  right: 100%;

                  top: 90%;

                  border: solid transparent;

                  content: " ";

                  height: 0;

                  width: 0;

                  position: absolute;

                  pointer-events: none;

                  }

                   

                   

                  .arrow_box:after {

                  border-color: rgba(233, 235, 242, 0);

                  border-right-color: #e9ebf2;

                  border-width: 14px;

                  margin-top: -14px;

                  }

                  .arrow_box:before {

                  border-color: rgba(122, 185, 222, 0);

                  border-right-color: #7ab9de;

                  border-width: 15px;

                  margin-top: -15px;

                  }

                  </style>