Custom Field Renderer - To do Simple Calculations

No problem. To get the XML to show up correctly, just surround it with a couple of HTML tags:

<pre><code>[Lots and lots of XML here!]</code></pre>

I think I can see what I need to see though.

That did the trick!! Thank you so very much! Can we modify that lil snippet to truncate the number at 2 characters to the right of the decimal?

Great! JavaScript’s toFixed() method should make that number always show two characters (no more, no less) to the right of the decimal point:

skuid.ui.fieldRenderers.TEXT[field.mode](field,(value/100).toFixed(2));

Thank you for speaking this magic robot language that helps us tell computers what to do!

100010010001110100110100101001010000111… Thanks for being a part of our community!

Ah yes - there are 10 kinds of people in the world. Those who understand binary and those that do not…

I have a need that’s very similar to Kaede’s. I have an aggregate model that returns a summed number and I want to divide that number by 1000. But I’m rendering the number in a template. How do I invoke a custom field renderer in a template?

Hey Rob + other Skuid Folks, Can we revisit Glenn’s question above, re: invoking custom field renderer in a template?

Ah yes - I ran into this problem a week or so ago trying to build a dashboard. (more on that coming in late October). Template fields do not allow math on the fly. So I either had to go to formula fields in Salesforce, or Javascript component tied to an inline resource. I took the hard path… Here is my javascript code - replace the ALL CAPS items with your values.

//COMPONENT NAME is what you put in the custom page element 'component type' property. skuid.componentType.register('COMPONENTNAME',function(element){ var $ = skuid.$; var m = skuid.model.getModel('MODELNAME'); //Name of your model var row = m.getFirstRow(); //Using an aggregate model that only returns one row. var field = row.FIELDNAME; //Field name from your aggregate model var MathValue = (field / 1000).toFixed(2); //Do your math here element.append( m.mergeRow(row,MathValue) ); }); 

Please note - this Javascript is provided without warantee. I’m a fellow beggar. A javascript developer could do much better.

Thanks, Rob. I am working on this but haven’t figured it out yet. To confirm - the FIELDNAME should be the alias for the aggregated field, correct?

That’s correct.  Use the Alias there. 

mehh… I can’t get anything to show up at all. I have a table at the bottom of the page just to verify that the field value is coming through correctly and only one row is being returned.

OK.  That’s my bad.  I said I wasn’t good at Javascript.   I’m worse at double checking my copy paste work. 

The very last line should be

element.append( m.mergeRow(row,MathValue) ); 


Where “mathValue” is the result you want to display.

In my work I had an additional text field where I wrapped MathValue in a div, and added some introductory language and put a hyperlink to a page that showed the detail. That field was called text, and I missed making the needed change. Sorry.

I’m still not getting anything to show up on the page after changing text to mathValue. I sent it over to our devs to take a look. In the meantime, I will also be wrapping the MathValue in a div. Can I see that code, please?

Ahhh!!! I am figuring it out!!

Happy Happy!

To style the div I just added another variable that concatenated a string with my html styling with my variable (MathValue). And then changed my mergeRow to call the “text” variable. Somthing like this:

var text = "<div class='nx-pagetitle-subtitle'> License MRR </div><div class = 'nx-pagetitle-maintitle'>$" + MathValue +"</div></div>"; element.append( m.mergeRow(row,text)

The classes referred to there are standard Skuid CSS classes, but of course you can define your own classes (which I assume you did for the template fields). Reuse those classes here and your custom item will match your template output and only you will know the difference.

Wow - I am getting really close here! I feel like I’m on a treasure hunt. While I’ve figured out how to alter the style of the MathValue by creating another variable that turns the number into text (and then putting that inside of a div) - I am getting hung up (and breaking the page) when I try to include other css that stylizes the container for the text. I imagine this is because all that code is working (so well!) on the text value and doesn’t know how to affect anything outside of those characters. What if I want that perfectly formatted MathValue/text to live inside of a cool blue box that looks like this (where the 1927 is the MathValue/text): Here is the code that I hoped would work: skuid.componentType.register(‘AggregateAssetValue’, function(element) { var $ = skuid.$; var m = skuid.model.getModel(‘AssetValue’); var row = m.getFirstRow(); var field = row.assetValueSum; var MathValue = (field / 1000).toFixed(0); var text = " " + MathValue + " some words ($k)"; element.append( m.mergeRow(row,text) }); Here is the related CSS, stored as a static resource: .infoContainer{ height: 130px; width: 210px; margin-bottom: 27px; text-align: center; display: table; } .infoGraphic{ background-color: #3cb2e1; color: #fff; display: table-cell; vertical-align: middle; cursor: pointer; } .bigNumber{ font-size: 60px; } .infoText{ font-size: 14px; }

Try putting all the text in the “var text” defininition on one line.   I know it makes it ugly - but it is the only think I can see that is different than what I have done. 

!!! SUCCESS!!

I’ve never seen so many explanations marks in the forum before.  That’s amazing. 

We’re really glad you are doing the happy dance…