Formatting text using JavaScript in NintexForms

J
Badge +2

I have a textfield in Nintex Forms to which I assigned the following JavaScript variable name:

 

 

varAirplaneContent

This textfield has content inside which has a wrong format:

7466i2CC06236C5D7DA0E.png

 

I wanted to use the NintexForm user defined JavaScript to edit the content of this field.

 

I tried using 

var text = 'Reservation - Airplane Content';
var json = JSON.parse(text);
var count = json.length;
var flightDataSplitted;

for (var i=0; i < count; i++){        
  flightDataSplitted = json[i].Title.split(",");   
  console.log(flightDataSplitted);
}

function testFunction(){
  console.log("testFunction called!");
  NWF$('#'+varAirplaneContent).val(flightDataSplitted); 
}

NWF$(document).ready(function(){   
    testFunction();
});

but it doesn't work:

7465iB5C5CA4B4438A689.png

The content in the field is still the same. What am I doing wrong?

15 replies

T
Badge +8

Hi,

 

in your for-loop you are splitting your values at "," - why? There is no "," in your variable you could split by.

This makes it so that the value returned is an array, which I think can not be written to the single line text field without using ".toString()".

Also I think the script provided can not work, because you are operating on the text "Reservation - Airplane Content" and not the form data itself (even though your screenshots show different).

 

What do you want the text field in the end to look like?

I came up with this js, which puts the destinations next to each other separated by " // " maybe you can adapt it to your needs?

//text should of course be some data via form-variable, not hardcoded
var text =
  '[{ "Id": 22, "Title": "München - Stockholm 31.01.2017 15:00" },{ "Id": 23, "Title": "Stockholm - München 01.02.2017 18:00" }]';
//turn text into an object we can work with
var parsedData = JSON.parse(text);

//holds the formatted text
var flightData = "";

for (var i = 0; i < parsedData.length; i++) {
  console.log(parsedData[i]);
  console.log(parsedData[i].Title);
  flightData += parsedData[i].Title;

  //if it is not the last iteration
  if (i < parsedData.length - 1) {
    flightData += " // ";
  }
}

console.log(flightData); //-> München - Stockholm 31.01.2017 15:00 // Stockholm - München 01.02.2017 18:00

This part of your script looks correc to me. Have you tried setting it to some hard coded string to see if it works? I think in your script flightDataSplitted is an array, so that may cause the problem 

NWF$('#'+varAirplaneContent).val(flightDataSplitted);
J
Badge +2

Thank you very much for your reply Tarf!

 

It looks perfectly fine on JSFiddle, but the problem is like you said 

NWF$('#'+varAirplaneContent).val(flightDataSplitted);

Even if I set the .val to a hardcoded String like "Test" it doesn't replace the content and the console doesn't show an error either.

I think the problem is the JSON format, but I don't know how the .val(); needs to be formatted.

 

7473iE877A0943EC34D08.png

 

To get the input I also tried

 

console.log("varAirplaneContent: " + NWF$("[data-controlname='ReservationAirplaneContent'] [c2516f79-978c-435e-9a74-439b82ed7276][name]").val());

but it says 

varAirplaneContent: undefined

 

Do you have any idea how to fix this? Thanks again! :)

T
Badge +8

What does you console show when you execute the code?

For example:7474i00DED32F2CAE4628.png

What type of column is "Reservation - Airplane Content"? Single Line of Text?

J
Badge +2

Multiple lines of text.

This is what the console shows:

 

7475i0513425EE9A6BF39.png

T
Badge +8

Is it multiple lines with rich or just plain text?

Plain text can be changed using NWF$("#" + myVariable).val("My Text").

Please make sure to use the correct syntax for the call. In your screenshot you are providing text instead of the variable and forgot the leading "#".

J
Badge +2

My bad, here's the correct syntax:

 

7476i2D952F4182E4F54A.png

It's plain text.

T
Badge +8

please make sure to call it like so "#" + your_variable_name.

NWF$("#" + varAirplaneContent).val("Test")

In this case, it is all text and therefore no field is found.

Is your field disabled or has any other special configuration?

J
Badge +2

Oh, didn't think that would make a difference, but apparently it does:

 

7478i218FA097866343B1.png

 

I looked, but the field is not disabled and doesn't have any other special configuration..

T
Badge +8

Thats odd, your selector does not seem to find the control to set.

Usually you should see results (for example the length property for number of matches)

7479i678D612CA82172E1.png

Is your form loaded in view mode?

I am able to reproduce this behaviour in view mode but not in edit or new mode

J
Badge +2

Yes it is in View Mode.

 

Sorry I should have written that earlier, but I want it to be formatted properly in View Mode because there are lots of list items that have this (wrong) format. Is that possible?

T
Badge +8

Okay I managed to do something but I don´t think this is good practice.

 

In Nintex Forms designer, apply a class to your multi-line textbox (i did "myControl")

 

Use the following script to change the field (nothing will be saved to the item as we are only in view mode). THis may cause weird behaviour for new and edit modes, I haven´t tested that.

 

//change this according to your class. Do not remove the leading dot
var selector = ".myControl"

//read the textContent of the single line box
var text = NWF$(selector)[0].textContent;
var parsedData = JSON.parse(text);

var flightData = "";

for (var i = 0; i < parsedData.length; i++) {
  console.log(parsedData[i]);
  console.log(parsedData[i].Title);
  flightData += parsedData[i].Title;

  //if it is not the last iteration
  if (i < parsedData.length - 1) {
    flightData += " // ";
  }
}
console.log(flightData);
NWF$(selector)[0].textContent = flightData;

Before:

7481iB99D742D243C9C42.png

After: 7480i2C33CB0A001FD4DE.png Edit: Screenshots

J
Badge +2

Thank you very much for all your help!

 

It works now, but as you guessed it affects the form in Edit Mode because the user can't edit the textbox anymore.Do you know if/how this can be avoided as well?

 

And is it also possible to get a new line after each title?

I tried 

if (i < parsedData.length - 1) {
     flightData += " '
'  ";
}

but it doesn't work.

 

T
Badge +8

For the newline:

Apply this css to your custom class:

white-space: pre-wrap;

and should render correctly.

 

Maybe you can wrap all the replacing-stuff in a function and only call the function in view mode? I don´t know if you can use the variables (Common:isEditMode, Common:isDisplayMode, Common:isNewMode) in js. 

J
Badge +2

The new line works perfectly now as well after applying the CSS.

 

Thanks to you I figured out that using 

var selector = ".myControl";
var text = NWF$(selector)[0].textContent;
var parsedData = JSON.parse(text);
var flightData = "";

function formatAirplaneContent(){
  for (var i = 0; i < parsedData.length; i++) {
     console.log(parsedData[i]);   
     console.log(parsedData[i].Title);
  flightData += parsedData[i].Title;
    if (i < parsedData.length - 1) {
         flightData += "
";
    }
  }
  console.log(flightData);
  NWF$(selector)[0].textContent = flightData;
}


NWF$(document).ready(function(){
   if({Common:IsDisplayMode}){
        formatAirplaneContent();
   }
});

fixes the other problem! :)

 

Do you know why the code reformats itself when I open Nintex Forms again or how it can be avoided?

It works, but it always changes the formatting to something like this:

 

var selector = ".myControl";var text = NWF$(selector)[0].textContent;var parsedData = JSON.parse(text);var flightData = "";
function formatAirplaneContent(){  for (var i = 0; i < parsedData.length; i++) {     console.log(parsedData[i]);        console.log(parsedData[i].Title);  flightData += parsedData[i].Title;    if (i < parsedData.length - 1) {         flightData += "
";    }  }  console.log(flightData);  NWF$(selector)[0].textContent = flightData;}

NWF$(document).ready(function(){   if(Im Ansichtsmodus){        formatAirplaneContent();   }});
T
Badge +8

I don´t think the reformatting can be avoided. I always edit code in an external editor with formatting functionality and only copy paste between nintex forms and the editor.

I think nintex does some basic code-minification so that the form loads faster.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings