Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only. Moving forward, myibi is our community platform to learn, share, and collaborate. We have the same Focal Point forum categories in myibi, so you can continue to have all new conversations there. If you need access to myibi, contact us at myibi@ibi.com and provide your corporate email address, company, and name.


Connect to myibi
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] Preview box popup when hovering over a link

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED] Preview box popup when hovering over a link
 Login/Join
 
Platinum Member
posted
Hey guys:
We are wanting to try out a new design for our current dashboard and i just wanted to see if anyone has tried it out before.

Basically we have 4 or 5 hyperlinks at the top of the page, each one corresponding to a
box on that same page. What we want to have happen is when you hover over a hyperlink, a 'preview' of the corresponding box appears in a popup.

We have been toying with the idea of using dummy data for it so it would load instantly rather than live data.

Anyone ever tried something like this?

Thanks.

This message has been edited. Last edited by: <Kathryn Henning>,


WebFOCUS App Studio 8.2.02
Windows 7, All Outputs
 
Posts: 141 | Location: Mclean, VA | Registered: December 04, 2012Report This Post
Member
posted Hide Post
You could try the jquery route. Here is a link with some demos to get you started.

http://jqueryui.com/tooltip/

There are loads of customization techniques on the web if you're keen on building a hover over tool tip.

Erfan


WebFOCUS 77, Windows, HTML PDF EXCEL
 
Posts: 11 | Registered: November 28, 2011Report This Post
Platinum Member
posted Hide Post
We have tried a couple of jquery ideas for this topic one of which was just diplaying a jquery dialog box. Unfortunately it seems that with webfocus starting IE in quirks mode, most of the functionality doesn't work.

Been looking for a way to keep webfocus from entering quirks mode to no avail so far.


WebFOCUS App Studio 8.2.02
Windows 7, All Outputs
 
Posts: 141 | Location: Mclean, VA | Registered: December 04, 2012Report This Post
Expert
posted Hide Post
For HTML Composer GUI built HTML pages we do the unthinkable: we edit the code. We add an HTML 5 doctype to the top of the file:
<!DOCTYPE HTML>
Every time we save a file after a GUI modification, we also remove the
<!-- Generated by Report Layout Painter -->
comment. This should keep IE out of quirks mode.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
I will have to try that. I vaguely remember trying something similar and the doctype that would normally go in is baked into a servlet somewhere.

I did not think we could change the doc type because the baked in version was issued before it even got to the html file.


WebFOCUS App Studio 8.2.02
Windows 7, All Outputs
 
Posts: 141 | Location: Mclean, VA | Registered: December 04, 2012Report This Post
Member
posted Hide Post
You can also force an IE mode via a meta tag.
Webfocus 8 attaches a meta to html pages built through composer that force IE9 mode.

Just keep in mind that when you open the file in composer, it will move the metat towards the end of the head component.
The meta needs to be the first tag in the Head or it will not take.

<META id=RLT_STANDARDS_MODE_META content=IE=9 http-equiv=X-UA-Compatible>


For more information visit:
IE compatibilty features


Release: DevStudio 7703
OS: Win7
Outputs: HTML, PDF, EXCEL

 
Posts: 8 | Registered: November 29, 2011Report This Post
Silver Member
posted Hide Post
A possible solution if you are just using the HTML composer:


  • Create panels
  • Create an iframe in each of the panel
  • Populate the iframes with the dummy data with autoexecute set to true
  • Hide the panels onLoad of the HTML page
  • For the hyperlinks, add the onmouseover event, which displays the corresponding panel. Also, hide the panel onmouseout.


BTW, I would split the fex to data retrieval - if dummy data, pulls from dummy data and if real, pull from real data; and the display of the data. This means that you can then use the same fex to populate the hover and the actual component and one fex to change if the report changes.


Year(s) of experience in WebFOCUS: 5+. Using WebFOCUS 7.7.03 on Windows platform with Oracle/SQL Server.
 
Posts: 41 | Registered: September 08, 2008Report This Post
Guru
posted Hide Post
Good idea JL,

You don't even need the panel. You can just use the frame.

You want autoexecute to be set to false, other wise it won't stay hidden.

Onmouseover just use the IbComposer_execute function to execute (thus displaying the frame.)

Onmouseout you will have to hide it (with IbComposer_showHtmlElement)

There is a page on such IBI javascript functions in the documentation


WebFOCUS 7.7.03/8.0.08
Dev Studio 7.7.03/8.0.08
App Studio 8.0.08
Windows 7
ALL Outputs
 
Posts: 402 | Location: Upland, IN | Registered: June 08, 2012Report This Post
Guru
posted Hide Post
The above method will force you to use sample data since it executes each time

If you want live data to be loaded on page update you will need to set auto execute to true and then in the onintialupdate function you will need initially hide it. Use the IbComposer_showHtmlElement to show/hide it on mouseover and mouse out.

If there are going to be a few samples, this method wouldn't hurt. If you have a lot of link previews you will want to execute them as needed and probably use the above method.

Pretty much all of this is done through the GUI


WebFOCUS 7.7.03/8.0.08
Dev Studio 7.7.03/8.0.08
App Studio 8.0.08
Windows 7
ALL Outputs
 
Posts: 402 | Location: Upland, IN | Registered: June 08, 2012Report This Post
Guru
posted Hide Post
Hello Tim,
Have you been able to implement the popup succesfully? I have a similar requriment to show a "mini chart" as a popup on click or hover in an HTML report field. Please share your sample if you can. Thanks in advance!
quote:
Originally posted by Tim P.:
We have tried a couple of jquery ideas for this topic one of which was just diplaying a jquery dialog box. Unfortunately it seems that with webfocus starting IE in quirks mode, most of the functionality doesn't work.

Been looking for a way to keep webfocus from entering quirks mode to no avail so far.


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 289 | Location: Houston,TX | Registered: June 11, 2004Report This Post
Master
posted Hide Post
Regarding adding 'supplementary' data, we mostly either add it to the report or create a drill down.

A couple of times we have created a tooltip. Tooltips are created by the 'tittle' attribute of a tag.

Here is an example:

JOIN
 PCD IN GGSALES
TO 
 PCD IN GGPRODS
AS J1
END
-*
DEFINE FILE GGSALES
 PRODUCT_ROLLOVER/A175 = 
  '<span style="cursor: default;" title="' |
   'Vendor: ' | GGPRODS.VENDOR_NAME | '">' |
   PRODUCT |
  '</span>';
END
-*
TABLE FILE GGSALES
"Sales Listing"
PRINT SEQ_NO
      CATEGORY
      PCD
      PRODUCT_ROLLOVER AS 'Product Name'
      DOLLARS/I8C
WHERE SEQ_NO IN (1792,2125,2788,4099);
ON TABLE SET STYLE *
  INCLUDE = endeflt, $
  TYPE=DATA, COLUMN=PRODUCT_ROLLOVER, COLOR=BLUE,$
 ENDSTYLE
END  
 
Posts: 822 | Registered: April 23, 2003Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] Preview box popup when hovering over a link

Copyright © 1996-2020 Information Builders