Display a calculated column display value in edit form?

[Brett]

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

[Alexander Bautz]

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

[Brett]

Thanks Alexander,

That worked perfectly.
Thanks for your quick response too.

Brett

[Brett]

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.

[Alexander Bautz]

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

[Brett]

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.

[Frank Montalti]

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

[Alexander Bautz]

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

[Frank Montalti]

Alexander,

Thank you for the quick reply since it worked!

Frank

[Kristoffer Bertsch]

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

[Alexander Bautz]

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

[Kristoffer Bertsch]

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!

[Kristoffer Bertsch]

Awesome..thank you!

[Kristoffer Bertsch]

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!

[Alexander Bautz]

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

[dinfante]

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

[dinfante]

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!

[Frank Montalti]

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

[Alexander Bautz]

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

[Zaruba.Ivan]

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

[Alexander Bautz]

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

[Zaruba.Ivan]

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 6 years, 7 months ago by Zaruba.Ivan.

[Alexander Bautz]

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

[Zaruba.Ivan]

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 6 years, 7 months ago by Zaruba.Ivan.

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Myriam Fica]

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

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Myriam Fica]

Alexander,

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

Thanks!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

Alexander

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

[Myriam Fica]

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 6 years, 2 months ago by Myriam Fica.

[Alexander Bautz]

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

[Myriam Fica]

Yes, I meant hiding the column label!

Thank you again!

[Alexander Bautz]

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

[Myriam Fica]

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!

[Alexander Bautz]

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

[Author]

Posts