Custom Field Renderer - To do Simple Calculations

Kaede HollandKaede Holland ✭✭✭✭
edited September 5, 2018 in Questions
I want to create a simple custom field renderer that will display the field's original value divided by 100. The datatype of this field is INTEGER. Can you guys help?
«1

Comments

  • J.J. 💎
    edited March 7, 2017
    Hi Kaede. You absolutely can do that with a custom field renderer and short snippet. I'll use an In-Line Snippet in this response, but any snippet type will do:
    var field = arguments[0];  var value = arguments[1];    field.element.append(value/100);
    Does that get you what you need?
  • J.J. 💎
    edited March 7, 2017
    It also just dawned on me that a formula field would probably do the trick too without any JavaScript. If that works for you, that's what I'd recommend.
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    Thank you for your help. Unfortunately, that didn't change the value at all. I don't think I can do a formula field for this - it is on the ContentLink object. Attaching a screenshot of the snippet + the field properties. The number doesn't change when I switch back and forth from standard to custom render.
  • J.J. 💎
    edited March 7, 2017
    You're right: no formula fields on the ContentDocumentLink object. This is odd though as I was able to get it working in our test Org: I did change one of the lines in the snippet, but that was just to get the CSS right. Here's the updated code:
    var field = arguments[0];  var value = arguments[1];  skuid.ui.fieldRenderers.TEXT[field.mode](field,value/100);
    What version of Skuid are you running? If you would, please post your XML and let me take a look. Thanks!
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    Skuid 3.3 Sorry - can't figure out how to get the xml to show up in here.
  • J.J. 💎
    edited March 7, 2017
    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.
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    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?
  • J.J. 💎
    edited March 7, 2017
    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));
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    Thank you for speaking this magic robot language that helps us tell computers what to do!
  • J.J. 💎
    edited March 7, 2017
    100010010001110100110100101001010000111... Thanks for being a part of our community!
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Ah yes - there are 10 kinds of people in the world. Those who understand binary and those that do not...
  • edited April 11, 2017
    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?
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    Hey Rob + other Skuid Folks, Can we revisit Glenn's question above, re: invoking custom field renderer in a template?
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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.
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    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?
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    That's correct.  Use the Alias there. 
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    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.
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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)     ); 
    <br>Where "mathValue" is the result you want to display. <br> <br>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.
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    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?
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    Ahhh!!!! I am figuring it out!!
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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. 
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    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 = "<div class='infoContainer'> <div class='infoGraphic'> <div class='bigNumber'>" + MathValue + "</div> <div class='infoText'>some words ($k)</div></div></div>"; 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; }
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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. 
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SUCCESS!!
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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...
  • Kaede HollandKaede Holland ✭✭✭✭
    edited September 5, 2018
    These kinds of things make me very happy.
  • edited October 11, 2013
    I have an aggregate model that sums two fields....Field A & Field B....I would like to have a custom field (Field C) that displays Field B as a percentage of Field A.. Field A (100) Field B (10) Field C (10%) Is it possible to leverage a Javascript component tied to an inline resource....to perform the calculation? Thank you
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Follow the instructions I gave Kaede above,  ensure you pull in both field A and field B as different variables  (var FieldB = row.FIELDNAME ) 
    Then the MathValue line is where you would perform the calculation that produces Field C that you display. 

    This works for showing the value in a custom component.   If you want this value to display in a table or field editor use a custom renderer similar to what J described at the top of this thread. 
  • edited October 11, 2013
    Rob, Are there any tutorials you can point me to? I have created my summary/aggregate table....now I just need to figure out how create my Field C...and get it to display in my summary/aggregate table Field A (100) Field B (10) Field C (10%). So in order to create Field C....I would need to use Javascript in an In-Line (snippet)...not sure what my javascript code should look like....and I'm not sure how to drag/drop the Custom Snippet field onto my table (once I figure out the javascript).... I really appreciate any help....If I'm able to get this working....this would be extremely helpful.... Thank you guys for any help....and have a great weekend.
  • edited October 14, 2013
    Thanks again for any advice. I'm trying to understand...the steps for adding a Custom Field (Field C)...to my aggregate table. I do not believe the Template component will allow me to calculate....and I'm not able to drag a Custom component into my aggregate table... thanks
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!