Hi,
i am trying to create a report in which i need to add an information image to each row of the first column and when the user points the mouse on that image it should pop up the related information of that row.please suggest me how this can be done .i have around 20 rows so doo i need to crreate a diff image for each row or i can use the same image but can pop up different data depending upon the row.
Thanks

This message has been edited. Last edited by: Kerry,

I'm not sure with what code you're adding the image to each column, but this should get you started, it's an example that uses the "title" tag for HTML elements to display a pop-up:

-*-- Hover / Mouseover example using html title --------------------------------

-SET &TITLE_MSG =
-  '<span style="cursor: default;" ' | 'title="View details">Country</span>';

DEFINE FILE CAR
  CONTINENT/A10 =
    IF COUNTRY IN ('FRANCE', 'W GERMANY', 'ITALY', 'ENGLAND') THEN 'Europe' ELSE
    IF COUNTRY IN ('JAPAN') THEN 'Asia' ELSE '???';
  MOUSEOVER/A255 =
    '<span style="cursor: default;" title="The continent is ' |
    CONTINENT | '">' | COUNTRY | '</span>';
END

TABLE FILE CAR
  PRINT
    MOUSEOVER       AS '&TITLE_MSG'
    MODEL           AS 'Model'
    BY COUNTRY      NOPRINT
  ON TABLE PCHOLD FORMAT HTML
END

This message has been edited. Last edited by: Francis Mariani,

chelsea, are you coming to Summit? part of my presentation tuesday at 4 will cover exactly how to do this, with javascript; Francis' method is quite crisp, and will very nicely show you row-specific information in situ; what i'll show at summit is a way to show a bit more, but still in situ, using more js.

This message has been edited. Last edited by: susannah,

Hi Francis,

Francis i tried your code and its working fine but i couldnt figure out how i can insert an image and how i can mke the pop-up work on that image near each title heading.
Hi Susannah,
sorry i am not comming to the summit because of my project deadlines.can you please suggest me how this can be accomplished using js .it would be very greatful and if posssible after the summit can you please post your presentation so that people like can be benifited .
Thanks
thanks

Also i would like to know how i could use this in a graph? Works fine on a table but not on a graph!!!

Chelsea,

Try this using Francis' excellent example -

-*-- Hover / Mouseover example using html title --------------------------------

-SET &TITLE_MSG = '<span style="cursor: default;" ' | 'title=''View details''>Image</span>';

DEFINE FILE CAR
CONTINENT/A10 =
IF COUNTRY IN ('FRANCE', 'W GERMANY', 'ITALY', 'ENGLAND') THEN 'Europe' ELSE
IF COUNTRY IN ('JAPAN') THEN 'Asia' ELSE '???';
MOUSEOVER/A255 =
'<span style="cursor: default;" title=''The continent is ' |
CONTINENT | '''><img src=/ibi_html/web.gif border=0></span>';
END

TABLE FILE CAR
PRINT
MOUSEOVER AS '&TITLE_MSG'
CONTINENT
MODEL AS 'Model'
BY COUNTRY NOPRINT
ON TABLE PCHOLD FORMAT HTML
END

Karanth,

It depends on how you are creating your graph. If you save it as an image (gif) file then you will only be able to apply the mouseover event to the image. If you are using the API then refer to the API programmers manual for using tooltips - or search this forum for previously posted examples.

T

Tony,
I had posted this question earlier regarding tooltip on Graphs but it really did not work. The label and the tool tip would always be the same. Anything can be dne on this?

Karanth,

How are you creating your graph? Supply an example using the CAR or GGSALES file if poss.

T

-* File emplgraph.fex
-SET &ECHO = ALL;
SET HOLDLIST = PRINTONLY
SET ASNAMES = ON

DEFINE FILE ABC
RATING/A30=
IF LAST_REVIEW_RATING EQ 'E' THEN 'Exceeds Expectations'
ELSE IF LAST_REVIEW_RATING EQ 'O' THEN 'Oustanding'
ELSE IF LAST_REVIEW_RATING EQ 'P' THEN 'Proficient'
ELSE IF LAST_REVIEW_RATING EQ 'N' THEN 'Needs Improvement'
ELSE IF LAST_REVIEW_RATING EQ 'NR' THEN 'Not Rated'
ELSE 'Not Rated';

ORDEROFVALS/D10=
IF LAST_REVIEW_RATING EQ 'E' THEN 2
ELSE IF LAST_REVIEW_RATING EQ 'O' THEN 1
ELSE IF LAST_REVIEW_RATING EQ 'P' THEN 3
ELSE IF LAST_REVIEW_RATING EQ 'N' THEN 4
ELSE IF LAST_REVIEW_RATING EQ 'NR' THEN 5
ELSE 5;
END

TABLE FILE ABC
SUM
PCT.CNT.CORP_ID AS PERCENTRANK
CNT.CORP_ID AS RANKCOUNT
BY LOWEST
ORDEROFVALS
BY
RATING AS 'Rating'
WHERE BON_ELIG_FLAG EQ 'Y';
ON TABLE HOLD AS HOLD1
END

TABLE FILE HOLD1
SUM

-*COMPUTE GVALUES/A100='"' || FTOA(RANKCOUNT, '(D10)', 'A14')
-* || ' Employees with'| RATING | 'Ranking(' || FTOA(PERCENTRANK, '(D5.2)', 'A8') || '%)",'; AS NOPRINT
COMPUTE GVALUES/A100='"' || FTOA(PERCENTRANK, '(D5.2)', 'A8')
|| '%' | '\n'| RATING;
BY RATING NOPRINT
ON TABLE SAVE
END
-RUN

GRAPH FILE HOLD1
HEADING
"Bonus Rating"
PRINT RANKCOUNT AS ''
ACROSS RATING
FOOTING
" n = ON GRAPH SET LOOKGRAPH PIEMULTI
ON GRAPH SET GRAPHEDIT ON
ON GRAPH SET BARNUMB ON
ON GRAPH SET 3D ON
ON GRAPH SET VZERO ON
ON GRAPH SET GRID OFF
ON GRAPH PCHOLD FORMAT PNG
ON GRAPH SET GRAPHSTYLE *
setSeriesLabelArray(
-INCLUDE SAVE
);
setLegendPosition (2);
setSize(400,200);
setLegendAutomatic(true);
setFillColor(getSeries(0), new Color(141,9,0));
setFillColor(getSeries(1), new Color(249,133,0));
setFillColor(getSeries(2), new Color(231,231,34));
setFillColor(getSeries(3), new Color(4,159,33));
setFillColor(getSeries(4), new Color(40,40,142));
setPieDepth(45);
setLegendAutomatic(true);
setY1AxisSide(0);
setTextWrap(getLegendText(),true);
setMarkerDisplay(true);
setConnectLineMarkers(false);
setConnectScatterMarkers(false);
setO1LabelDisplay(true);
setO1AxisSide(0);
setO1MajorGridDisplay(true);
setO1MajorGridStyle(0);
setO1MinorGridDisplay(false);
setAxisAssignment(0,0);
setY1LabelDisplay(true);
setY1AxisSide(0);
setY1MajorGridDisplay(true);
setY1MajorGridStyle(0);
setY1MinorGridDisplay(false);
setTextFormatPreset(getY1Label(),-1);
setTextFormatPattern(getY1Label(),"#.##");
setPieFeelerTextDisplay(0);
setTextFormatPreset(getPieSliceLabel(),1);
setRiserBorderMode(1);
setSeriesDefaultTransparentBorderColor(true);
setUseSeriesBorderDefaults(true);
setLegendDisplay(true);
setTitleString("Bonus rating\n \n");
setFontName(getTitle(),"VERDANA");
setFontSizeAbsolute(getTitle(),true);
setFontSize(getTitle(),10);
setSubtitleString("\n\n\nJohn Smith1535's Hierarchy\nJob Type : All");
setFontName(getSubtitle(),"VERDANA");
setFontSizeAbsolute(getSubtitle(),true);
setFontSizeAbsolute(getLegendText(),true);
setFontSize(getLegendText(),8);
setTextWrap(getLegendText(),true);
setFontSizeAbsolute(getY1Title(),true);
setFontSizeAbsolute(getY1Label(),true);
setFontSizeAbsolute(getY2Title(),true);
setFontSizeAbsolute(getY2Label(),true);
setFontSizeAbsolute(getO1Title(),true);
setO1LabelAutofit(true);
setPlace(false);
ENDSTYLE
ON GRAPH SET STYLE *
PAGESIZE='Letter',
LEFTMARGIN=0.250000,
RIGHTMARGIN=0.250000,
TOPMARGIN=0.250000,
BOTTOMMARGIN=0.250000,
SQUEEZE=ON,
ORIENTATION=PORTRAIT,
$
TYPE=REPORT,
GRAPHCOLOR='WHITE',
$
TYPE=REPORT,
GRID=ON,
FONT='VERDANA',
SIZE=6,
BACKCOLOR=RGB(250 250 250),
STYLE=NORMAL,
RIGHTGAP=0.125000,
TOPGAP=0.013889,
BOTTOMGAP=0.027778,
$
TYPE=DATA,
ACROSSCOLUMN=N1,
FOCEXEC=ACCORD,
ALT='hello',
$
TYPE=HEADING,
LINE=1,
OBJECT=TEXT,
ITEM=1,
SIZE=9,
COLOR='WHITE',
STYLE=BOLD,
TOPGAP=0.013889,
BOTTOMGAP=0.027778,
$
TYPE=FOOTING,
LINE=1,
OBJECT=TEXT,
ITEM=1,
COLOR='BLACK',
STYLE=BOLD,
TOPGAP=0.013889,
BOTTOMGAP=0.027778,
$
TYPE=FOOTING,
LINE=1,
OBJECT=FIELD,
ITEM=1,
COLOR='BLACK',
STYLE=BOLD,
TOPGAP=0.013889,
BOTTOMGAP=0.027778,
$
ENDSTYLE
END

I HAVE DONE A SETSERIESLABEL BUT IT DOESN'T HELP AS BOTH THE TOOLTIP AND THE LABEL WILL BE THE SAME.
I NEED SOMETHING DIFFERENT ON BOTH. ANY WAY OUT>

Yes, read and understand the posting from JG in this posting

Hi Francis/Tony,
Thanks for your info its working with the images also.the only thing i wanted to ask is can we define the size of the pop up window and also can we do styling on the data that is displayed and also i tried displaying in multiple lines but couldn't do it.if the data is large then its displaying in different lines but can i control the data that is displayed in different lines.
Thanks

Hi Chelsea,

You can control the size etc. of the pop-up by using CSS within the SPAN tag. Just extend the contents of style="cursor: default;". The settings you will need are top, left, width, height. To force these to use absolute positioning on the report you would use position with a value of absolute. Be careful if your report is larger than the screen area when using absolute positioning. Remember to seperate the style attribute from the value with a full colon and terminate the pairing with a semi colon -

style="cursor: default; position: absoulte; top: 100px; left: 100px; width: 300px; height: 50px;"

T

Thanks Tony,
i tried ur sample code but it is not increasing the pop window size instead its changing the position of my image.i need to increrase the size of the window that appears when i bring the mouse on to my image.
thanks

Chelsea,

That's what comes with not having WF to test the suggestion when I was at home ... oops

I have an example somewhere, I'll dig it out and post it.

T

Hi Chelsea,

I had to make a few adjustments to give a generalised function, but cut and paste this into a file called dynmsg.js in your baseapp folder on the webserver (not the reporting server).

    function CrMsgDiv(text,width,height) {
      var RemDiv = document.getElementById('MsgDiv');
      if (RemDiv) {
        document.body.removeChild(RemDiv);
      }
      var MsgDiv = document.createElement('div');
      MsgDiv.setAttribute('id', 'MsgDiv');
      var MsgHTML = "<html><head></head><body>";
      MsgHTML+= "<table width=100% height=100% bgcolor=#ffffff style='BORDER-TOP:2px groove; ";
      MsgHTML+= "BORDER-LEFT:2px groove; BORDER-RIGHT:2px groove; BORDER-BOTTOM:2px groove; ";
      MsgHTML+= "FONT-WEIGHT:400; FONT-SIZE:10pt; FONT-STYLE:normal; FONT-FAMILY:MS Sans Serif; ";
      MsgHTML+= "TEXT-DECORATION:none;'><tr><td align=center>";
      MsgHTML+= text;
      MsgHTML+= "</td></tr></table></body></html>";
      MsgDiv.innerHTML = MsgHTML;
      document.body.appendChild(MsgDiv);
      MsgDiv.style.position='absolute';
      MsgDiv.style.top=event.clientY + 10 + document.body.scrollTop;
      MsgDiv.style.left=event.clientX + 10 + document.body.scrollLeft;
      MsgDiv.style.width=width;
      MsgDiv.style.height=height;
    }

This javascript requires three parameters - the text for display, the width and the height of the required pop-up. The method is dynamic HTML and the div (id=MsgDiv) is destroyed (if exists) and created on the fly at the browser e.g. Viewing the source will not show the div. The advantage is that you don't have to remember to create the div in your DEFINEs and there is no messy setting of the "visibilty" attribute within the div styling. The positioning of the pop-up is controlled by the current mouse placement + 10px (both x and y coords) and can be changed as you require.

The text is enclosed within a TABLE tag and the table is styled within the javascript. You could remove this and pass all the HTML code to be displayed making it truly flexible.

Now use the basics of Francis' sample to include the call to the javascript in a mouseover event -

-*-- Hover / Mouseover example using html title --------------------------------
SET JSURL        = '/approot/baseapp/dynmsg.js'

-SET &TITLE_MSG = '<span style="cursor: default;" ' | 'title=''View details''>Image</span>';

DEFINE FILE CAR
CONTINENT/A10 =
IF COUNTRY IN ('FRANCE', 'W GERMANY', 'ITALY', 'ENGLAND') THEN 'Europe' ELSE
IF COUNTRY IN ('JAPAN') THEN 'Asia' ELSE '???';
MOUSEOVER/A255 =
'<span style="cursor: default;" onMouseover="CrMsgDiv(''' ||
CONTINENT || ''',250,100);" onMouseout="document.body.removeChild(MsgDiv);">' ||
'<img src=/ibi_html/web.gif border=0></span>';
END

TABLE FILE CAR
PRINT
MOUSEOVER AS '&TITLE_MSG'
CONTINENT
MODEL AS 'Model'
BY COUNTRY NOPRINT
ON TABLE PCHOLD FORMAT HTML
END

The javascript module is pulled in using the JSURL setting which is why the JS file is required to be on the webserver and therefore available via a URL.

Note that I have added a mouseout event to remove the dynamic div.

T

Edited to amend the JS pop-up positioning to allow for scrolled windows. Note only tested in I.E.

This message has been edited. Last edited by: Tony A,

I am attempting to apply this solution to the FOR column on an FML report (the data in the report, not the title), but it does not appear to work.

When I try, the report returns zero rows - a WebFOCUS error is not generated.

Is there a way to have information show when doing a mouseover on the FOR column of an FML report?

How about sharing the code? "returns zero rows" without an error - is this caused by your mouseover code? The FML FOR column data content is what makes up the report rows, which means the data can't be manipulated.

I'll try to knock together something using the CAR file.

Here is an example using the CAR file code example you provided originally.

DEFINE FILE CAR
CONTINENT/A10 =
IF COUNTRY IN ('FRANCE', 'W GERMANY', 'ITALY', 'ENGLAND') THEN 'Europe' ELSE
IF COUNTRY IN ('JAPAN') THEN 'Asia' ELSE '???';
MOUSEOVER/A255 = '<span style="cursor: default;"' | 'title="The continent is ' | CONTINENT | '">' | COUNTRY | '</span>';
END

TABLE FILE CAR
SUM SALES
-*FOR COUNTRY AS 'Country'
FOR MOUSEOVER AS 'Country'
'ENGLAND'   AS 'England'      OVER
'FRANCE'    AS 'France'       OVER
'W GERMANY' AS 'West Germany' OVER
'ITALY'     AS 'Italy'        OVER
'JAPAN'     AS 'Japan'
-*MOUSEOVER AS 'Country'
-*MODEL AS 'Model'
-*BY COUNTRY NOPRINT
ON TABLE PCHOLD FORMAT HTML
END

I get zero results with this because the column MOUSEOVER will never have a value of 'ENGLAND' or 'FRANCE', etc - the value will be '<span style="cursor: default;" title="The continent is ENGLAND">EUROPE</span>'.

This message has been edited. Last edited by: Francis Mariani,

OK - that makes sense. So, it doesn't appear this solution is really feasible for the FOR column on FML reports.

What I have gotten to work, at least partially, is to use the ALT element in the stylesheet. Most of the FOR columns already have drillable links, and simply adding the ALT element is working as requested by my client.

Thanks, Francis!