I have a js fiddle to show the issue that I am facing.
Tabulator 'email' column has freetext set to true to allow the user to set the value of the cell to a free text entry as follows:
editorParams:{
values:{
"steve#boberson.com":"steve",
"bob#jimmerson.com":"bob",
"jim#stevenson.com":"jim",
"harvy#david.com":"Harvy",
"ken#thompson.com":"Ken",
"denny#beckham.com":"Denny"
},
freetext:true,
searchFunc:function(term, values){
console.log("term and val "+term +" \n"+values);
var matchedEntries = {};
var matchFound = false;
for(var key in values) {
if(key.includes(term)){
matchFound = true;
matchedEntries[key] = values[key];
}
}
if(matchFound){
return matchedEntries;
}
else{
return {term: term};
}
}
}}
Select one of the values from the selector list displayed, say steve, value being 'steve#bobberson.com'.
Then after the value is selected, click on the same tabulator cell, the value displayed suddenly changes to the label.When user clicks enter key now, the label is selected instead of the value,.ie. steve will be displayed instead of steve#bobberson.com
If this is not a bug, how do I make sure that the value steve#bobberson.com remains selected after clicking enter. This is because freetext option is set to true in the editorParams of the column
Attached a gif showing the issue
That is not a bug,
With freetext enabled, users are able to enter any text they like in that field and it will be saved which is exactly what is happening in the example
If they select the email address again from the list then it is correctly saved.
It is an either/or scenario, you can either restrict the users to selecting specific values from the list OR you can allow them freetext in which case anything goes.
If you want a different behaviour then you can always build a custom editor that works in the way you want. Checkout the Custom Editor Documentation for more information
Related
this one should be simple for tabulator experts (but not for me)...
i have a tabulator table. I've made one column, "edit" clickable as shown below. it works fine and returns the value of the cell i clicked. HOWEVER, that's not what i need. I need to get the value of ANOTHER cell in the same row (column "transactionID"). I know how you would do it in other languages, just use x and y values to move over 3 columns and get the value. but how is it done in tabulator? by the cloumn name? I can't find any example code on how to accomplish this.
This is the snippet from my tabulator init :
{title:"edit" , name:"edit", formatter:myformatter, cellClick:function(e, cell){alert("cell clicked - " + cell.getValue())}},
i just need to make it return value for "transactionID" instead of "edit"
and before anyone asks, no, i can't just make "transactionID" clickable. I need the clickable cell to be separate.
thanks for your help!
ok so since i got no answers to this question, i slogged thru and figured it out myself eventually. To save others time who run into this in the future, i am posting how i solved it. code with comments below :
// this goes in your tabulator column definitions. In my example, "edit" is a column
with an image button that on clicking, redirects to another page depending on what cell was clicked
{title:"" , name:"edit", formatter:openIcon, headerSort:false, cellClick:function(e, cell){
var re = cell.getRow(cell); // get the row of the cell that was clicked
var thenum = re.getData().id; // gets the value of column "id" in the same row
var theurl = "editTransaction.php?trans="+thenum; // creates my url
console.log(theurl); // perform whatever action you need to do. replace this.
}},
If you are using react-tabulator and you want to access some column data to perform a specific action ,here is the snippet for your help.
import { reactFormatter } from "react-tabulator";
// your React Component to use in a cell
function CustomFormatter(props: any) {
const rowData = props.cell._cell.row.data;
return <a onClick={() => alert(rowData.customField)}{cellData.customField }</a>;
}
const columns = [{ title: 'Custom', field: 'custom', align: 'center', formatter: reactFormatter(<CustomFormatter />) },
]
I have set up a producttable (kind of a shopping-cart) with one editable column (product amount) like this :
{
title:"Aantal",
field:"product_amount",
align:"center",
responsive: 3,
validator:["required","numeric"],
editor:amountEditor,
cellEdited:recalcPrices,
validator:["required","numeric","min:1","max:10"]
},
I am using a custom jquery amountEditor because this one looks somewhat nicer than the builtin editor. Rows are added to the shopping cart tabel (copied from another producttable) by a button click. Everything works fine but I would like that the user doesn't have to click on the editable columnfield himself. So the only one editable field should be triggered automatically / programmatically after the row is added to the table.
I think I have to combine these commands somehow in the table definition:
rowAdded:function(row){
var cell = row.getCell("product_amount");
cell.edit();
},
I tried everything but I cannot find the right combination to get this work. I can get var rowElement = row.getElement(), however var cells = row.getCells() or var cell = row.getCell(column) look empty. Any help is much appreciated.
You need to scroll to the row using the scrollTo function on the row component to ensure it is visible before you can trigger an edit on the cell, so your rowAdded callback wants to look like this:
rowAdded:function(row){
row.scrollTo().then(function(){
row.getCell("product_amount").edit();
});
},
For a custom page type, I have a multiple choice form filed as seen in image 1 and 2. I was able to set it up (using jquery) so that when I click on other checkboxes belonging to a another field, the checkbox Label and value of this field is changed accordingly as seen in image 3 - 'Author1', 'Author2', 'Author3' were replaced with something else.
The problem is when I hit the Save button, all of my new label/value are not Saved, but the checkbox value and label return to its original value.
Is there a way to make it so that these checkboxes can accept new value and the new value can be saved. Thanks!
Where does authors values come from? Database? You should be able to use SQL query as data source for multiple choice control. This will allow you to store actual values into database whenever you save a page on the Form tab.
So the idea is to load actual values, replace them with 'AuthorN' and change back to original value when checked.
I've set up an example which might help you. I've created a form with three fields:
FirstAuthor
Type: Integer
Form control: Radio buttons
Data source: SQL Query (select userid,username from cms_user)
Has depending fields: true
SecondAuthor
Type: Integer
Form control: Radio buttons
Data source: SQL Query (select userid,username from cms_user)
Has depending fields: true
OrderedAuthors
Type: Text (1000)
Form control: Label
Default value: {% (if(firstauthor>0) { GlobalObjects.Users.Where("userid="+firstauthor)[0].UserName } else {""}) + ", " + (if(secondauthor>0) {GlobalObjects.Users.Where("userid="+secondauthor)[0].UserName} else {""} #%}
Depends on another field: true
I guess you have a list of authors somewhere in the database so you can just replace CMS_User table with your table. Then all you need to do is to adjust the macro in the third field to give you results you want.
I have a requirement where if the user unchecks the checkbox the vale of certain field should be cleared while he saves it.
To be printed is a checkbox
Check # is field.
If the user unchecks the "To be Printed" checkbox the check # field should be clear while he saves the page.
This should be a user event and will be it be after submit funtion?
How do i achieve this?
Here you have two options to deal with your requirement.
1) You can write a Client script as #John mentioned above on his comment and on field change you can clear out those field values which you don't want to save upon your form submission.
2) Write a before submit function and validate the checkbox field value, if it is unchecked then clear out those fields, which you don't want to save.
I would recommend using user event before submit script to set field value as null, as client script may not fire if data entry point is through csv import, suitescript, etc.
if (nlapiGetFieldValue(TO_BE_SUBMITTED_FIELD_ID) == 'F'){
nlapiSetFieldValue('tranid', null);`
}
If you wish, You may write additional client script to disable/clear the field if value of checkbox is set to false, for better UX.
For sequence number I would say, use the below code (I am assuming sequence numbers are pure numbers)
if (nlapiGetFieldValue(TO_BE_SUBMITTED_FIELD_ID) == 'T'){
//search in descending order (use this code in your same before submit script)
var search = nlapiCreateSearch(RECORD_TYPE, ['mainline', 'is', 'T'], new nlobjSearchColumn('tranid').setSort(true));
var results = search.runSearch();
var records = results.getResults(0, 1);
var nextTranId = praseInt(records[0].getFieldValue('tranid'), 10) + 1;
nlapiSetFieldValue(tranid, nextTranId);
}
I've 4 fields as shown below:
radioGroup1 is required if comboBox2 value and radioGroup4 & radio1 are blank. The validation message is suppose to go away if only one of 3 radio's is selected
If I select radioGroup1 or radio1 and update page, the validation message does not display.
If I select radioGroup4 and update page, the validation message is still displayed.
Here is a screen shot:
Here is a validation code for radioGroup1:
var comboBox2:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox2");
var radio1:com.ibm.xsp.component.xp.XspInputRadio = getComponent("radio1");
var radioGroup4:com.ibm.xsp.component.xp.XspSelectOneRadio = getComponent("radioGroup4");
var radioGroup3:com.ibm.xsp.component.xp.XspSelectOneRadio = getComponent("radioGroup3");
if(comboBox2.getValue()!==''){
if(radioGroup3.getValue()==null){
if(radioGroup4.getValue()==null && radio1.getValueAsString()==''){
return true;
}else {
return false;
}
}
}
In second image there is a computed field capturing value of radioGroup4.
What am I doing wrong? When page is refreshed, radioGroup4.getValue() works in computed field but not in the validation script for radioGroup3.
When any one of 3 radio control selected, the other two are disabled thru script and it is working without any issue.
Resolved this issue as follows:
radioGroup4 was executing script and doing full update in the onChange event. Changed it to onClick event
It need two clicks in the radioGroup4 and required message for radioGroup3 vanishes.
This is not a perfect solution but I've to leave with it until I found perfect one.