Display a calculated column display value in edit form?

Forums Dynamic Forms for SharePoint Display a calculated column display value in edit form?

This topic contains 40 replies, has 7 voices, and was last updated by  Alexander Bautz 1 month ago.

  • Author
    Posts
  • #8025

    Brett
    Participant

    Hi,

    Is there a way to display the value of a calculated column as a label in the Edit Form?
    So when a user is editing an item, some columns are Display only.

    For Example: I have a Calc Column of Fullname which is =[FirstName]+[Last Name].
    Which displays the persons name in the DisplayForm.aspx.

    I’ve tried adding this to the Custom JS of the Edit Form:
    $(“.fullusername”).html(getFieldValue(“FullName”,true));

    And added to a HTML field: <h2>Profile Name: <span class=”fullusername” /></h2>

    All I see is – Profile Name:

    Any help would be great.

    Brett

  • #8026

    Alexander Bautz
    Keymaster

    Hi,
    The calculated column is not available in EditForm, so you need to use a query to get the value.

    This is the HTML from the “Heading or HTML field”:

    <h2>Profile Name: <span class="fullusername" /></h2>

    I include it here because the quotes in your example is the wrong type because it is not wrapped in <code> tags

    Then add this to the Custom JS textarea in the “CSS and JS” tab:

    var qRes = spjs.utility.getItemByID(
    	{
    		"listName":_spPageContextInfo.pageListId,
    		"id":spjs.dffs.data.thisItemID,
    		"viewFields":["YourCalculatedColumn"]
    	}
    );
    $("span.fullusername").html(qRes["YourCalculatedColumn"].split(";#")[1]);

    Change “YourCalculatedColumn” to the FieldInternalName of your calculated column.

    Alexander

  • #8029

    Brett
    Participant

    Thanks Alexander,

    That worked perfectly.
    Thanks for your quick response too.

    Brett

  • #8042

    Brett
    Participant

    Hi Alexander,

    I spoke too soon. I’m trying to get more than one calculated column displayed and when I past the code a 2nd time, an Alert is displayed, “error in custom JS”.
    I’ve tried changing the var = qRes to qRes1 for the 2nd column name but still get error.
    Can you please tell me how to display multiple calculated columns on the display form?
    Many thanks for your efforts.

    • #8043

      Alexander Bautz
      Keymaster

      To get more fields back you can change the query like this:

      var qRes = spjs.utility.getItemByID(
      	{
      		"listName":_spPageContextInfo.pageListId,
      		"id":spjs.dffs.data.thisItemID,
      		"viewFields":["Column1","Column2","Column3","Column4"]
      	}
      );
      $("span.fullusername").html(qRes["Column1"].split(";#")[1]);
      $("span.anotherSelector").html(qRes["Column2"].split(";#")[1]);

      Alexander

  • #8046

    Brett
    Participant

    Thanks Alexander,
    I did actually try that method but was still getting an error in JS.
    Then after pasting the internal field name replacing Column2, it worked.
    I was so close, thanks for your help with this.

    • #8091

      Frank Montalti
      Participant

      Hi

      I am receiving an error per the attached message.
      Is there an issue with versions?
      Backend v4.200
      SPJS 1.183
      CSS 4.01

      The “FieldInternanName” of the calculated field is ‘RPN’

      I also added <h2>Profile RPN: <span class=”RPN” /></h2> to the HTML Heading field.

      Do I need to update my DFFS version?

      Thanks
      Frank

      Attachments:
      1. Error.docx
    • #8093

      Alexander Bautz
      Keymaster

      This is because you have an older verson of spjs-utility.js.

      Either update to the latest version, or change the query to

      var qRes = spjs_getItemByID(
      {
      		"listName":_spPageContextInfo.pageListId,
      		"id":spjs.dffs.data.thisItemID,
      		"viewFields":["Column1","Column2","Column3","Column4"]
      	}
      );

      Alexander

    • #8094

      Frank Montalti
      Participant

      Alexander,

      Thank you for the quick reply since it worked!

      Frank

  • #8322

    Kristoffer Bertsch
    Participant

    Hi. This is a newb question..where is the HTML Heading field to add the string?

    My calculated field is named Weighted Document Volme. Is the string correct below for when I add it?

    <h2>WeightedDocumentVolume: <span class=”WeightedDocumentVolume” /></h2>

    Thank you,
    -Kris

    • #8325

      Alexander Bautz
      Keymaster

      Hi,
      You find this in the “Tabs” configuration in the DFFS backend – it is named “Add heading or HTML”.

      Your text string looks good, but you need to adapt the “query” and the line setting the value in your heading to match the class you used on your <span>

      Alexander

    • #8352

      Kristoffer Bertsch
      Participant

      So..I’m not having any luck. I am getting an error..something to do with the “split”
      SCRIPT5007: Unable to get value of the property ‘split’: object is null or undefined
      EditForm.aspx?ID=65&IsDlg=1, line 1 character 1

      This is what my HTML field looks like:
      <h2>WeightedDocumentVolume: <span class=”WeightedDocumentVolume” /></h2>

      This is my JS:
      var qRes = spjs.utility.getItemByID(
      {
      “listName”:_spPageContextInfo.pageListId,
      “id”:spjs.dffs.data.thisItemID,
      “viewFields”:[“WeightedDocumentVolume”]
      }
      );
      $(“span.WeightedDocumentVolume”).html(qRes[“WeightedDocumentVolume”].split(“;#”)[1]);

      I appreciate the help!

  • #8326

    Kristoffer Bertsch
    Participant

    Awesome..thank you!

  • #8329

    Kristoffer Bertsch
    Participant

    So..I’m not having any luck. I am getting an error..something to do with the “split”
    SCRIPT5007: Unable to get value of the property ‘split’: object is null or undefined
    EditForm.aspx?ID=65&IsDlg=1, line 1 character 1

    This is what my HTML field looks like:
    <h2>WeightedDocumentVolume: <span class=”WeightedDocumentVolume” /></h2>

    This is my JS:
    var qRes = spjs.utility.getItemByID(
    {
    “listName”:_spPageContextInfo.pageListId,
    “id”:spjs.dffs.data.thisItemID,
    “viewFields”:[“WeightedDocumentVolume”]
    }
    );
    $(“span.WeightedDocumentVolume”).html(qRes[“WeightedDocumentVolume”].split(“;#”)[1]);

    I appreciate the help!

  • #8353

    Alexander Bautz
    Keymaster

    Hi,
    Try adding a “console.log” like this before the line “$(“span.WeightedDocumentVolume”)…”:

    console.log(qRes);

    To see the output you must have the developer console open – hit F12 > Console.

    Post the output here.

    Alexander

  • #8537

    dinfante
    Participant

    The calculations are displaying like below:

    Number of Nights:  2.00000000000000
    Hotel Total Cost:   358.000000000000

    How do I trim all the zero’s off or format the numbers properly?

    Thanks

    David

  • #8561

    dinfante
    Participant

    Nevermind, I figured it out.

    Here is the solution I came up with to trim the trailing zeros. I realize this is kind of killing a mosquito with a cannon so if anyone else has a shorter elegant solution you are welcome to school me.

    I put this code in the custom JS section along with the other custom jscode mention above by Alexander:

    $.fn.digits = function(){
    return this.each(function(){
    $(this).text(parseFloat($(this).text()).toFixed(2));
    })
    }

    $(“span.numbers2″).digits();

    Then in the “Heading or HTML field” I wrapped the (in Alexander’s case above)

    <span class=”fullusername” />

    like this

    <span class=”numbers2″><span class=”fullusername” /></span>

    you can remove the .toFixed(2) if you just want an integer with no decimal places.

    Hope this helps!

    • #8696

      Frank Montalti
      Participant

      Hi,

      I get a JS error when adding the code to the Misc section.
      Here’s my code therefore let me know if I doing something wrong since do not know Java.

      var qRes = spjs_getItemByID(
      {
      “listName”:_spPageContextInfo.pageListId,
      “id”:spjs.dffs.data.thisItemID,
      “viewFields”:[“RPN”,”Control_x0020_Plan_x0020_Require”]
      }
      );

      $(“span.RPN”).html(qRes[“RPN”].split(“;#”)[1]);
      $(“span.Control_x0020_Plan_x0020_Require”).html(qRes[“Control_x0020_Plan_x0020_Require”].split(“;#”)[1]);

      $.fn.digits = function(){
      return this.each(function(){
      $(this).text(parseFloat($(this).text()).toFixed(2));
      })
      }
      $(“span.numbers2″).digits();

      Thanks

      Frank

  • #8697

    Alexander Bautz
    Keymaster

    Hi,
    From your code snippet it looks like you must change the quotes in your last line – the last one looks like it is not right.

    If this is not the issue, please include the error message you receive.

    Alexander

  • #11191

    Zaruba.Ivan
    Participant

    Hi,
    can You help me please, how to get more calculated fields (numbers) and format them to keep only two decimals?
    Is it possible to add extra button to reload Editform with recalculated fields?

    Thanks Ivan

  • #11264

    Alexander Bautz
    Keymaster

    Hi,
    Have you looked over the comments and code snippets above? – if so, you must be a bit more specific as to where you are stuck.

    Alexander

  • #17969

    Zaruba.Ivan
    Participant

    Hi Alexander,
    your code worked perfectly in previous version of DFFS, but not in my current version DFFS Backend v4.4.3.10|CSS version: 4.37 / |spjs-utility version: 1.309.

    html:

    <h2>Value: <span class="promenna" /></h2>

    Custom JS:

    var qRes = spjs.utility.getItemByID(
    	{
    		"listName":_spPageContextInfo.pageListId,
    		"id":spjs.dffs.data.thisItemID,
    		"viewFields":["PodilEUx"]
    	}
    );
    $("span.promenna").html(qRes["PodilEUx"].split(";#")[1]);

    I have tried replace jQuery instead of $, but no success.

    Am I wrong? Any idea?

    Thank You,
    Ivan

    • This reply was modified 4 months, 4 weeks ago by  Zaruba.Ivan.
  • #17989

    Alexander Bautz
    Keymaster

    Do you see any errors in the dev console (hit F12 > Console)?

    If not, it’s most likely due to the new DFFS version being faster. This means that the placeholder isn’t ready before your query finishes and tries to put the value in it.

    Try wrapping the function call in a setTimeout function – giving it a delay of form example 500ms.

    Alexander

  • #17993

    Zaruba.Ivan
    Participant

    Hi,

    Thank You very much. You are right, wrapping the function call helped.

    var qRes = spjs.utility.getItemByID(
    	{
    		"listName":_spPageContextInfo.pageListId,
    		"id":spjs.dffs.data.thisItemID,
    		"viewFields":["TestFormula"]
    	}
    );
    
    setTimeout(function(){
     $("span.promenna").html(qRes["TestFormula"].split(";#")[1]);
    },500);

    Ivan

    • This reply was modified 4 months, 3 weeks ago by  Zaruba.Ivan.
  • #18716

    Myriam Fica
    Participant

    Alexander,

    I am using the following version Dynamic Forms for SharePoint DFFS Backend v4.4.1.2|CSS version: 4.16 / |spjs-utility version: 1.267
    – by Alexander Bautz / SPJSBlog.com

    I have used all the options given here to display the value of a calculated column as a label in the Edit Form. However, I haven’t had any luck! I keep on getting an error! Does this have anything to do with the dffs version I am using? If so, do you have any examples of how to obtain this result using this version or do I need to install a new version? Thank you very much!

  • #18746

    Alexander Bautz
    Keymaster

    This code should work with all versions of DFFS. What kind of error do you get?

    PS: You must ensure the class of the span in the selector to set the value is correct (same as you have put as placeholder in the tab). Also, the field name in the “viewFields” must be correct and used in the “qRes” object when setting the value.

    Alexander

  • #18758

    Myriam Fica
    Participant

    Alexander,

    This is what I have:

    <h2>Grand Total: <span class=”grandtotal” /></h2>

    var qRes = spjs.utility.getItemByID(
    {
    “listname”:_spPageContextInfo.pageListId,
    “id”:spjs.dffs.data.thisItemID,
    “viewFields”:[“Grand_x0020_Total”]
    }
    );
    $(“span.grandtotal”).html(qRes[“Grand_x0020_Total”].split(“;#”)[1]);

    It does not accept “_” in the “Grand_x0020_Total” in the last line. It suggests that the “Grand_x0020_Total” be written in dot notation. I insert the dot notation and I get the same error (“Grand_x0020_Total” is the internal name). See error below:

    DFFS there is an error in the custom JS textarea

    Type error: Cannot read property “Grand_x0020_Total” of null

    It needs to be shown on new, edit and display form!

    Your help is very much appreciated!

  • #18833

    Myriam Fica
    Participant

    Alexander,
    Have you had a chance to look at the above code? Can you help? Thank you very much!

  • #18841

    Alexander Bautz
    Keymaster

    The error message “Cannot read property “Grand_x0020_Total” of null” means the query could not find the item. Try writing this in the console (hit F12 > Console) and tell me what it show:
    1#

    _spPageContextInfo.pageListId

    2#

    spjs.dffs.data.thisItemID

    Alexander

  • #18898

    Myriam Fica
    Participant

    Alexander,

    This is what I got when I typed the code you mentioned above:

    _spPageContextInfo.pageListId
    “{462c9de9-9c3e-456a-9da8-f576383107ef}”
    spjs.dffs.data.thisItemID
    “”
    Thanks!

  • #18901

    Alexander Bautz
    Keymaster

    spjs.dffs.data.thisItemID should have returned the ID of the list item – did you run the code when you had an existing list item open in EditForm (and not in a dialog)?

    Alexander

  • #18908

    Myriam Fica
    Participant

    Alexander,
    We are using New Form. It needs to display in New Form. Do we need a any code changes since it is a New Form?

    Thanks!

  • #18910

    Alexander Bautz
    Keymaster

    This code cannot be used in NewForm as it runs a query to get the values from the DB – and in NewForm the item does not exist yet.

    To do a calculation in NewForm you must build a custom function to pull in the values using

    var fieldOne = getFieldValue("FieldNameOfYourField");
    var fieldTwo = getFieldValue("FieldNameOfYourOtherField");
    // set the value in another field
    setFieldValue("TheFieldNameHere",fieldOne+fieldTwo);

    Depending on when you need to show the calculated value you must either have it trigger on change of the field(s), or trigger it on save of the item.

    You could also use the Set field value option in a DFFS rule.

    Alexander

  • #18917

    Myriam Fica
    Participant

    I want to send field values to a custom JS so that I don’t have to duplicate the function multiple times. How do I do this?

    Example:
    I tried javascriptfunctionname(fieldname1, fieldname2) inside the rule “run these functions” textbox, but got an error. I had javascriptfunctionname(total, price) {} function in the custom JS section.

    Keep in mind we are using New Form!

    Your help is very much appreciated!

  • #18959

    Myriam Fica
    Participant

    Alexander,

    Have you had a chance to read the last message I sent through this Forum?

    Thanks!

  • #18967

    Alexander Bautz
    Keymaster

    Sorry, I missed your question. Here is an example that pulls the value from three choice columns and writes it to a field named “Multiline”.

    function concatenateFieldsAndSaveToAnother(arr,separator,targetField){
        var a = [];
        jQuery.each(arr,function(i,fin){
            a.push(getFieldValue(fin));
        });
        setFieldValue(targetField,a.join(separator));
    }
    // Call it like this
    concatenateFieldsAndSaveToAnother(["ChoiceColumn1","ChoiceColumn2","ChoiceColumn3"]," - ","Multiline");

    Alexander

  • #19021

    Myriam Fica
    Participant

    Alexander,

    Is there a way to clone a New Form to an Edit and Display Form. If so, can you tell me how to do it?

    Thank you very much!

  • #19059

    Myriam Fica
    Participant

    Alexander,

    Cloning does NOT work!

    This is what I did:

    I deleted the Edit form. I got a warning, which I accepted. I was returned to the native SharePoint edit form. I scrolled to the bottom of the form, and clicked on the “Enhanced with DFFS” tag to open up the config again. I got a prompt that there is no config for this form — do you want to copy one from another form? I chose the New Form to copy from. I got a message stating that the cloned was successful. However, the configuration was not cloned at all which meant I have to duplicate the new form all over again???? Is there another way of cloning the new form?

    Thank you very much!

  • #19063

    Alexander Bautz
    Keymaster

    Hi,
    If you want to clone an existing form you can do it in a few different ways. If you have a relatively new DFFS version you can go to the “Export, Import and restore” tab and click “Browse restore points and deleted configurations”. This will show you a list of all configs for this form.

    If have an older version, or you want to clone a form from a different list you must enter the same tab in the “donor list” and select “Export” and copy the output, then go to the “receiver list” and click “Import” and paste the config and click “Import” again.

    You should also be able to do it like you have already done so I’m not sure exactly what could have happened here.

    Alexander

  • #19067

    Myriam Fica
    Participant

    I checked the “Misc” tab and I see the Export and Import Settings, but not “Browse restore points and deleted configuration”. I am using DFFS v4.4.1.2. Where is the option “Browse retore options and deleted configuration” in this version?

    Thank you very much!

  • #19069

    Alexander Bautz
    Keymaster

    This feature is not present in the version you have. If you upgrade to the latest version you will find it.

    Alexander

You must be logged in to reply to this topic.