Skip to Main Content

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!

Add Mouseover To Calendar

Gus CJan 29 2014 — edited Feb 4 2014

Apex 4.2

Theme 21

I have created a calendar with the following sql

select jobid,

decode(jobtype, 'DAILY','Daily', 'SUPPORT_LDE', 'Support Lde', 'SUPPORT_GDC', 'Support Gdc', jobtype) jobtype,

decode(type, 'I', 'Inventory', 'S', 'Sale', 'R', 'Receipt', 'DQ', 'Masterdata', type) type,

status,

startdate,

enddate,

to_char(startdate, 'dd/mm/yyyy hh:mi:ss') startdate_format,

to_char(enddate, 'dd/mm/yyyy hh:mi:ss') enddate_format,

DECODE(jobtype, 'DAILY', '#3EA055', 'SUPPORT_LDE', '#4863A0', 'SUPPORT_GDC', '#82CAFF') COLOR

from scp_job

where (nvl(:P68_STATUS,'0') = '0' or status = :P68_STATUS)

and (nvl(:P68_JOBTYPE,'0') = '0' or jobtype = :P68_JOBTYPE)

and (nvl(:P68_TYPE,'0') = '0' or type = :P68_TYPE)

order by startdate

The calendar has a column link to page 3

f?p=&FLOW_ID.:3:&SESSION.::&DEBUG.:RP,3:P3_JOBID,P3_PG:#JOBID#,68

At the moment when the user places his mouse over the link, they get a tooltip giving some details.

To do this I used the Column Format attribute and inside div tags

style="background-color:#COLOR#" title="Status    : #STATUS#&#10Job Type   : #JOBTYPE#
Type      : #TYPE#
Start Date : #STARTDATE_FORMAT#
End Date   : #ENDDATE_FORMAT#">#JOBID#

Ideally, I would like to use a popup page to display the details.

I have managed this before with a report using column link attributes (id="callModalDialog#ORDER_ID#") and a dynamic action

using a jquery selector (a[id^=callModalDialog]) calling javascript

/* prevent default behaviour on click */

var e = this.browserEvent;

e.preventDefault();

/* Trigger JQuery UI dialog */

var horizontalPadding = 30;

var verticalPadding = 30;

$('<iframe id="modalDialog" src="' + this.triggeringElement.href + '" />').dialog({

   title: "Order Details",

   autoOpen: true,

   open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); },

   position: [700,150],

   width: 600,

   height: 370,

   modal: false,

             buttons:

{ "Close": function()  { $(".ui-dialog-content").dialog("close"); } },

   close: function(event, ui) {$(this).remove();},

}).width(570 - horizontalPadding).height(350 - verticalPadding);

return false;

The problem is the column link on the calendar has no link attributes option.

How can I achieve the required effect

Gus

Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Mar 4 2014
Added on Jan 29 2014
13 comments
871 views