Skip to Main Content
Forums

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Open POPUP with a callout Dynamically

Veerendra PatilMay 19 2021 — edited May 19 2021

Hi,
I am not sure this is possible or not
I am using APEX 20.1
I have a basic cards region. I have an fa-icon link on the card which opens up a popup. I want the popup to open for each card at the position where there is icon
I have set up the example on apex.oracle.com
ws - vpagmws
user - testuser
pwd - xyzXYZ@123
app - 85188 - VP 211
page - 3 - Test Popup Modal open
Here I have 2 dynamic actions
for Button SHOWPOPUP2 - where I have hardcoded the data-parent-element for the popup as #emp7876. When clicked this opens the popup correctly at the icon
DA on click of fa-icon on the cards.
Here I am setting the data-parent-element dynamically from the EMPNO which is clicked. But the popup doesnot open at the correct position.
If I see the DOM on the popup region - the data-parent-element is set correctly.
What am I missing? Please suggest.

Thanks
This post has been answered by fac586 on May 19 2021
Jump to Answer

Comments

fac586
Answer

I haven't figured out how to do it using declarative Open Region DAs, or the documented API. From hints here and here I've got a solution using the underlying widget methods.
Modify the card link icon HTML Expression to use a data attribute instead of an id:

<a href="#" class="t-open-popup" data-empno="#EMPNO#">
 <span class="fa fa-user" aria-hidden="true"></span>
</a>

This provides JavaScript with a simpler, more direct way to access the unique card key value.
Change the DA Execute JavaScript Code:

var empno = this.triggeringElement.dataset.empno,
    o = { autoOpen: true,
          parentElement: "[data-empno=" + empno + "]",
          callout: true,
          relativePosition: "after" };

$('#showDetails').popup(o);

See demo on page 586 of your app.

Marked as Answer by Veerendra Patil · May 20 2021
1 person found this helpful
1 - 1

Post Details

Added on May 19 2021
#apex-discussions
1 comment
570 views