Hello team,
I have question that there are 2 tabs and inside it there is available 3 fields. For example, we have MainTab and AdditionalTab and inside MainTab there is firstname, lastname, middlename. Inside AdditionalTab there is Phonenumber, email, birthdate. I need to put validation to this fields separately. If I put validation to firstname and Phonenumber, these two shouldn't affect each other. when Firstname and Phonenumber is not filled in and try to save record, if I am on Maintab, system should return Firstname validation. at the same time, when I change tab to AdditionalTab, system should return Phonenumber validation. in this case how can I put validation based on tabs?
Below I'll share written code for validation.
define("UsrExample1Page", ["ConfigurationConstants"], function(ConfigurationConstants) {
return {
entitySchemaName: "UsrExample",
attributes: {
"CurrentActiveTab": {
dataValueType: Terrasoft.DataValueType.TEXT,
type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
value: "" // Initial value, empty by default
}
},
details: /**SCHEMA_DETAILS*/{
"Files": {
"schemaName": "FileDetailV2",
"entitySchemaName": "UsrExampleFile",
"filter": {
"masterColumn": "Id",
"detailColumn": "UsrExample"
}
}
},
methods: {
onActiveTabChange: function(activeTab) {
// Store the active tab identifier
this.set("CurrentActiveTab", activeTab);
},
setValidationConfig: function() {
this.callParent(arguments);
this.addColumnValidator("UsrName", this.nameFieldsValidator);
//this.addColumnValidator("UsrLastName", this.nameFieldsValidator);
this.addColumnValidator("UsrPhoneNumber", this.phoneFieldsValidator);
},
nameFieldsValidator: function(value, column) {
var invalidMessage = "";
var firstName = this.get("UsrName");
console.log("Name:", firstName);
if (Ext.isEmpty(firstName)) {
invalidMessage = this.get("Resources.Strings.InvalidNameMessage");
// Switch to the tab containing the first name field
console.log("Switching to name tab:", invalidMessage);
this.set("CurrentActiveTab", "Tabbfc229c0TabLabel"); // Assuming "NameTab" is the tab identifier
}
return { invalidMessage: invalidMessage };
},
phoneFieldsValidator: function(value, column) {
var invalidMessage = "";
var phoneNumber = this.get("UsrPhoneNumber");
console.log("Phone number:", phoneNumber);
if (Ext.isEmpty(phoneNumber)) {
invalidMessage = this.get("Resources.Strings.InvalidPhoneNumberMessage");
console.log("Switching to phone tab:", invalidMessage);
this.set("CurrentActiveTab", "Tab68b5b8f6TabLabel"); // Ensure this is correct
}
return { invalidMessage: invalidMessage };
}
},
dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
diff: /**SCHEMA_DIFF*/[
{
"operation": "insert",
"name": "Tabs",
"values": {
"tabs": [
{
"name": "MainTab",
"caption": { "bindTo": "Resources.Strings.MainTabCaption" },
"items": [],
"change": { "bindTo": "onActiveTabChange" }
},
{
"name": "AdditionalTab",
"caption": { "bindTo": "Resources.Strings.AdditionalTabCation" },
"items": [],
"change": { "bindTo": "onActiveTabChange" }
}
]
}
}
]/**SCHEMA_DIFF*/
};
});Like
Hello Abbos,
To do so, you can replace the OnSaved method, where you make a check:
1) needed tab is active
2) validation successful
If both are true - call this.callParent(arguments). Else - add needed conditions.
onSaved: function() {
var activeTab = this.get("ActiveTab");
var isActiveTabTab2 = activeTab == "Name of the tab"; //result true\false
var isFirstColumnValid = this.validateFirstColumn(); //result true\false
if (isActiveTabTab2 && isFirstColumnValid) {
this.callParent(arguments)
} elese if () {
...
} else if () {
...
} else {
...
}
},
validateFirstColumn: function() {
var colValue = this.get("ColumnCodeHere");
return colValue == "Test value" || colValue = "1" //add conditions here
}P.S. This method will not work with the required fields, since disabling the requirement is impossible.