You are viewing limited content. For full access, please sign in.

Question

Question

How to rename label row from a table by using java (to create a bilingual forms)

Forms
Updated March 29, 2018
asked on October 29, 2014

Hi guys and girls,

I am trying to create a bilingual forms by switching all the label field by English or french language base on a radio button choice.

 

I have almost done my preliminary test but get issue to rename individual label row from a table. the table has fixed row . Well the Customer request to get a employee evaluation form.

 

toggle to this other screen shot when frech (Français) is selected

 

So how can I change my english static row label name by another french static row label name

means row 1 = rangée 1 or any other static name

 

here my initial code that works fine for now to togle all the other label from English to french and vice-versa

 

$(document).ready(function() {
  $('#q4').click(function () {
     
    if($('input[value="Francais"]').is(':checked'))
       	{
        $('#q4 .cf-label').text("Langage");
        $('#q1 label').text("Nom");
        $('#q19 .cf-section-header').text("Partie 1 de l'évaluation");
        $('#q16 label').text("Classement");
        $('#q17 label').text("Marque");         
        
        }
    else {     
		$('#q4 .cf-label').text("Language");
      	$('#q1 label').text("Name");
      	$('#q19 .cf-section-header').text("Evaluation Part 1");
      	$('#q16 label').text("Rating");
        $('#q17 label').text("Score");
      
    	}
  }); 
});

 

0 0

Answer

SELECTED ANSWER
replied on October 29, 2014

Can't you just paste this into your code from above? Just add new lines for each question.

if ... {
  $('#qN tbody tr:nth-child(1) td.col0').text("QUESTION1_Francais");
  $('#qN tbody tr:nth-child(2) td.col0').text("QUESTION2_Francais");
  ...
}else{
  $('#qN tbody tr:nth-child(1) td.col0').text("QUESTION1_English");
  $('#qN tbody tr:nth-child(2) td.col0').text("QUESTION2_English");
}

 

0 0

Replies

replied on October 29, 2014 • Show version history

I tested this, it should work. You may need to change the replace part with the special character version of the word. 

$('.col0').each(function() {
       var str = $(this).text();
       $(this).text(str.replace("Row","rangee"));
   });

You can add to it by changing the submit button value, here's a sample:

$('.action-btn').attr('value','Submit');

Not sure how that will affect the process modeler though, might be better to hide the original submit button and make a fake one that has the language you wish and when clicked, it triggers the normal submit button

0 0
replied on October 29, 2014

Well that was just a simple example but each row will be a different sentence.

row 1 will be rate employee comunication

row 2 = Rate employee performance

etc...

so the string replacement will not be an option for what I want to do.

 

I cannot create English and french section because I need to use the variables and I cannot assign the same variable to a diferent field in the same forms.

 

So the other option could be use 2 different forms but I can I send the form  to a manager that could be french or english

 

the choice should be choose by the person open the form.

0 0
replied on October 29, 2014 
var count = 0;
      $('.col0').each(function() {
       count += 1;
       switch(count) {
       case '1': 
                $(this).text(   );
                    break;
       case '2':
                $(this).text(   );
                    break;
      }
   });

That should work, but you can also use the exact wording in the switch cases and use the 'str' variable type. havent tested this out though

0 0
replied on October 29, 2014

This one's a little tricky, because there is no good "handle" in the HTML to target a particular row label, they are all just text in a table data element with the class "col0". Also, whatever code Forms runs to label the rows will run again and rename anything if a row is added or deleted. You can use this behavior to your advantage though to automatically rename the rows: (admittedly, this is a bit clunky...)

$('#qN tbody.kx-repeatable').attr("repeatrowlabel","NEWLABEL {n}");
$('#qN .cf-table-add-row').trigger("click");
$('#qN .form-del-field:last').trigger("click");

 

0 0
View 3 previous replies
replied on October 29, 2014

FYI... Ken's answer is cleaner for a table with a fixed number of rows, mine should work if you need it to be flexible in length.

0 0
replied on October 29, 2014

Agreed. Rene said the table was fixed rows. Your solution though is improper. You are making an assumption and causing potential problems. You definitely should change the attribute, but removing and adding a row is a bad idea. What if you are just trying to see how it is in the other language and then change it back. Suddenly you have two rows missing information. You should instead combine my solution of renaming the rows there along with your solution of changing the attribute for the naming convention

0 0
replied on October 29, 2014

In the forms I try to do, there is no adding row. the tables will have a fixed number of row.

 

What I want to do is a kind of Survey forms that the user or manager can toggle from English to frech or vice-versa.

so all my Row will be a question or a fact that the user will have to rate.

0 0
replied on October 29, 2014

Ken... this adds a new empty row, then removes it. No data will be lost from the table. Sure, it isn't ideal, but I don't know of another way to trigger the built-in Forms code that renames the rows automatically. Editting the repeatrowlabel attribute itself isn't enough.

0 0
replied on October 29, 2014

Ah, That's the difference between reading code and running it. Didn't realize you were hijacking built in functionality for that. 

0 0
replied on October 29, 2014

Thank you both, your are so kind

0 0
replied on October 29, 2014

If you want to manually edit each row name, you can use the CSS selector :nth-child

Example:

$('#qN tbody tr:nth-child(1) td.col0').text("NEW_ROW1_LABEL")

 

0 0
View 1 previous reply
replied on October 29, 2014

could it be integrate in the java script because I need to change the label row name base on the language radio button selected by the user using the form

0 0
replied on October 29, 2014

Yes this is worked, I can change it with this

 

thanks

0 0
SELECTED ANSWER
replied on October 29, 2014

Can't you just paste this into your code from above? Just add new lines for each question.

if ... {
  $('#qN tbody tr:nth-child(1) td.col0').text("QUESTION1_Francais");
  $('#qN tbody tr:nth-child(2) td.col0').text("QUESTION2_Francais");
  ...
}else{
  $('#qN tbody tr:nth-child(1) td.col0').text("QUESTION1_English");
  $('#qN tbody tr:nth-child(2) td.col0').text("QUESTION2_English");
}

 

0 0
replied on October 29, 2014

Here my final code base on your answer and it works fine. So that give me a great help. Thanks

$(document).ready(function() {
  $('#q4').click(function () {
     
    if($('input[value="Francais"]').is(':checked'))
       	{
        $('#q4 .cf-label').text("Langage");
        $('#q1 label').text("Nom");
        $('#q19 .cf-section-header').text("Partie 1 de l'évaluation");
        $('#q16 label').text("Classement");
        $('#q17 label').text("Marque");
          $('#q19 tbody tr:nth-child(1) td.col0').text("question 1");
          $('#q19 tbody tr:nth-child(2) td.col0').text("performance");
          $('#q19 tbody tr:nth-child(3) td.col0').text("communication");
          $('#q19 tbody tr:nth-child(4) td.col0').text("rendement");
          $('#q19 tbody tr:nth-child(5) td.col0').text("productivité");
          $('#q19 tbody tr:nth-child(6) td.col0').text("attitude");
          $('#q19 tbody tr:nth-child(7) td.col0').text("connaissance");
          
        
        }
    else {     
		$('#q4 .cf-label').text("Language");
      	$('#q1 label').text("Name");
      	$('#q19 .cf-section-header').text("Evaluation Part 1");
      	$('#q16 label').text("Rating");
        $('#q17 label').text("Score");
      	$('#q19 tbody tr:nth-child(1) td.col0').text("Row 1");
          $('#q19 tbody tr:nth-child(2) td.col0').text("En performance");
          $('#q19 tbody tr:nth-child(3) td.col0').text("En communication");
          $('#q19 tbody tr:nth-child(4) td.col0').text("En rendement");
          $('#q19 tbody tr:nth-child(5) td.col0').text("En productivité");
          $('#q19 tbody tr:nth-child(6) td.col0').text("En attitude");
          $('#q19 tbody tr:nth-child(7) td.col0').text("En connaissance");
    	}
  }); 
});

 

2 0
replied on October 30, 2014

As a small side question, is it possible to add some code to a custom HTML field that would cause a notification at the top of the screen recommending to users the option of changing languages using Google Translate? Maybe it would reduce the amount of hard coding, or even allow you to send specific language/wording where possible and let it handle the more general stuff. Would be a lot easier if done that way.

0 0
replied on March 29, 2018

Were you able to identify the 'add new row' text for a table?  I want to change the words to another language also; but, I can't seem to identify the right element to change.  The class is cf-table-add-row. but, .text("this is other language add") doesn't work  I've tried everything; so, any idea you have would be appreciated. thank you

0 0
replied on March 29, 2018

Hi Beth,

My case was a Survey forms, so the number of column and row were fixed.

And you have all the info in this post to achieve what you want to do. or explain more in detail what you want to do

regards,

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...