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.

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.

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.

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

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?

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:

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.

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.

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.

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.