Hello,

I was in the lab 'Portal 201' at Summit 2015 and I was looking back at some of my documentation. The webfocus forum won't let me attach a screenshot of the document that IBI handed out that shows them putting four KPI metric gadgets/widgets into a portal. I did post a message in the PMF forum so if you go look there you can see the screenshot. In case you can't see the screenhot, the first one is a blue rectangle with 'Gross Profit', and number of 12,111K in white font. It has four other pieces of data in the gadget. I don't remember them mentioning where the four gadgets were created. Did they use PMF to create them or did they create them using Report Painter or HTML Composer? We haven't upgraded to App Studio yet but I still thought I could create something similar. I wanted to put a sample dashboard together with four gadgets like they had for my team so they could see whats possible in the portal. Any help pointing me to where they developed the gadgets would be a great help!

Thanks!

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

Hey kfreers,

I have used them myself already and they are being demoed today at my company.

You need to be on AppStudio 8.1.03 to get them to work correctly (responsive design part in portal).

They, along with other goodies are in IBI's 8.1.03 Responsive Demo that can be found on their site. You get the files, and then import them using the instructions provided.

Here are a bunch of different ones:
http://www.informationbuilders.com/demos

You must be logged into InfoResponse to access it.

Here's the link:
https://techsupport.informatio...nsive_BI_Portal.html

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

CoolGuy,

Thanks for the info. This is exactly what I wanted!! I just asked my boss when we were going to upgrade to 8.1 and he couldn't give me a firm date so it might be awhile before I can use the responsive design feature.

I tried to just get the code for the 'Gross_Profit_KPI_Gadget.fex' file from the zip file but it's in XML. In the documentation instructions they warn you about it but it's assuming I'm on 8.1. Could you post the code for that specific fex file in this thread and then I should be able to at least create something similar while still using Dev Studio.

Thanks Again!

kfreers,

No prob. These demo KPIs were way helpful for us getting the ball rolling on overhauling one of our then dashboard...now portal pieces. I took from the code provided in the demo and took out some things and added additional things. These demos are a great way to get your hands dirty without having to search for how something is done via online docs or forums when possible.

The gadgets are actually functioning through several file dependencies. Not just the "Gross Profit KPI Widget" .fex. All that .fex does is -SET a bunch of ampers specific to that KPI. It then -INCLUDEs 2 other files with an additional dependency on a gadget.css style sheet, .js, etc. I'll share the code for some of it to get you started:

Gross_Profit_KPI_Gadget.fex:

-SET &KPI_NAME = 'Nov. Gross Profit';
-SET &AS_OF_DT = 'As of 11/30/2013';
-SET &ACT_VAL = '5,906K';
-SET &COMP_LBL1 = 'Prev Yr.';
-SET &COMP_LBL2 = '% Change';
-SET &COMP_LBL3 = 'Trend';
-SET &COMP_VAL1 = '250';
-SET &COMP_VAL2 = '+20%';
-SET &COMP_VAL3 = '&|#x25B2;';
-SET &CLASS = 'blue-alert';
-SET &FMTR1 = 'K';
-SET &FMTR2 = 'K';
-SET &FMTR3 = '%';
-DEFAULTH &BUSINESS_REGION = '_FOC_NULL';

-SET &MEASURE = 'WF_RETAIL.WF_RETAIL_SALES.GROSS_PROFIT_US';
-INCLUDE IBFS:/WFC/Repository/WFPMResponsiveDemo/Hidden_Content/gadget/get_wfretail81_kpi.fex

-INCLUDE IBFS:/WFC/Repository/WFPMResponsiveDemo/Hidden_Content/gadget/big_number_gadget_4.fex

get_wfretail81_kpi.fex:

-DEFAULTH &PRODUCT_CATEGORY = '_FOC_NULL';
-DEFAULTH &CUR_YEAR = '2013';
-DEFAULTH &CUR_MTH = '11';
-DEFAULTH &TARGET = '2.0';
-DEFAULTH &MEASURE = 'WF_RETAIL.WF_RETAIL_SALES.REVENUE_US';
-DEFAULTH &BUSINESS_REGION = '_FOC_NULL';

-SET &PREV_YEAR = &CUR_YEAR -1;

DEFINE FILE wfretail81/wf_retail
SALE_UNITY2/D20.2C = SALE_UNITY;
PY_MEASURE/D20.2C = IF WF_RETAIL.WF_RETAIL_TIME_SALES.TIME_YEAR LT &CUR_YEAR THEN &MEASURE ELSE 0;
CY_MEASURE/D20.2C = IF WF_RETAIL.WF_RETAIL_TIME_SALES.TIME_YEAR EQ &CUR_YEAR THEN &MEASURE ELSE 0;
END

TABLE FILE wfretail81/wf_retail
SUM
&MEASURE NOPRINT
CY_MEASURE AS 'ACT_VAL'
PY_MEASURE AS 'COMP_VAL1'
COMPUTE COMP_VAL2/D5 = (CY_MEASURE - PY_MEASURE) / PY_MEASURE * 100;
COMPUTE COMP_VAL3/A10 = IF COMP_VAL2 GE 0 THEN '&|#x25B2;' ELSE '&|#x25BC;';
BY WF_RETAIL.WF_RETAIL_TIME_SALES.TIME_MTH NOPRINT
WHERE WF_RETAIL.WF_RETAIL_TIME_SALES.TIME_YEAR FROM &PREV_YEAR TO &CUR_YEAR
AND WF_RETAIL.WF_RETAIL_TIME_SALES.TIME_MTH EQ &CUR_MTH ;
WHERE WF_RETAIL.WF_RETAIL_PRODUCT.PRODUCT_CATEGORY EQ '&PRODUCT_CATEGORY';
WHERE WF_RETAIL.WF_RETAIL_GEOGRAPHY_CUSTOMER.BUSINESS_REGION EQ '&BUSINESS_REGION';
ON TABLE SET ASNAMES ON
ON TABLE HOLD AS HOLD1 FORMAT BINARY
END
-RUN

-READFILE HOLD1
-RUN

big_number_gadget_4.fex:

-DEFAULTH &KPI_NAME = 'New Patient Visits';
-DEFAULTH &AS_OF_DT = 'Week of 08/17/2014';
-DEFAULTH &ACT_VAL = '300';
-DEFAULTH &COMP_LBL1 = 'Prev Wk.';
-DEFAULTH &COMP_LBL2 = '% Change';
-DEFAULTH &COMP_LBL3 = 'RTO %';
-DEFAULTH &COMP_VAL1 = '250';
-DEFAULTH &COMP_VAL2 = '+20%';
-DEFAULTH &COMP_VAL3 = '+32%';
-DEFAULTH &CLASS = 'blue-alert';
-DEFAULTH &DRILLDOWN = '/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS%253A%252FWFC%252FRepository%252FWFPMResponsiveDemo%252FHidden_Content%252Ffex&|&|BIP_item=coming_soon.fex&|ICD9=';
-DEFAULTH &TOOLTIP = 'Download Longitudinal';
-DEFAULTH &FMTR1 = 'NaN';
-DEFAULTH &FMTR2 = 'NaN';
-DEFAULTH &FMTR3 = 'NaN';
-DEFAULTH &FMTR4 = 'NaN';

-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%252FWFPMResponsiveDemo%252FHidden_Content%252Fcss%252F&|BIP_item=gadget.css' type='text/css' media='all' />
<script>
function downloadLongitudinal() {
window.open("!IBI.AMP.DRILLDOWN;");
}
function formatter(num,mode) {
   if (!isNaN(parseFloat(num))) {
      if (mode == 'K') {
         num = num / 1000;
         if (num < 1000)
            return num.toFixed(1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'K';
         else
            return num.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'K';
      }
      if (mode == 'M') {
         num = num / 1000000;
         if (num < 1000)
            return num.toFixed(1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'M';
         else
            return num.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'M';
      }
      if (mode == '%') {
         return num.trim() + '%';
      }
   }
   return num;
}

function loadNumbers() {
  $('#num1').html( formatter('!IBI.AMP.ACT_VAL;','!IBI.AMP.FMTR1;') );
  $('#num2').html( formatter('!IBI.AMP.COMP_VAL1;','!IBI.AMP.FMTR2;') );
  $('#num3').html( formatter('!IBI.AMP.COMP_VAL2;','!IBI.AMP.FMTR3;') );
  $('#num4').html( formatter('!IBI.AMP.COMP_VAL3;','!IBI.AMP.FMTR4;') );
}
$(function() {
$( document ).tooltip();
});
</script>
</head>
<body onLoad="loadNumbers()">
<div class="!IBI.AMP.CLASS;" style="border-radius: 0px; padding-top: 5px; padding-bottom: 5px">
<div style="width:100%">
<span style="font-size:1em">!IBI.AMP.KPI_NAME;</span><br>
<span style="font-size:.5em">!IBI.AMP.AS_OF_DT;</span><br>
<span id="num1" style="font-size:2em"></span>
</div>
<div style="width:33%;float:left;padding:0;margin:0">
<span style="font-size:.6em">!IBI.AMP.COMP_LBL1;</span><br><span id="num2"></span>
</div>
<div style="width:33%;float:left;padding:0;margin:0">
<span style="font-size:.6em">!IBI.AMP.COMP_LBL2;</span><br><span id="num3"></span>
</div>
<div style="width:33%;float:left;padding:0;margin:0">
<span style="font-size:.6em">!IBI.AMP.COMP_LBL3;</span><br><span id="num4"></span>
</div>
</div>
</body>
</html>
-HTMLFORM END

gadget.css:

body {
    margin: 0px;
}
.blue-alert {
    position:absolute;
    left:0;
    right:0;
    background-color: #539CD0;
    background: -webkit-linear-gradient(left top, #539CD0, #4B8FBC); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, #539CD0, #4B8FBC); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, #539CD0, #4B8FBC); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, #539CD0, #396D8E); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.green-alert {
    position:absolute;
    left:0;
    right:0;
    background-color: #6CBF6F;
    background: -webkit-linear-gradient(left top, #6CBF6F, #447745); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, #6CBF6F, #447745); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, #6CBF6F, #447745); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, #6CBF6F, #447745); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.orange-alert {
    position:absolute;
    left:0;
    right:0;
    background-color: #EFB662;
    background: -webkit-linear-gradient(left top, #EFB662, #B5894C); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, #EFB662, #B5894C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, #EFB662, #B5894C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, #EFB662, #B5894C); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.purple-alert {
    position:absolute;
    left:0;
    right:0;
    background-color: #68548E;
    background: -webkit-linear-gradient(left top, #68548E, #483B63); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, #68548E, #483B63); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, #68548E, #483B63); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, #68548E, #483B63); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.blue2-alert {
    position:absolute;
    left:0;
    right:0;
    background-color: rgb(9,102,179);
    background: -webkit-linear-gradient(left top, rgb(9,102,179), rgb(7,87,152)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, rgb(9,102,179), rgb(7,87,152)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, rgb(9,102,179), rgb(7,87,152)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, rgb(9,102,179), rgb(7,87,152)); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.red-alert {
    position:absolute;
    left:0;
    right:0;
    background: rgb(210,71,38);
    background: -webkit-linear-gradient(left top, rgb(210,71,38), rgb(172,60,32)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, rgb(210,71,38), rgb(172,60,32)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, rgb(210,71,38), rgb(172,60,32)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, rgb(210,71,38), rgb(172,60,32)); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.green2-alert {
    position:absolute;
    left:0;
    right:0;
    background: rgb(43,168,131);
    background: -webkit-linear-gradient(left top, rgb(43,168,131), rgb(35,139,108)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top, rgb(43,168,131), rgb(35,139,108)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top, rgb(43,168,131), rgb(35,139,108)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top, rgb(43,168,131), rgb(35,139,108)); /* Standard syntax */
    color: white;
    font-family: Montserrat;
    font-size: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    text-align: center;
    float: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}
.add-green {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 64px;
    height: 64px;
    cursor: pointer;
    background-repeat: no-repeat;
    background: url('/ibi_apps/views.bip?BIP_REQUEST_TYPE=BIP_RUN&BIP_folder=IBFS%253A%252FWFC%252FRepository%252FRDF%252FCommon%252Fimage&BIP_item=button-add_green.png');
}
.add-green:hover {
    opacity: .7;
    filter: alpha(opacity=70);
}
.ui-tooltip {
    display: none;
    background: rgb(240,236,174);
    font-size: 11px;
    padding: 8px;
    color: black;
    z-index: 99;
    border: 2px solid rgb(242,219,70);
    /* for IE */
    filter: alpha(opacity=90);
    /* CSS3 standard */
    opacity: 0.9;
}

The above code should be enough to give you an idea of what the dev did to prep these KPIs for demo. It's nice of IBI to give us some starting points for our projects using their products. I know this code has been a big help to me in learning what I can do with WF8103+.

Good luck!

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

Thanks Again! This will give me plenty to work with!!

KFreers,

I haven't built any of those yet, but they do look pretty cool. Essentially its just a real simple report. Its a one line report with the rest of the text as headers. You don't need App studio or a newer version of WebFOCUS to create the gadgets. You can do it in the Report Painter, or just in the text editor if you are comfortable with coding in Text.

To clarify: I meant in order to get the responsive portal features, you need to be on AppStudio 8.1.03. For everything else, it's open season.

quote:

-DEFAULTH &DRILLDOWN = '/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&|BIP_folder=IBFS%253A%252FWFC%252FRepository%252FWFPMResponsiveDemo%252FHidden_Content%252Ffex&|&|BIP_item=coming_soon.fex&|ICD9=';

CookGuy,

Thank you so much for the demo code. I am working on one of my portal with something similar to this. However I have a question regarding this amp drilldown. What is the coming_soon.fex is doing? Is it a dummy report template or somthing?

WebFocusDiver,

Hello! I don't see myself as much of a cook, but I do like to eat. lol (referencing your having called me CookGuy) No biggie though. ;-)

For the above example, &DRILLDOWN was meant to be a reference URL that would run a simple HTML document that states "Coming soon." until an actual drillable report/graph would switch that out. At this point of development, the IBIer never fully implemented that functionality. I, however, took the idea and finished my own implementation of it.

You simply build your URL string and assign it to either &DRILLDOWN or whatever you'd like to name it. Then, down in your -HTMLFORM markup where you have your Js, add a simple function like the following (if you want to be able to manage your target window):

function runReport() {
     window.open("!IBI.AMP.DRILLDOWN;", "Drilldown", "height=100, width=360, left=200, top=200");
}

Then, finally, you add that function call as an onclick event handler to whatever element you want it for. Like so:

[*]<a href="#" onclick="runReport()">Run report.</a>

Works nicely if you don't want to mess with IBI's HTML Composer tool.

Hope this helps.

P.S.: With the following URL build, you can attach params at its end:

'/ibi_apps/WFServlet.ibfs?IBFS1_action=RUNFEX&IBFS_path=/WFC/Repository/domainFolder/subFolder/drill_report.fex&var1=value1&var2=&otherVar.EVAL&anotherVar=anotherValue&etc=etc';

Took me a bit to figure that out, so I thought I'd share that.

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

quote:

the following (if you want to be able to manage your target window):

Sorry for not checking my spelling before I sent. I must be too exited of finding this post. Thank you for sharing this. I will try it.

WebFocusDiver,

Don't even sweat it. I was just pulling your chain a bit. That's how I am.

Glad this thread has been helpful for you. This way of building content has been very nice as an option. I eventually found a way to build a top/bottom 5 performers widget that reads the top 5 records from a request and stores them in DM amper variables for later use in my own custom HTML found below the loop construct I created to do just that.

This is nice. I made it to work except the number format convert my negative value to positive. I feel like it's something related to Javacript. But I don't know much about coding. Can someone help me, please? Thanks

function formatter(num,mode) {
if (!isNaN(parseFloat(num))) {
if (mode == 'K') {
num = num / 1000;
if (num < 1000)
return num.toFixed(1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'K';
else
return num.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'K';
}
if (mode == 'M') {
num = num / 1000000;
if (num < 1000)
return num.toFixed(1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'M';
else
return num.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'M';
}
if (mode == '%') {
return num.trim() + '%';
}
}
return num;
}

WebFocusDiver,

Like I was saying above, the IBI person that implemented these examples never really finished everything.

Here is my fleshed out function for formatting big numbers down to a size that is manageable. It takes care of both positive and negative ranges, and also has a way to stick a $ (or whatever you'd like) in front of the values that will be displayed if desired:

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, ",");
	}
}

Questions? Let me know.