Hello,
I have an input box in ContactSection. The caption needs to be red and bold. For this I created a CSS stylesheet. The problem is that this stylesheet changes the caption to all input boxes.
In inspect the caption looks like this:
This is the code of ContactSection:
define("ContactSectionV2", ["css!LbkCSSStylesheet"], function() {
return {
entitySchemaName: "Contact",
details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
diff: /**SCHEMA_DIFF*/[
{
"operation": "merge",
"name": "Button-7111bf797fa64241b19364c8a906fb4a",
"values": {
"caption": {
"bindTo": "Resources.Strings.BulkAllocationBM"
},
"click": {
"bindTo": "showOwnerInfo"
},
"enabled": {
"bindTo": "IsButtonEnabled"
}
}
}
]/**SCHEMA_DIFF*/,
attributes:{
"IsButtonEnabled": {
dataValueType: this.Terrasoft.DataValueType.BOOLEAN,
type: this.Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
value: false
},
"HasBranch": {
dataValueType: this.Terrasoft.DataValueType.TEXT,
type: this.Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
value: ""
},
},
methods: {
init: function() {
this.callParent(arguments);
this.GetCurrentUserRole();
},
GetCurrentUserRole: function() {
var esq = Ext.create("Terrasoft.EntitySchemaQuery", {
rootSchemaName: "SysUserInRole"
});
esq.addColumn("SysRole");
esq.filters.add("UserFilter", Terrasoft.createColumnFilterWithParameter(
Terrasoft.ComparisonType.EQUAL, "SysUser", Terrasoft.SysValue.CURRENT_USER.value
));
var branch = this.get("HasBranch");
var self = this;
esq.getEntityCollection(function(result) {
if (result && result.success) {
var roles = [];
result.collection.each(function(item) {
var role = item.get("SysRole");
roles.push(role.displayValue);
if(role.displayValue.includes(" Branch") && role.displayValue.includes(" Branch.M") == false) {
self.set("HasBranch", role.displayValue);
}
});
self.set("IsButtonEnabled", roles.includes("Branch Manager"));
}
}, this);
},
getSectionActions: function() {
var actionMenuItems = this.callParent(arguments);
actionMenuItems.addItem(this.getButtonMenuItem({
"Caption": { bindTo: "Resources.Strings.BulkAllocationBM" },
"Click": { bindTo: "showOwnerInfo" },
"Enable": { bindTo: "IsButtonEnabled" },
"Visible": { bindTo: "IsButtonEnabled" }
}));
return actionMenuItems;
},
showOwnerInfo: function() {
var caption = "Eligible contacts will be only the ones with Ownership Status Active";
//Terrasoft.utils.dom.setAttributeToBody("NameOfCondition", true);
var ContactList;
this.set("ContactList", new Terrasoft.Collection());
var controls = {
"Owner": {
dataValueType: Terrasoft.DataValueType.ENUM,
isRequired: true,
caption: "Owner",
value: {
bindTo: "Contact"
},
customConfig: {
list: {
bindTo: "ContactList"
},
prepareList: {
bindTo: "onPrepareContactList"
}
}
}
};
var ownerInputBoxHandler = this.ownerInputBoxHandler.bind(this);
Terrasoft.utils.inputBox(caption, ownerInputBoxHandler, [
{
className: "Terrasoft.Button",
caption: "ASSIGN",
returnCode: "ok"
}, "cancel"
], this, controls);
Terrasoft.each(Terrasoft.MessageBox.controlArray, function(item){
item.control.bind(this);
}, this);
},
onPrepareContactList: function(){
var self = this;
var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", { rootSchemaName: "Contact" });
esq.addColumn("Id");
esq.addColumn("Name");
//Same Branch as the BM that is starting the realocation
esq.filters.add("BranchFilter", this.Terrasoft.createColumnFilterWithParameter(
this.Terrasoft.ComparisonType.EQUAL, "Branch.Name", self.get("HasBranch")));
esq.getEntityCollection(function(result){
if (result.success){
var items = {};
result.collection.each(function(item) {
items[item.get("Id")] = { "value": item.get("Id"), "displayValue": item.get("Name") };
}, this);
var list = this.get("ContactList");
list.loadAll(items);
}
}, this);
},
ownerInputBoxHandler: function(tag, data){
var autoIds = this.getSelectedItems();
var selectedContact = data.Owner.value;
if (Terrasoft.MessageBoxButtons.OK.returnCode === tag){
if (Ext.isEmpty(selectedContact)){
this.showInformationDialog("Field is required", function(){
this.showOwnerInfo();
});
} else {
this.updateContact(function(context, result){}, autoIds, selectedContact);
}
}
},
updateContact: function(callback, autoIds, selectedContact) {
var self = this;
var activeSelectedIds = [];
// Active contacts among the selected ones
var esq = Ext.create("Terrasoft.EntitySchemaQuery", {
rootSchemaName: "Contact"
});
esq.addColumn("Id");
esq.filters.add("SelectedFilter", Terrasoft.createColumnInFilterWithParameters("Id", autoIds));
esq.filters.add("ActiveStatusFilter", Terrasoft.createColumnFilterWithParameter(
Terrasoft.ComparisonType.NOT_EQUAL, "LbkOwnershipStatus", "2600e140-b78b-425a-a8b0-584bde16e6d0"));
esq.getEntityCollection(function(response) {
if (response.success) {
response.collection.each(function(item) {
activeSelectedIds.push(item.get("Id"));
});
// Only the Active contacts among the selected ones
self.updateSelectedContacts(callback, activeSelectedIds, selectedContact);
}
}, this);
},
updateSelectedContacts: function(callback, activeSelectedIds, selectedContact) {
var update = Ext.create("Terrasoft.UpdateQuery", {
rootSchemaName: "Contact"
});
// Create filter for active selected contacts
var filterGroup = Terrasoft.createFilterGroup();
filterGroup.logicalOperation = Terrasoft.LogicalOperatorType.AND;
filterGroup.add("ActiveSelectedIdsFilter", Terrasoft.createColumnInFilterWithParameters(
"Id", activeSelectedIds));
update.filters.add(filterGroup);
update.setParameterValue("Owner", selectedContact, Terrasoft.DataValueType.LOOKUP);
update.execute(function(result) {
callback.call(this, result);
}, this);
this.unSelectRecords();
this.unSetMultiSelect();
},
}
};
});
Is there a way to change the id or class of the input box?
Thank you
Like
You could use this approach: https://customerfx.com/article/adding-style-to-a-messagebox-dialog-in-creatio/
It adds an attribute to the body when the message appears and removes it when closed. Then you can use that to style the specific message without affecting others (and don't use the Id of the messagebox node since it can change)
Ryan