Hey everyone,

**First off, I've posted my working code below for a top 5 widget I've created with onclick-of-cashier-name-run-a-report/drilldown functionality for your reference for help in understanding the kind of implementation I am looking for.**

I have the below implemented widget built using custom HTML, etc. below the report request that relies on filter values passed to it (i.e. division, district, banner, store #, etc.). This widget shows the dynamic heading and then below that the top 5 cashiers for a given metric and the metric values like so:

*****************************************
*                                       *
*             header text               *
*             header text               *
*             header text               *
*                                       *
*    Cashiers             Sales         *
*    Billy                $183.8K       *
*    Sonya                $145.2K       *
*    Joe                  $123.5K       *
*    Kendra               $98.2K        *
*    Pam                  $75.1K        *
*                                       *
*****************************************

Upon hovering over the cashier names you are shown which store the cashier belongs to. If you click the first cashier name you will open a new window running a report w/params passed to it (only have one onclick assigned so far for testing).

What I want to try and implement now is upon onclick of a cashier name, instead of automatically getting sent to a specified report/graph, you are greeted with a mini menu (much like the tooltip) that allows you to select various links to different reports for that cashier. A multi-drill menu more or less.

Does anyone here in the forums know of a way I could do this with what I have implemented below?

My code:

-* Test for saving multiple records of field values to DM variables to then display within custom HTML.
-*
-* This procedure takes a request for the top 5 performers in a given metric (for range of time specified)
-* and reads each record's values into their own Dialog Manager &variables
-* to be then used in custom HTML, CSS, and Js below.

-SET &ECHO = ALL;

-DEFAULTH &DSDIVISION = _FOC_NULL;
-*-DEFAULTH &DSDIVISION = '123';
-DEFAULTH &DSDISTRICT = _FOC_NULL;
-*-DEFAULTH &DSDISTRICT = '1234';
-DEFAULTH &DSBANNERGL = _FOC_NULL;
-*-DEFAULTH &DSBANNERGL = '12';
-DEFAULTH &DSACCTNO = _FOC_NULL;
-DEFAULTH &DSACCTNO = '12345';
-DEFAULTH &DDDEPTCODE = _FOC_NULL;
-*-DEFAULTH &DDDEPTCODE = '123456';

-DEFAULTH &WEEKENDING = '20150822';

-DEFAULTH &HIDDEN = 'Y';
-*-DEFAULTH &HIDDEN = 'N';

-IF &HIDDEN EQ 'N' THEN GOTO Wait;

-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL NE _FOC_NULL) AND (&DSACCTNO NE _FOC_NULL) AND (&DDDEPTCODE NE _FOC_NULL) OR (&DDDEPTCODE NE _FOC_NULL) THEN GOTO DeptRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL NE _FOC_NULL) AND (&DSACCTNO NE _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSACCTNO NE _FOC_NULL) THEN GOTO StrRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL NE _FOC_NULL) AND (&DSACCTNO EQ _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSBANNERGL NE _FOC_NULL) THEN GOTO BannRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL EQ _FOC_NULL) AND (&DSACCTNO EQ _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSDISTRICT NE _FOC_NULL) THEN GOTO DistRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT EQ _FOC_NULL)  AND (&DSBANNERGL EQ _FOC_NULL) AND (&DSACCTNO EQ _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSDIVISION NE _FOC_NULL) THEN GOTO DivRptSets ELSE GOTO DivRptSets;

-DivRptSets

-SET &forName = IF &DSDIVISION EQ '99' THEN 'division name' ELSE
-IF &DSDIVISION EQ '81' THEN '81' ELSE
-IF &DSDIVISION EQ '82' THEN '82' ELSE
-IF &DSDIVISION EQ '84' THEN '84' ELSE
-IF &DSDIVISION EQ '85' THEN '85' ELSE
-IF &DSDIVISION EQ '86' THEN '86' ELSE
-IF &DSDIVISION EQ _FOC_NULL THEN 'all' ELSE '';
-SET &forMsg = IF &forName EQ 'all' THEN 'for all divisions' ELSE 'for the &forName.EVAL division';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSDIVISION EQ &DSDIVISION.(FIND SRPROD.DIMSTORE.DSDIVISION IN SRPROD).Div #:. );';

-GOTO Rpt;

-DistRptSets

-SET &forName = IF &DSDISTRICT EQ '01' THEN 'district name' ELSE
-IF &DSDISTRICT EQ '02' THEN 'district name 2' ELSE
-IF &DSDISTRICT EQ '03' THEN '03' ELSE
-IF &DSDISTRICT EQ '05' THEN '05' ELSE
-IF &DSDISTRICT EQ '07' THEN '07' ELSE
-IF &DSDISTRICT EQ '08' THEN '08' ELSE
-IF &DSDISTRICT EQ '09' THEN '09' ELSE '';
-SET &forMsg = 'for the &forName.EVAL district';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSDISTRICT EQ &DSDISTRICT.(FIND SRPROD.DIMSTORE.DSDISTRICT IN SRPROD).Dist #:. );';

-GOTO Rpt;

-BannRptSets

-SET &forName = IF &DSBANNERGL EQ '10' THEN 'banner name' ELSE
-IF &DSBANNERGL EQ '20' THEN 'banner name2' ELSE
-IF &DSBANNERGL EQ '23' THEN 'banner name3' ELSE
-IF &DSBANNERGL EQ '40' THEN 'banner name4' ELSE
-IF &DSBANNERGL EQ '50' THEN 'banner name5' ELSE
-IF &DSBANNERGL EQ '81' THEN '81' ELSE
-IF &DSBANNERGL EQ '82' THEN '82' ELSE
-IF &DSBANNERGL EQ '84' THEN '84' ELSE
-IF &DSBANNERGL EQ '85' THEN '85' ELSE
-IF &DSBANNERGL EQ '86' THEN '86' ELSE '';
-SET &forMsg = 'for the &forName.EVAL banner';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSBANNERGL EQ &DSBANNERGL.(FIND SRPROD.DIMSTORE.DSBANNERGL IN SRPROD).Bann #:. );';

-GOTO Rpt;

-StrRptSets
-UPD
-DEFAULTH &STORE = _FOC_NULL;
-SET &forMsg = 'for the &STORE.EVAL store';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSACCTNO EQ &DSACCTNO.(FIND SRPROD.DIMSTORE.DSACCTNO IN SRPROD).Store #:. );';
-IF &STORE NE _FOC_NULL THEN GOTO BACK;
-GOTO Rpt;

-DeptRptSets

-GOTO NoDataReturned;

-GOTO Rpt;

-Rpt

-DEFAULTH &CNAME1 = 1;
-DEFAULTH &CNAME2 = 1;
-DEFAULTH &CNAME3 = 1;
-DEFAULTH &CNAME4 = 1;
-DEFAULTH &CNAME5 = 1;

-DEFAULTH &STRNAME1 = 1;
-DEFAULTH &STRNAME2 = 1;
-DEFAULTH &STRNAME3 = 1;
-DEFAULTH &STRNAME4 = 1;
-DEFAULTH &STRNAME5 = 1;

-DEFAULTH &SRPDGROSSSALES1 = 1;
-DEFAULTH &SRPDGROSSSALES2 = 1;
-DEFAULTH &SRPDGROSSSALES3 = 1;
-DEFAULTH &SRPDGROSSSALES4 = 1;
-DEFAULTH &SRPDGROSSSALES5 = 1;

-SET &THREEWKSPREV = AYMD(&WEEKENDING.QUOTEDSTRING, -21, 'YYMD');

DEFINE FILE SRPROD
WKEND_MDYY/MDYY=DATECVT(SRPROD.DIMDATE.WEEKENDING, 'YYMD', 'MDYY');
INT_CASHIERNO/I10 = EDIT(SRPROD.SRPROD.SRPDCASHIERNO);
INT_STORENO/I5 = IF INT_CASHIERNO GT 9999 THEN INT_CASHIERNO;
STORENO/A5 = EDIT(INT_STORENO);
END
-RUN
TABLE FILE SRPROD
SUM
     SRPROD.DIMSTORE.DSNAME/A50
	 SRPROD.SRPROD.SRPDGROSSSALES
BY HIGHEST 5 SRPROD.SRPROD.SRPDGROSSSALES NOPRINT
BY SRPROD.SRPROD.SRPDCASHIERNAME/A35
&select.EVAL
WHERE ( SRPROD.DIMDATE.WEEKENDING GE '&THREEWKSPREV');
WHERE ( SRPROD.DIMDATE.WEEKENDING LE '&WEEKENDING');
WHERE SRPDCASHIERNO NE STORENO;
WHERE SRPDCASHIERNO NE '800';
WHERE SRPDCASHIERNO NE '997';
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SAVE FORMAT ALPHA
END
-RUN

-IF &RECORDS EQ 0 THEN GOTO NoDataReturned;

-SET &I = 0;
-LOOP
-SET &I = &I + 1;
-IF &I GT 5 GOTO OUT;
-READ SAVE &SRPDCASHIERNAME.&I.A35. &SNAME.&I.A50. &SRPDGROSSSALES.&I.I10.
-SET &CNAME.&I = TRUNCATE(&SRPDCASHIERNAME.&I);
-SET &STRNAME.&I = TRUNCATE(&SNAME.&I);
-SET &STORE = &STRNAME.&I;
-IF &DSACCTNO NE _FOC_NULL THEN GOTO UPD;
-BACK
-SET &TOOLTIP.&I = 'from &STORE.EVAL';
-TYPE &CNAME.&I &STRNAME.&I &SRPDGROSSSALES.&I &TOOLTIP.&I
-GOTO LOOP
-OUT

-*------------------------------------------ UI testing below this point ------------------------------------------------------------------------------

-SET &HEAD = 'Top 5 in Sales<br>&forMsg.EVAL<br>for the last 4 weeks';
-SET &CASHIER_LBL = 'Cashiers';
-SET &METRIC_LBL = 'Sales';
-SET &CLASS = 'blue-alert';

-DEFAULTH &DRILLDOWN = '/ibi_apps/WFServlet.ibfs?IBFS1_action=RUNFEX&IBFS_path=/WFC/Repository/.../.../dev/test_report.fex&HIDDEN=Y&DSACCTNO=&DSACCTNO.EVAL';

-HTMLFORM BEGIN
<html>
<head>
<link rel='stylesheet' id='options_typography_Montserrat-regular-css'  href='https://fonts.googleapis.com/css?family=Montserrat:regular' type='text/css' media='all' />
<link rel='stylesheet' id='options_typography_Montserrat-400-css'  href='https://fonts.googleapis.com/css?family=Montserrat:400' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" href="/ibi_apps/jquery/css/smoothness/jquery-ui.custom.min.css">
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery-ui.custom.min.js"></script>
<link rel='stylesheet' href='/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS%253A%252FWFC%252FRepository%252F...%252F...%252Fstyles%252F&|BIP_item=gadget.css' type='text/css' media='all' />
<script>
function formatNum(num) {
	var suffixK = "K";
	var suffixM = "M";
	if ((num > 999 && num < 1000000)||(num < -999 && num > -1000000)) {
		num = num / 1000;
		num = num.toFixed(1).concat(suffixK);
		return "$" + num;
	}
	else if ((num > 999999)||(num < -999999)){
		num = num / 1000000;
		num = num.toFixed(1).concat(suffixM);
		return "$" + num;
	}
	else {
		return "$" + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}
}

function loadNumbers() {
  $('#name1').html('!IBI.AMP.CNAME1;');
  $('#name2').html('!IBI.AMP.CNAME2;');
  $('#name3').html('!IBI.AMP.CNAME3;');
  $('#name4').html('!IBI.AMP.CNAME4;');
  $('#name5').html('!IBI.AMP.CNAME5;');
  $('#num1').html(formatNum('!IBI.AMP.SRPDGROSSSALES1;'));
  $('#num2').html(formatNum('!IBI.AMP.SRPDGROSSSALES2;'));
  $('#num3').html(formatNum('!IBI.AMP.SRPDGROSSSALES3;'));
  $('#num4').html(formatNum('!IBI.AMP.SRPDGROSSSALES4;'));
  $('#num5').html(formatNum('!IBI.AMP.SRPDGROSSSALES5;'));
}

$(function() {
$( document ).tooltip();
});

function runReport() {
window.open("!IBI.AMP.DRILLDOWN;");
}
</script>
</head>
<body onLoad="loadNumbers()">
<div class="!IBI.AMP.CLASS;" style="border-radius: 0px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; height: 100%">
<div style="width:100%">
<span style="font-size:.6em">!IBI.AMP.HEAD;</span><br>
<span style="font-size:18pt;line-height:20%">&|nbsp;</span>
</div>
<div style="width:50%;float:left;padding:0;margin:0">
<div style="padding:0px;margin:3px"><span style="font-size:.6em;text-decoration:underline">!IBI.AMP.CASHIER_LBL;</span></div>
<span id="name1" style="font-size:.65em" title="!IBI.AMP.TOOLTIP1;" onclick="runReport()"></span><br>
<span id="name2" style="font-size:.65em" title="!IBI.AMP.TOOLTIP2;"></span><br>
<span id="name3" style="font-size:.65em" title="!IBI.AMP.TOOLTIP3;"></span><br>
<span id="name4" style="font-size:.65em" title="!IBI.AMP.TOOLTIP4;"></span><br>
<span id="name5" style="font-size:.65em" title="!IBI.AMP.TOOLTIP5;"></span>
</div>
<div style="width:50%;float:left;padding:0;margin:0">
<div style="padding:0px;margin:3px"><span style="font-size:.6em;text-decoration:underline">!IBI.AMP.METRIC_LBL;</span></div>
<span id="num1" style="font-size:.65em"></span><br>
<span id="num2" style="font-size:.65em"></span><br>
<span id="num3" style="font-size:.65em"></span><br>
<span id="num4" style="font-size:.65em"></span><br>
<span id="num5" style="font-size:.65em"></span>
</div>
</div>
</body>
</html>
-HTMLFORM END

-IF &HIDDEN EQ 'Y' THEN GOTO TheEnd;

-NoDataReturned

-HTMLFORM IBFS:/WFC/Repository/.../.../html/NoDataReturned.htm

-GOTO TheEnd

-Wait

-HTMLFORM IBFS:/WFC/Repository/.../.../html/PlzWaitForFilters.htm

-TheEnd

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

Hey all,

Don't everyone chime in all at once now... lol

Anywho...I got this functionality working for the most part now. I am still trying to get the drill links to align left properly without jumping to the left of the whole widget and sticking to an absolute positioning when I use text-align:left;, but we'll get that figured out eventually.

So the code I added to get the desired functionality is as follows:

CSS:

#menulink {
 display: none;
}
a:link {
    color: #DCDCDC;
	text-decoration: none;
}
a:visited {
    color: #DCDCDC;
	text-decoration: none;
}
a:hover {
    color: #DEE2AF;
	text-decoration: none;
}
a:active {
    color: #DEE2AF;
	text-decoration: none;
}
li {
    line-height:140%;
}
ul {
    margin:0px;
	padding:0px;
}

Js:

function showOrHide(element) {
 if (document.getElementById) {
  var vis = document.getElementById(element).style;
  if (vis.display == "block") {
   vis.display = "none";
   } else {
   vis.display = "block";
  } 
  return false;
  } else {
  return true;
 }
}

HTML:

...
<span id="name1" style="font-size:.65em" title="!IBI.AMP.TOOLTIP1;" onclick="return showOrHide('menulink');"></span><br>
<ul style="font-size:8pt;list-style-type:none" id="menulink">
   <li><a href="!IBI.AMP.DRILLDOWN;">Run report.</a></li>
   <li><a href="!IBI.AMP.DRILLDOWN;">Run graph.</a></li>       
   <li><a href="!IBI.AMP.DRILLDOWN;">Trends.</a></li>
</ul>
<span id="name2" style="font-size:.65em" title="!IBI.AMP.TOOLTIP2;"></span><br>
...

If anyone here knows of alternate ways to align list item text to the left but keep it nested under its parent element, by all means feel free to chime in. I would really appreciate the help.

Thanks in advance. Hope the above helps someone down the road.

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

Have you considered chaining your parameters?

And as for creating the mini-menu all you need to do is invoke another menu page inside of a hidden iframe. That will give you the popup menu you require.

George,

Thanks for your post. In regards to chaining params passed, I don't believe I will be needing that due to the DM logic I have in place for such near the top of my procedure, and when the user clicks on one of the drills for a selected cashier, the params that will be passed to it are determined by the amper variables' .EVAL values passed to the end of the link URL where the params are defined. Thanks though.

Could you give me an example of what you mean by invoking another menu page inside of a hidden iframe? So, you are saying that when the user clicks a cashier name, a hidden iframe will pop-up much like a context/shortcut menu to links to other reports/graphs for that selected cashier? How would you implement that? Thanks for any help you are willing to give.

Have a look at this page on pure CSS driven menus.

https://www.grc.com/menudemo.htm

You can get the CSS and it shouldn't take too much work (given what you have already done) to get it working with your code

I've implemented this from FEXes to create custom menus based on table data. I'll see if I can find my generic verison

StuBouyer,

Thank you so much for the link and your post. I will look into the implementations I find from the linked content and get back to you and everyone via this thread.

I am very interested to see your implementation within your procedures if you're willing still. Appreciate you taking the time to post and help me.

One alternative option may be to use something like a Bootstrap modal window. We use those for filtering and drill downs.

Here is a link to the offical documentation:
http://getbootstrap.com/javascript/#modals

Chad,

I'll be sure to check it out. Thanks for the tip and link!

Here is my demo code slightly rewritten for Wf8.

Style Sheet -- mystyle.css

.menu,.menu ul,.menu li,.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.menu {
	height: 40px;
	width: 100%;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;
	text-align: center;

	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a { border-right: none; }

.menu li:hover > a { color: #8fde62; }

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }  

HTML FILE - memu_out.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD>
<META id=RLT_STANDARDS_MODE_META content=IE=9 http-equiv=X-UA-Compatible>
<META name=mycharsetmeta content="text/html; charset=ISO-8859-1" http-equiv=Content-Type>
<META name=Generation content="Created in release 8009, Generation 3">
<SCRIPT type=text/javascript>//confidential_id=IBI_OptionsScript
var szHtmlAlias="/ibi_apps/ibi_html";var szRunTimeHtmlAlias="runTimeHtmlAlias";var cgipath="cgipath";var ibirls="ibirls3";var rltdyncalendar="rltdyncalendar";var map="ibimap";var olap="olap";var olappanebase="olappanebase";var olapdrill="olapdrill";var ibiOptions = new Array(cgipath,ibirls);var nlsScript="/javaassist/nls.js";var glbScript="/javaassist/ibi/html/js/ibigbl.js";var replacePart="<replace>";
var scriptTemplate='<SCRIPT src="'+replacePart+'" type="text/javascript"><\/SCRIPT>';if(typeof(szRunTimeHtmlAlias) === 'string' && szRunTimeHtmlAlias.indexOf('/') == 0)szHtmlAlias=szRunTimeHtmlAlias;document.write(scriptTemplate.replace(replacePart, szHtmlAlias + nlsScript));document.write(scriptTemplate.replace(replacePart, szHtmlAlias + glbScript));</SCRIPT>

<SCRIPT type=text/javascript>//confidential_id=IBI_ibigblloadCss
if(typeof ibigblloadCss === 'function'){ibigblloadCss(null);addIntlTranslatedJS("composertrans.js");}else {alert("JavaScript alias '/ibi_apps/ibi_html'  is not valid");window.location("about:blank");}</SCRIPT>
<TITLE>HtmlPage</TITLE>
<SCRIPT for=window type=text/javascript eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>

<SCRIPT>//confidential_id=clientEventHandlersJS

//Begin function window_onload
function window_onload() {
 
UpdateData();
 
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload
</SCRIPT>
<LINK id=ITEM2 rel=stylesheet type=text/css UserSuppliedFullPath="1" rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/default_theme.css"><LINK id=IBI_THEME_CSS rel=stylesheet type=text/css UserSuppliedFullPath="1" desc="Information Builders" rtFileName="cgipathsub/ibi_html/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi.css"><LINK id=ITEM3 rel=stylesheet type=text/css rtFileName="/WFC/Repository/Public/mystyle.css">
</HEAD>
<BODY style="OVERFLOW: auto" class=IBI_PageBg edaconnectionrequired="false" elementtype="21" thumbnailscale="4" maptype="0"><INPUT style="POSITION: absolute; TOP: -100px; LEFT: -100px" id=layoutinfo type=hidden resourcectrlids="ITEM2;IBI_THEME_CSS" name="inputhidden1"><INPUT style="POSITION: absolute; TOP: -100px; LEFT: -100px" id=ibiapp_app type=hidden ismre="1" name="ibiapp_app"><INPUT style="POSITION: absolute; TOP: -100px; LEFT: -100px" id=ibif_ex value=/WFC/Repository/Public/menu_out.htm type=hidden name="ibif_ex"><xml id=focus_xmlelement><script type="text/xml"><rootxmlnode focoption="_FOC_NULL"><variables></variables><input_controls></input_controls><requests></requests><other_bound_objects></other_bound_objects></rootxmlnode></script>
</xml>
!IBI.FIL.MENUOUT;
</BODY>
<SCRIPT type=text/javascript>//confidential_id=IBI_loader
if(typeof doBeforeLoad === 'function'){doBeforeLoad();}function AdjustChildrenPosition(){
}
</SCRIPT>
</HTML>  

FEX - menu_out.fex

SET HOLDLIST=PRINTONLY
-DEFAULT &ECHO=ALL

TABLE FILE CAR
SUM CNT.COUNTRY NOPRINT
SUM CNT.CAR NOPRINT
BY COUNTRY
PRINT
     COMPUTE NUMCTRY/I2 = IF COUNTRY NE LAST COUNTRY THEN NUMCTRY + 1 ELSE NUMCTRY; NOPRINT
     COMPUTE NUMCAR/I2 = IF COUNTRY NE LAST COUNTRY THEN 1 ELSE NUMCAR + 1; NOPRINT
     COMPUTE MAXCNTRY/I2 = CNT.COUNTRY; NOPRINT
     COMPUTE MAXCAR/I2 = CNT.CAR; NOPRINT
     COMPUTE TOPLIST/A80 =
      IF (NUMCTRY EQ 1 AND NUMCAR EQ 1)
      THEN   '<ul class="menu">[*]<a href="#">' | COUNTRY || '</a>'
      ELSE
      IF (NUMCAR EQ 1)
      THEN '</ul>[*]<a href="#">' | COUNTRY || '</a>'
      ELSE ' ';
     COMPUTE list_two/A80 =
      IF (NUMCAR EQ 1)
      THEN '<ul>[*]<a href="#">' | CAR || '</a>'
      ELSE
      IF (NUMCTRY EQ MAXCNTRY AND NUMCAR EQ MAXCAR )
      THEN '[*]<a href="#">' | CAR || '</a></ul> </ul>'
      ELSE '[*]<a href="#">' | CAR || '</a>';


BY COUNTRY NOPRINT
BY CAR NOPRINT
ON TABLE SAVE AS MENUOUT FORMAT ALPHA
END
-RUN

-HTMLFORM IBFS:/WFC/Repository/Public/menu_out.htm  

FEX code is a tad ugly but in production we got this working down to five levels.

Should give you this output

http://jsfiddle.net/onabai/6kvrh/

And to get real fancy..
http://jsfiddle.net/hollycoffee/LjLMU/

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

StuBouyer and GavinL,

Thank you for the code example and links! Great stuff! Really appreciate your time and help!

All,

I came up with the following solution to a top/bottom 5 widget with tooltips and multidrills (based initially off of IBI's 8.1.03/04 Responsive Demo code, but then modified it, made it highly dynamic, and even more responsive than what the demo had):

-* This procedure takes a request for the top 5 performers in a given metric (for range of time specified)
-* and reads each record's values into their own Dialog Manager &variables to be then used in custom HTML, CSS, and Js below.
-* It also provides the ability to add multiple drill-downs to each cashier listed, pulling data specific to them, popping up mini
-* reports/graphs about them in set-sized windows.

-* For testing purposes.
-SET &ECHO = ALL;

-* Apply record data constraint(s):
-INCLUDE IBFS:/WFC/Repository/domain/subFolder/data_filter.fex

-* Default values for testing various filtering levels:
-DEFAULTH &DSDIVISION = _FOC_NULL;
-*-DEFAULTH &DSDIVISION = '99';
-DEFAULTH &DSDISTRICT = _FOC_NULL;
-*-DEFAULTH &DSDISTRICT = '02';
-DEFAULTH &DSBANNERGL = _FOC_NULL;
-*-DEFAULTH &DSBANNERGL = '10';
-DEFAULTH &DSACCTNO = _FOC_NULL;
-DEFAULTH &DSACCTNO = '10982';
-DEFAULTH &DDDEPTCODE = _FOC_NULL;
-*-DEFAULTH &DDDEPTCODE = '15';

-DEFAULTH &WEEKENDING = '20150912';

-* Tests whether or not the filters have loaded in the portal:
-DEFAULTH &HIDDEN = 'Y';
-*-DEFAULTH &HIDDEN = 'N';

-IF &HIDDEN EQ 'N' THEN GOTO Wait;

-* Logic for filtering dynamic report results:
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL NE _FOC_NULL) AND (&DSACCTNO NE _FOC_NULL) AND (&DDDEPTCODE NE _FOC_NULL) OR (&DDDEPTCODE NE _FOC_NULL) THEN GOTO DeptRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL NE _FOC_NULL) AND (&DSACCTNO NE _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSACCTNO NE _FOC_NULL) THEN GOTO StrRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL NE _FOC_NULL) AND (&DSACCTNO EQ _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSBANNERGL NE _FOC_NULL) THEN GOTO BannRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT NE _FOC_NULL)  AND (&DSBANNERGL EQ _FOC_NULL) AND (&DSACCTNO EQ _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSDISTRICT NE _FOC_NULL) THEN GOTO DistRptSets ELSE
-IF (&HIDDEN EQ 'Y') AND (&DSDIVISION NE _FOC_NULL) AND (&DSDISTRICT EQ _FOC_NULL)  AND (&DSBANNERGL EQ _FOC_NULL) AND (&DSACCTNO EQ _FOC_NULL) AND (&DDDEPTCODE EQ _FOC_NULL) OR (&DSDIVISION NE _FOC_NULL) THEN GOTO DivRptSets ELSE GOTO DivRptSets;

-DivRptSets

-SET &forName = IF &DSDIVISION EQ '99' THEN 'divname' ELSE
-IF &DSDIVISION EQ '81' THEN '81' ELSE
-IF &DSDIVISION EQ '82' THEN '82' ELSE
-IF &DSDIVISION EQ '84' THEN '84' ELSE
-IF &DSDIVISION EQ '85' THEN '85' ELSE
-IF &DSDIVISION EQ '86' THEN '86' ELSE
-IF &DSDIVISION EQ _FOC_NULL THEN 'all' ELSE '';
-SET &forMsg = IF &forName EQ 'all' THEN 'for all divisions' ELSE 'for the &forName.EVAL division';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSDIVISION EQ &DSDIVISION.(FIND SRPROD.DIMSTORE.DSDIVISION IN SRPROD).Div #:. );';

-GOTO Rpt;

-DistRptSets

-SET &forName = IF &DSDISTRICT EQ '01' THEN 'distname' ELSE
-IF &DSDISTRICT EQ '02' THEN 'distname2' ELSE
-IF &DSDISTRICT EQ '03' THEN '03' ELSE
-IF &DSDISTRICT EQ '05' THEN '05' ELSE
-IF &DSDISTRICT EQ '07' THEN '07' ELSE
-IF &DSDISTRICT EQ '08' THEN '08' ELSE
-IF &DSDISTRICT EQ '09' THEN '09' ELSE '';
-SET &forMsg = 'for the &forName.EVAL district';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSDISTRICT EQ &DSDISTRICT.(FIND SRPROD.DIMSTORE.DSDISTRICT IN SRPROD).Dist #:. );';

-GOTO Rpt;

-BannRptSets

-SET &forName = IF &DSBANNERGL EQ '10' THEN 'bann' ELSE
-IF &DSBANNERGL EQ '20' THEN 'bann2' ELSE
-IF &DSBANNERGL EQ '23' THEN 'bann3' ELSE
-IF &DSBANNERGL EQ '40' THEN 'bann4' ELSE
-IF &DSBANNERGL EQ '50' THEN 'bann5' ELSE
-IF &DSBANNERGL EQ '81' THEN '81' ELSE
-IF &DSBANNERGL EQ '82' THEN '82' ELSE
-IF &DSBANNERGL EQ '84' THEN '84' ELSE
-IF &DSBANNERGL EQ '85' THEN '85' ELSE
-IF &DSBANNERGL EQ '86' THEN '86' ELSE '';
-SET &forMsg = 'for the &forName.EVAL banner';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSBANNERGL EQ &DSBANNERGL.(FIND SRPROD.DIMSTORE.DSBANNERGL IN SRPROD).Bann #:. );';

-GOTO Rpt;

-StrRptSets
-UPD
-DEFAULTH &STORE = _FOC_NULL;
-SET &forMsg = 'for the &STORE.EVAL store';
-SET &select = 'WHERE ( SRPROD.DIMSTORE.DSACCTNO EQ &DSACCTNO.(FIND SRPROD.DIMSTORE.DSACCTNO IN SRPROD).Store #:. );';
-IF &STORE NE _FOC_NULL THEN GOTO BACK;
-GOTO Rpt;

-DeptRptSets

-GOTO NoDataReturned;

-GOTO Rpt;

-Rpt

-DEFAULTH &CNAME1 = 1;
-DEFAULTH &CNAME2 = 1;
-DEFAULTH &CNAME3 = 1;
-DEFAULTH &CNAME4 = 1;
-DEFAULTH &CNAME5 = 1;

-DEFAULTH &STRNAME1 = 1;
-DEFAULTH &STRNAME2 = 1;
-DEFAULTH &STRNAME3 = 1;
-DEFAULTH &STRNAME4 = 1;
-DEFAULTH &STRNAME5 = 1;

-DEFAULTH &SRPDGROSSSALES1 = 1;
-DEFAULTH &SRPDGROSSSALES2 = 1;
-DEFAULTH &SRPDGROSSSALES3 = 1;
-DEFAULTH &SRPDGROSSSALES4 = 1;
-DEFAULTH &SRPDGROSSSALES5 = 1;

-SET &THREEWKSPREV = AYMD(&WEEKENDING.QUOTEDSTRING, -21, 'YYMD');

DEFINE FILE SRPROD
WKEND_MDYY/MDYY=DATECVT(SRPROD.DIMDATE.WEEKENDING, 'YYMD', 'MDYY');
INT_CASHIERNO/I10 = EDIT(SRPROD.SRPROD.SRPDCASHIERNO);
INT_STORENO/I5 = IF INT_CASHIERNO GT 9999 THEN INT_CASHIERNO;
STORENO/A5 = EDIT(INT_STORENO);
END
-RUN
TABLE FILE SRPROD
SUM
     SRPROD.DIMSTORE.DSNAME/A50
	 SRPROD.SRPROD.SRPDGROSSSALES
BY TOTAL HIGHEST 5 SRPROD.SRPROD.SRPDGROSSSALES NOPRINT
BY SRPROD.SRPROD.SRPDCASHIERNAME/A35
&select.EVAL
WHERE ( SRPROD.DIMDATE.WEEKENDING GE '&THREEWKSPREV');
WHERE ( SRPROD.DIMDATE.WEEKENDING LE '&WEEKENDING');
WHERE SRPDCASHIERNO NE STORENO;
WHERE SRPDCASHIERNO NE '8';
WHERE SRPDCASHIERNO NE '9';
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SAVE FORMAT ALPHA
END
-RUN

-IF &RECORDS EQ 0 THEN GOTO NoDataReturned;

-* Logic for creating amper-vars for all values read from the above request to be used in the widget below:
-SET &I = 0;
-LOOP
-SET &I = &I + 1;
-IF &I GT 5 GOTO OUT;
-READ SAVE &SRPDCASHIERNAME.&I.A35. &SNAME.&I.A50. &SRPDGROSSSALES.&I.I10.
-SET &CNAME.&I = TRUNCATE(&SRPDCASHIERNAME.&I);
-SET &STRNAME.&I = TRUNCATE(&SNAME.&I);
-SET &STORE = &STRNAME.&I;
-IF &DSACCTNO NE _FOC_NULL THEN GOTO UPD;
-BACK
-SET &TOOLTIP.&I = 'from &STORE.EVAL';
-TYPE &CNAME.&I &STRNAME.&I &SRPDGROSSSALES.&I &TOOLTIP.&I
-GOTO LOOP
-OUT

-*------------------------------------------ UI testing below this point ------------------------------------------------------------------------------

-SET &HEAD = 'Top 5 in Sales<br>&forMsg.EVAL<br>for the last 4 weeks';
-SET &CASHIER_LBL = 'Cashiers';
-SET &METRIC_LBL = 'Sales';
-SET &CLASS = 'blue-alert';

-* Drilldown link with params that is stored under Content:  (will be added upon when real drills are assigned)
-DEFAULTH &DRILLDOWN = '/ibi_apps/WFServlet.ibfs?IBFS1_action=RUNFEX&IBFS_path=/WFC/Repository/domain/dev/test_drill.fex&HIDDEN=Y&DSACCTNO=&DSACCTNO.EVAL&SRPDCASHIERNAME=&CNAME1.EVAL&WEEKENDING=&WEEKENDING.EVAL';

-* UI logic (allows full access to your HTML that's not garbled HTML like you'd get from HTML Canvas/Composer):
-HTMLFORM BEGIN
<html>
<head>
<link rel='stylesheet' id='options_typography_Montserrat-regular-css'  href='https://fonts.googleapis.com/css?family=Montserrat:regular' type='text/css' media='all' />
<link rel='stylesheet' id='options_typography_Montserrat-400-css'  href='https://fonts.googleapis.com/css?family=Montserrat:400' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" href="/ibi_apps/jquery/css/smoothness/jquery-ui.custom.min.css">
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery-ui.custom.min.js"></script>
<link rel='stylesheet' href='/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS%253A%252FWFC%252FRepository%252Fdomain%252Fstyles%252F&|BIP_item=gadget.css' type='text/css' media='all' />
<style type="text/css">
#menulink1, #menulink2, #menulink3, #menulink4, #menulink5 {
 display: none;
}
#top_a {
    color: #FFFFFF;
	text-decoration: none;
}
a:link {
    color: #DCDCDC;
	text-decoration: none;
}
a:visited {
    color: #DCDCDC;
	text-decoration: none;
}
a:hover {
    color: #DEE2AF;
	text-decoration: none;
}
a:active {
    color: #DEE2AF;
	text-decoration: none;
}
li a:hover {
    background-color: #289dcc;
}
li {
    line-height:140%;
}
ul {
    margin:0px;
	padding:0px;
}
</style>
<script>
function showOrHide(element) {
 if (document.getElementById) {
  var vis = document.getElementById(element).style;
  if (vis.display == "block") {
   vis.display = "none";
   } else {
   vis.display = "block";
  }
  return false;
  } else {
  return true;
 }
}

function formatNum(num) {
	var suffixK = "K";
	var suffixM = "M";
	if ((num > 999 && num < 1000000)||(num < -999 && num > -1000000)) {
		num = num / 1000;
		num = num.toFixed(1).concat(suffixK);
		return "$" + num;
	}
	else if ((num > 999999)||(num < -999999)){
		num = num / 1000000;
		num = num.toFixed(1).concat(suffixM);
		return "$" + num;
	}
	else {
		return "$" + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}
}

function loadNumbers() {
  $('#name1').html('!IBI.AMP.CNAME1;');
  $('#name2').html('!IBI.AMP.CNAME2;');
  $('#name3').html('!IBI.AMP.CNAME3;');
  $('#name4').html('!IBI.AMP.CNAME4;');
  $('#name5').html('!IBI.AMP.CNAME5;');
  $('#num1').html(formatNum('!IBI.AMP.SRPDGROSSSALES1;'));
  $('#num2').html(formatNum('!IBI.AMP.SRPDGROSSSALES2;'));
  $('#num3').html(formatNum('!IBI.AMP.SRPDGROSSSALES3;'));
  $('#num4').html(formatNum('!IBI.AMP.SRPDGROSSSALES4;'));
  $('#num5').html(formatNum('!IBI.AMP.SRPDGROSSSALES5;'));
-*  condFrmt();
}

$(function() {
     $( document ).tooltip({
     });
});

function runReport() {
     window.open("!IBI.AMP.DRILLDOWN;", "Drilldown", "height=100, width=360, left=200, top=200");
}
</script>
</head>
<body onLoad="loadNumbers()">
<div class="!IBI.AMP.CLASS;" style="border-radius:0px;padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;height: 100%">
<div style="width:100%">
<span style="font-size:.6em">!IBI.AMP.HEAD;</span><br>
<span style="font-size:18pt;line-height:20%">&|nbsp;</span>
</div>
<div style="width:50%;float:left;padding:0;margin:0">
<div style="padding:0px;margin:3px"><span style="font-size:.6em;text-decoration:underline">!IBI.AMP.CASHIER_LBL;</span></div>

<a id="top_a" href="#"><span id="name1" style="font-size:.65em" title="!IBI.AMP.TOOLTIP1;" onclick="return showOrHide('menulink1');"></span></a><br>
<ul id="menulink1" style="font-size:8pt;list-style-type:none">
   <li><a href="#" onclick="runReport()">Run report.</a></li>
   <li><a href="#" onclick="runReport()">Run graph.</a></li>
   <li><a href="#" onclick="runReport()">Trends.</a></li>
</ul>

<a id="top_a" href="#"><span id="name2" style="font-size:.65em" title="!IBI.AMP.TOOLTIP2;" onclick="return showOrHide('menulink2');"></span></a><br>
<ul id="menulink2" style="font-size:8pt;list-style-type:none">
   <li><a href="#" onclick="runReport()">Run report.</a></li>
   <li><a href="#" onclick="runReport()">Run graph.</a></li>
   <li><a href="#" onclick="runReport()">Trends.</a></li>
</ul>

<a id="top_a" href="#"><span id="name3" style="font-size:.65em" title="!IBI.AMP.TOOLTIP3;" onclick="return showOrHide('menulink3');"></span></a><br>
<ul id="menulink3" style="font-size:8pt;list-style-type:none">
   <li><a href="#" onclick="runReport()">Run report.</a></li>
   <li><a href="#" onclick="runReport()">Run graph.</a></li>
   <li><a href="#" onclick="runReport()">Trends.</a></li>
</ul>

<a id="top_a" href="#"><span id="name4" style="font-size:.65em" title="!IBI.AMP.TOOLTIP4;" onclick="return showOrHide('menulink4');"></span></a><br>
<ul id="menulink4" style="font-size:8pt;list-style-type:none">
   <li><a href="#" onclick="runReport()">Run report.</a></li>
   <li><a href="#" onclick="runReport()">Run graph.</a></li>
   <li><a href="#" onclick="runReport()">Trends.</a></li>
</ul>

<a id="top_a" href="#"><span id="name5" style="font-size:.65em" title="!IBI.AMP.TOOLTIP5;" onclick="return showOrHide('menulink5');"></span></a>
<ul id="menulink5" style="font-size:8pt;list-style-type:none">
   <li><a href="#" onclick="runReport()">Run report.</a></li>
   <li><a href="#" onclick="runReport()">Run graph.</a></li>
   <li><a href="#" onclick="runReport()">Trends.</a></li>
</ul>

</div>

<div style="width:50%;float:left;padding:0;margin:0">
<div style="padding:0px;margin:3px"><span style="font-size:.6em;text-decoration:underline">!IBI.AMP.METRIC_LBL;</span></div>
<span id="num1" style="font-size:.65em"></span><br>
<span id="num2" style="font-size:.65em"></span><br>
<span id="num3" style="font-size:.65em"></span><br>
<span id="num4" style="font-size:.65em"></span><br>
<span id="num5" style="font-size:.65em"></span>
</div>
</div>
</body>
</html>
-HTMLFORM END

-IF &HIDDEN EQ 'Y' THEN GOTO TheEnd;

-NoDataReturned

-HTMLFORM IBFS:/WFC/Repository/domain/html/NoDataReturned.htm

-GOTO TheEnd

-Wait

-HTMLFORM IBFS:/WFC/Repository/domain/html/PlzWaitForFilters.htm

-TheEnd

Hope this helps those that are just getting started with AppStudio and the BIP needing help making something great they could use.

Thanks everyone that helped me in this thread!

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