5 Replies Latest reply: Jul 16, 2014 7:02 AM by Joe R RSS

    Help with Constructing an Inline Link and Style in 4.1.1.00.23

    Joe R

      Version 4.1.1.00.23

       

      Hello,

       

      I need help with constructing an inline link to another page that has to be Modal and adding a STYLE/FONT to the data on the calling page.

       

      I have an Interactive Report that is displaying data (dates) in either Green, Red, or no coloring based on conditions. There is now a request to turn that data into a link to display a Modal window with the details pertaining to the data.

      The query has CASE statements to deal with the various conditions on multiple columns. This code is just for one of the columns. When this gets working I can duplicate the technique to the other conditions and columns.

       

      This is one of the CASE statements with the styling active:

      ...
      ,CASE
          WHEN ( ( ryg.proj_status != 2 AND ryg.proj_status != 4 ) OR TRUNC( SYSDATE ) <= TRUNC( wi_initiation.end_date ) ) THEN 
              TO_CHAR(pg_initiation.pgr_date,'MM/DD/YYYY')
          WHEN ( pg_initiation.status = 'C' AND pg_initiation.pgr_date IS NOT NULL AND TRUNC( wi_initiation.end_date ) IS NOT NULL ) THEN
                 '<span style="width:100%;display:block;weight:bold;background-color: green;">' || TO_CHAR(wi_initiation.end_date,'MM/DD/YYYY') || '</span>'
          WHEN (pg_initiation.pgr_date IS NULL AND TRUNC(SYSDATE) > TRUNC( wi_initiation.end_date )) THEN
                 '<span style="width:100%;display:block;weight:bold;background-color: red;">' || NVL(TO_CHAR(wi_initiation.end_date,'MM/DD/YYYY'),'Past Due') || '</span>'
          WHEN pg_initiation.pgr_date IS NULL OR pg_initiation.status = 'I' OR pg_initiation.status IS NULL OR TRUNC( wi_initiation.end_date ) IS NULL THEN
                 '<span style="width:100%;display:block;weight:bold;background-color: red;">' || NVL(TO_CHAR(wi_initiation.end_date,'MM/DD/YYYY'),'Not Found') || '</span>'
      END initiation
      ...
      

       

      Again, the request is to now make the data, the End Date, a link to a Modal page that will display the details regarding this Date.

      The Modal page will accept 4 parameters to retrieve the correct record and display the information.

       

      This is what I've tried so far, however, I'm only displaying the code from the condition that I've been working with to try to keep this code short. I've been working with the 3rd condition, the one if there's no Date then display 'Past Due'.

      ...
      ,CASE
      ...
          WHEN (pg_initiation.pgr_date IS NULL AND TRUNC(SYSDATE) > TRUNC( wi_initiation.end_date )) THEN
                 '<a href="#" onclick=javascript:modalWin("||portfolio.portfolio_id,ryg.ryg_proj_id,pg_initiation.pdm_phase_id,pg_initiation.status||")>
                  <span style="width:100%;display:block;weight:bold;background-color:red;color:blue">'||NVL(TO_CHAR(wi_initiation.end_date,'MM/DD/YYYY'),'Past Due')||'</span></a>'
      ...
      END initiation
      ...
      

       

      The Javascript for the modalWin function is in the Function and Global Variable Declaration of the Page definition in the Javascript region:

      function modalWin(PORT_ID,RYG_PROJ_ID,PHASE_ID,INIT_STATUS)
      {
          window.showModalDialog("f?p=&APP_ID.:118:&SESSION.:POP:NO::P118_PORTFOLIO_ID,P118_RYG_PROJ_ID,P118_PDM_PHASE_ID,P118_PHASE_GATE_STATUS:" + PORT_ID + "," + RYG_PROJ_ID + "," + PHASE_ID + "," + INIT_STATUS"::","name","dialogWidth:"+screen.availWidth+";dialogHeight:"+screen.availHeight+";scrollbars:yes");
      }
      

       

      I hope I'm clear and someone can help me to get the link working.

      If something isn't clear please let me know!

       

      Thanks,

      Joe

        • 1. Re: Help with Constructing an Inline Link and Style in 4.1.1.00.23
          scott.wesley

          A few points:

           

          1) showModalDialog doesn't seem popular anymore.

          Dev.Opera — Removing showModalDialog from the Web platform

          I can't remember when it was introduced - but there is a region template in theme 25 called "Modal Region" which might be great for your purpose. It's utilised in the sample applications.

          It's one of a number of modal options for APEX. Anything jQuery is probably the 2nd best alternative.

           

          What browser are you using? Are there any javascript errors in your console window?

           

          2) If you're going to repeat the same styling many times then you should use classes.

          .condition_a {

            width:100%;

            display:block;

            weight:bold; /* what's this? */

            background-color: green;

          }

          then apply the class to your component

          class="condition_a"

          This will help minimise the size of your SQL and improve maintainability.

           

          3) You should minimise CSS in your SQL. Utilise your case statement to determine which class to utilise, then use the column "HTML Expression" to formulate your column definition.

          This helps performance and helps mitigate security issues.

           

          Scott

          • 2. Re: Help with Constructing an Inline Link and Style in 4.1.1.00.23
            Joe R

            Scott,

             

            Thank you for replying.

             

            I'm really confused, sorry! This is version 4.1.1.00.23 and an Interactive Report.

             

            The Browsers being used are FireFox (currently 30.0) and Chrome (currently 35.0.1916.153 m).


            2) If you're going to repeat the same styling many times then you should use classes.

            .condition_a {

              width:100%;

              display:block;

              weight:bold; /* what's this? */

              background-color: green;

            }

            then apply the class to your component

            class="condition_a"

            This will help minimise the size of your SQL and improve maintainability.

            Good point. I do have four columns that will need to be set up similar to this.

             

            3) You should minimise CSS in your SQL. Utilise your case statement to determine which class to utilise, then use the column "HTML Expression" to formulate your column definition.

            This helps performance and helps mitigate security issues.

            Since this is an Interactive Report, there is no "HTML Expression" box.

             

            I've installed the Skillbuilders Modal Page Plug-in and I'm trying to get it configured, but I'm having problems with the embedded link in the SQL.

            The color is conditional as posted above.

             

            How would I apply the class for each of the four columns?

             

            I've tried this in the CASE,but I'm getting a "Missing Keyword" error:

            ...
            WHEN (pg_initiation.pgr_date IS NULL AND TRUNC(SYSDATE) > TRUNC( wi_initiation.end_date )) THEN
            '<a onclick="return false;" class="scorecard" href="f?p=&APP_ID.:118:&SESSION_ID.:POP:::P118_PORTFOLIO_ID,P118_RYG_PROJ_ID,P118_PDM_PHASE_ID,P118_PHASE_GATE_STATUS:'||portfolio.portfolio_id,ryg.ryg_proj_id,pg_initiation.pdm_phase_id,pg_initiation.status||"'><font background-color:"red";color:"blue">'||NVL(TO_CHAR(wi_initiation.end_date,'MM/DD/YYYY'),'Past Due')||'</font></a>'
            ...
            

             

            What am I doing wrong?

             

            Thanks,

            Joe

            • 3. Re: Help with Constructing an Inline Link and Style in 4.1.1.00.23
              scott.wesley

              In 4.2.0 I see the HTML Expression property in an IR Column.

               

              Have you watched the tutorial video for the skillbuilders plugin? You should be able to construct a link for the plugin using a more declarative manner.

              You will still flood your SQL shared pool with similar sql statements with this technique.

               

              Your query could be returning 'missing keyword' because of something not included in your snippet, but based on your current technique you do need to build your string in the same way you built your dialog string above

              ...portfolio.portfolio_id||','||ryg.ryg_proj_id...

              • 4. Re: Help with Constructing an Inline Link and Style in 4.1.1.00.23
                fac586

                scott.wesley wrote:

                 

                In 4.2.0 I see the HTML Expression property in an IR Column.

                Introduced (not before time) for IR columns in 4.2. Only available on columns in standard reports in earlier versions.

                • 5. Re: Help with Constructing an Inline Link and Style in 4.1.1.00.23
                  Joe R

                  Scott,

                   

                  Thanks for the help. I got it working.

                   

                  Thanks,

                  Joe