Display a calculated column display value in edit form?

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

Viewing 45 reply threads
  • 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 2 years, 9 months 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 2 years, 9 months 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

    • #19507
      Myriam Fica
      Participant

      Alexander,

      We did upgrade the DFFS Package to v4.4.3.37 and I was finally able to clone the new form into an edit and display form successfully. However, I have some questions for you:

      1. How can we rename the columns in the display form configuration?

      2. How can we print the edit and display form? When trying to print the forms, we noticed that there was a lot of information missing. Perhaps, you have an answer for us!

      Thank you very much!

    • #19560
      Alexander Bautz
      Keymaster

      Hi,
      Sorry for the late reply.

      1: DFFS uses he field name configured in the list settings. Use the link to list settings found in the “Fields” tab.
      2: DFFS has a built in print function to print DispForm only: https://spjsblog.com/dffs/dffs-user-manual/#Print_active_tab

      Alexander

    • #19674
      Myriam Fica
      Participant

      Alexander,

      Here it is another question for you:

      When we use a rule for drop down or datetime field and try to execute a js function in js script area (new form), on field change, we get js errors in the browser console window of “too much recursion”. How do we run a simple getfieldvalue function when a dropdown value is changed or a datetime field is changed without getting the error?

      Your help is very much appreciated!

    • #19726
      Alexander Bautz
      Keymaster

      I’m not sure I understand you correctly, but if you use a rule triggering on field change to trigger a script to update the same field, it will trigger again – causing a recursive function.

      If you explain in more detail what you try to do I’ll do my best to help you.

      Alexander

    • #19763
      Myriam Fica
      Participant

      Alexander,

      We want to take the value from a dropdown box and a date selected from date field and calculate an invoice number based on those two fields, so for example:

      dropdown concate with date (without – or /, numbers only) and put that value into an invoice textbox on either field change dropdown or date field.

      Thank you very much!

      • #19815
        Alexander Bautz
        Keymaster

        Hi,
        Add this function to your Custom JS to generate the number on save:

        function dffs_PreSaveAction(){
            var str = getFieldValue("DROPDOWN_FIELD_INTERNAL_NAME");
            var date = jQuery("#dffs_DATE_FIELD_INTERNAL_NAME input:text").val().replace(/\D/g,"");
            setFieldValue("INVOICENUMBER_FIELD_INTERNAL_NAME", str + date);
        }

        Alexander

    • #19765
      Myriam Fica
      Participant

      Alexander,

      I forgot to ask this question too:

      How do you hide a few headers without hiding ALL the headers in the Display form? We used CSS, but every time we did it, it changed all the headers. There must be a simple way to do it. Any ideas?

      Thank you very much!

      • #19817
        Alexander Bautz
        Keymaster

        If you want to use CSS to hide it, you can target a specific heading by using the “unique id” like this (the example hides a heading named “heading123”):

        #dffsHeading_heading123{
            /* add your css here */
        }

        You can use the developer tools (right click and select Inspect to look at the HTML).

        Please note that you can hide heading in a rule by adding the unique id in the “Visible headings or elements” field.

        Alexander

    • #19862
      Myriam Fica
      Participant

      Alexander

      The below function does not work to save a calculated value between date field and drop down. We did sub the field internal names. Also we would like to do this real time on form and not just on save.

      function dffs_PreSaveAction(){
      var str = getFieldValue(“DROPDOWN_FIELD_INTERNAL_NAME”);
      var date = jQuery(“#dffs_DATE_FIELD_INTERNAL_NAME input:text”).val().replace(/\D/g,””);
      setFieldValue(“INVOICENUMBER_FIELD_INTERNAL_NAME”, str + date);
      }

      As for as hiding a field the below did not work when we subed the header name in below. Can you explain more on how to hide a header name on the displayform by a rule? I tried whatyou mentioned in a rule, but that too did not hide the header on the displayform.

      #dffsHeading_heading123{
      /* add your css here */
      }

      To be specific, we are not looking to hide a heading, we are looking to hide a column name!

      Thank you very much

      • This reply was modified 2 years, 3 months ago by Myriam Fica.
    • #19898
      Alexander Bautz
      Keymaster

      You can modify it like this to make it “live”. Change “Status”, “DateColumn1” and “TargetCol” with the internal name of your columns:

      // Change on dropdown
      jQuery("#dffs_Status select").on("change",function(){
      	var statusVal = jQuery(this).val();
      	var date = jQuery("#dffs_DateColumn1 input").val().replace(/\D/g,"");
      	setFieldValue("test123",statusVal+date);
      });
      jQuery("#dffs_DateColumn1 input").on("change blur",function(){
      	var statusVal = jQuery("#dffs_Status select").val();
      	var date = jQuery(this).val().replace(/\D/g,"");
      	setFieldValue("test123",statusVal+date);
      });

      Regarding hiding “a column name” – do you mean hiding the column label (like the text “Title” for the Title column)?

      Alexander

    • #19903
      Myriam Fica
      Participant

      Yes, I meant hiding the column label!

      Thank you again!

    • #19905
      Alexander Bautz
      Keymaster

      Use this Custom JS to hid the first column in the formtable, and stretch the body column over both columns.

      jQuery("#dffs_Status td.ms-formlabel").hide().next().attr("colspan",2);

      Or use this to only hide the text in the column:

      jQuery("#dffs_Status td.ms-formlabel *").hide();

      Alexander

    • #19937
      Myriam Fica
      Participant

      Alexander,

      We are trying to hide multiple column labels. If, indeed, the first column label was hidden with no problem, hiding the second column label gave us an error. I am including here the coding and the error message:

      //format hide columns
      jQuery(“#dffs_Request td.ms-formlabel *”).hide();
      jQuery(“#dffs_Total_x0020_15 td.ms-formlabel *”).hide();
      jQuery(“#dffs_Shipped td.ms-formlabel *”).hide();
      jQuery(“#dffs_Request td.ms-formlabel *”).attr(“width”,”500″);

      jquery(“#dffs_Request_x0020_2 td.ms-formlabel *”).hide();
      jQuery(“#dffs_Total_x0020_2 td.ms-formlabel *”).hide();
      jQuery(“#dffs_Shipped_x0020_2 td.ms-formlabel *”).hide();
      jQuery(“#dffs_Request_x0020_2 td.ms-formlabel *”).attr(“width”,”500″);

      And this is the ERROR MESSAGE:

      DFFS: There is an error in the Custom JS textarea:

      *************************************

      ReferenceError: jquery is not defined

      *************************************

      What are we missing here? Since the first column label was hidden, then we assumed that there would be no problems hiding the rest of the column labels. Do you have any other suggestions or solutions?

      Your help is very much appreciated!

    • #19995
      Alexander Bautz
      Keymaster

      Hi,
      You have typed “jquery” in lower case in this line:

      jquery(“#dffs_Request_x0020_2 td.ms-formlabel *”).hide();

      change it to

      jQuery(“#dffs_Request_x0020_2 td.ms-formlabel *”).hide();

      Alexander

Viewing 45 reply threads
  • You must be logged in to reply to this topic.