10 Replies Latest reply on Sep 28, 2016 1:06 PM by partlycloudy

    Inline modal dialog

    partlycloudy

      APEX 5.0.3, Oracle 11.1

       

      fac586 - You helped me with this question a few months back. It works great. Follow up question - For each row in each of the pseudo report regions, I would like to open a inline modal dialog that shows some additional information about the clicked row.

       

      Here is where I am so far

       

      1. I am using Theme 25 (Blue Responsive). So I copied the Modal Dialog page template and Inline Dialog region template from Theme 24 Universal theme

      2. I used the instructions here to setup the classic report on the page with the bind variables which would be passed in from the row clicked

       

      Question: How can I add a link on each row of the pseudo report regions to launch this inline dialog?

       

      Thanks

        • 1. Re: Inline modal dialog
          fac586

          VANJ wrote:

           

          APEX 5.0.3, Oracle 11.1

           

          fac586 - You helped me with this question a few months back. It works great. Follow up question - For each row in each of the pseudo report regions, I would like to open a inline modal dialog that shows some additional information about the clicked row.

           

          Here is where I am so far

           

          1. I am using Theme 25 (Blue Responsive). So I copied the Modal Dialog page template and Inline Dialog region template from Theme 24 Universal theme

          2. I used the instructions here to setup the classic report on the page with the bind variables which would be passed in from the row clicked

           

          Question: How can I add a link on each row of the pseudo report regions to launch this inline dialog?

          A standard declarative Column Link like the Edit "buttons" in the demo?

          • 2. Re: Inline modal dialog
            partlycloudy

            I tried that but couple of problems

            1. Modified report SQL to add (hidden) columns used in the link target and the link column #LINK#

            2. Modified the report template to add TH (with  ) and TD with the #LINK#

            3. The column width is too wide, see  here. Not sure how to tweak the CSS to make the column as wide as the link icon.

            4. The link target was set declaratively but based on the inline modal dialog example above, I gather that the link needs to be triggered using a DA, specify the region as a Affected Region and use this.affectedElements.dialog('open'). Not sure how to pass parameters to the link to set page item values used as bind variables in the report SQL.

             

            Help? Thanks

            • 3. Re: Inline modal dialog
              partlycloudy

              I guess I need to understand the CSS better to effect changes to it. The first column of the pseudo report regions is targeted using the following selector. I am not sure how the 3em affects the layout, does it depend on how many columns are in each region, the overall width of each region, the <section>, etc. Could you please explain? Thanks

               

              .uReport.uReportStandard td:first-child { 
               width: 3em;  
               text-align: center;  
              } 
              
              • 4. Re: Inline modal dialog
                fac586

                VANJ wrote:

                 

                I tried that but couple of problems

                1. Modified report SQL to add (hidden) columns used in the link target and the link column #LINK#

                2. Modified the report template to add TH (with ) and TD with the #LINK#

                3. The column width is too wide, see here. Not sure how to tweak the CSS to make the column as wide as the link icon.

                4. The link target was set declaratively but based on the inline modal dialog example above, I gather that the link needs to be triggered using a DA, specify the region as a Affected Region and use this.affectedElements.dialog('open'). Not sure how to pass parameters to the link to set page item values used as bind variables in the report SQL.

                Include the parameter values as data-* attributes by referencing the required column substitution strings in the link column attributes, and access these through the dataset property in the DA JavaScript.

                I guess I need to understand the CSS better to effect changes to it. The first column of the pseudo report regions is targeted using the following selector. I am not sure how the 3em affects the layout, does it depend on how many columns are in each region, the overall width of each region, the <section>, etc. Could you please explain?

                .uReport.uReportStandard td:first-child { 
                  width: 3em;   
                  text-align: center;   
                }
                

                 

                That rule is an override to give the first column in each table a narrower width than the other columns as it only has to contain a single digit (and the short column header "Week") rather than the potentially wider combination of sign, 4 digits, and decimal point of the other columns.

                 

                To change the width of the link column, give the link column header an HTML id, reference this in the headers attribute of the column data cells, and use an attribute selector in the CSS:

                 

                .uReport.uReportStandard td[headers="POPUP_LINK"] {   
                  width: 1.2em;    
                  text-align: center;    
                }
                
                • 5. Re: Inline modal dialog
                  partlycloudy

                  Include the parameter values as data-* attributes by referencing the required column substitution strings in the link column attributes, and access these through the dataset property in the DA JavaScript.

                  Understood but unlike a regular modal (iframe) the inline modal dialog is a just a region on the page which is made visible using this.affectedElements.dialog('open'). How can I set session state using data-* attributes before the DA triggers the dialog? I am having a hard time finding effective examples.

                  • 6. Re: Inline modal dialog
                    fac586

                    VANJ wrote:

                     

                    Include the parameter values as data-* attributes by referencing the required column substitution strings in the link column attributes, and access these through the dataset property in the DA JavaScript.

                    Understood but unlike a regular modal (iframe) the inline modal dialog is a just a region on the page which is made visible using this.affectedElements.dialog('open'). How can I set session state using data-* attributes before the DA triggers the dialog? I am having a hard time finding effective examples.

                    What type of region and how many parameters are required?

                    • 7. Re: Inline modal dialog
                      partlycloudy

                      It is  a classic report region using 3 bind variables passed in from the row clicked on.

                      • 8. Re: Inline modal dialog
                        partlycloudy

                        OK I think I got it

                         

                        1. Classic report region with Inline DIalog template with Page Items to Submit set to the 3 "key" bind variables used in the SQL query
                        2. Link attributes - class="popup" data-key1="#KEY1#" data-key2="#KEY2" data-key3="#KEY3#"
                        3. DA  on Event = click, jQuery selector = a.popup, affected elements =
                        4. True action with the following Javascript code
                        • $s('P30_KEY1',$(this.triggeringElement).attr("data-key1"));
                        • $s('P30_KEY2',$(this.triggeringElement).attr("data-key2"));
                        • $s('P30_KEY2',$(this.triggeringElement).attr("data-key2"));
                        • this.affectedElements.dialog('open');
                        • b. True action = Refresh the region in #1

                          


                        Thanks for the tip

                        • 9. Re: Inline modal dialog
                          fac586

                          VANJ wrote:

                           

                          OK I think I got it

                           

                          1. Classic report region with Inline DIalog template with Page Items to Submit set to the 3 "key" bind variables used in the SQL query
                          2. Link attributes - class="popup" data-key1="#KEY1#" data-key2="#KEY2" data-key3="#KEY3#"
                          3. DA on Event = click, jQuery selector = a.popup, affected elements =
                          4. True action with the following Javascript code
                          • $s('P30_KEY1',$(this.triggeringElement).attr("data-key1"));
                          • $s('P30_KEY2',$(this.triggeringElement).attr("data-key2"));
                          • $s('P30_KEY2',$(this.triggeringElement).attr("data-key2"));
                          • this.affectedElements.dialog('open');
                          • b. True action = Refresh the region in #1

                          Looks about right, although the parameter values could be accessed directly from the triggering element using the dataset property (this.triggeringElement.dataset.key1 etc), avoiding the overhead of instantiating the same jQuery object three times. I'd also try refreshing the region before opening the dialog (if there's no weirdness from progress spinners), so that the pop-up appears fully formed.

                          1 person found this helpful
                          • 10. Re: Inline modal dialog
                            partlycloudy

                            fac586 wrote:

                             

                            I'd also try refreshing the region before opening the dialog (if there's no weirdness from progress spinners), so that the pop-up appears fully formed.

                             

                            Well, I would need to refresh the region after the page item values are set using $s and before the dialog is opened so I would need to do it in the Javascript code itself using some APEX .refresh API instead of the declarative DA Refresh action but I see your point.

                             

                            Thanks again