@mnikitina
hello , this part with facilityColor - is disabled.
Oh, sorry.
Are you getting any errors in the browser console on form load? Inspect the Data Table in the browser to check weather the CSS class is added or not.
Are you able to change the background color of any other elements line field inputs, form background using CSS?
@mnikitina
No errors ,on form load.
The buttons css work.
And bottom there is one more datatable where css works.
You can try out this code to add a class to the row depending on a column value:
var table = fd.control('DataTable1');
var value = table.value;
var row = $(table.$el).find('tr');
if(value){
for (var i = 0; i < value.length; i++){
if(value[i].Column1 == '1' ) {
//sets the background color of the row to red
$(row[i+1]).addClass('class-name');
}
}
}Export the form and share it.
Make a screenshot of the form in the browser including the control and highlight the column whose color you want to change
this is screen how it was. For now only second datable is working (Totaluri) The first one have no color. I want them back:) By the column " Sens economic" the colors must be different.
Now it looks
and the second table is ok:
Element_Extras_New.xfds (44.5 KB)
I've tested your form. The approach you are using works when adding new rows to the DataTable control.
If you want to add class to rows on form load, try out this code:
var table = fd.control('dtMovements');
table.ready().then(function() {
var value = table.value;
var row = $(table.$el).find('tr');
if(value){
for (var i = 0; i < value.length; i++){
if(value[i].CalcGroupName == 'calculat' ) {
$(row[i+1]).addClass('pay-amount');
}
}
}
});@mnikitina
I will try.
On load the dataTable is clear. User press button, and only after he pressed button, thtere is a connection to a web server, which returns data in datatable.
Hello @ixxxl,
You can add the code I've shared to the button's Onclick function. Thus the row colors will change when the data is loaded.
@mnikitina
hi, it doesn't work...
button code:
var startMonth = fd.field("ddStartYear").value+fd.field("ddStartMonth").value;
var endMonth = fd.field("ddEndYear").value+fd.field("ddEndMonth").value;
var user = _spPageContextInfo.userDisplayName
var resultData = ''
var resultCov = ''
var message = "";
//.filter("substringof('" + searchString + "',Title) or substringof('" + searchString + "',ISDNNumber)")
//"AcordInfoCovid eq 'DA' and Title eq '" + user +"'"
//var info = "CorrectData eq 'Nu' and Title eq '" + user + "'"
var fil = "Title eq '" + user + "'"
//var filtering = "AcordInfoCovid eq 'DA' and Title eq '" + user + "' or AcordInfoCovid eq 'NU' and Title eq '" + user + "'"
pnp.sp.web.lists.getByTitle("Cartela Angajatului").items.select("Title", "Id", "AcordInfoCovid", 'CorrectData').filter(fil).expand("FieldValuesAsText").get().then(function (results) {
//console.log(result[0].Title)
for (let i = 0; i < results.length; i++) {
// type checking works here if we specify the return type
console.log(results[i].Title);
console.log("------Covid=" + results[i].AcordInfoCovid + "-----------------");
resultCov = results[i].AcordInfoCovid
resultData = results[i].CorrectData
console.log("----------CorrectData=" + results[i].CorrectData + "-----------");
}
if (resultCov == null) {
message += '-Serviciul ”Extras Salariu” va deveni disponibil pentru Dvs imediat ce veți completa informația privind situația aferentă COVID 2019'
}
if (resultData == false) {
message += '\n -Serviciul ”Extras Salariu” va deveni disponibil pentru Dvs imediat ce veți completa informația privind acceptarea datelor in organigrama'
}
if (message != "") {
alert(message)
}
if (resultCov != null && resultData == true) {
//proceed script
if (startMonth && endMonth) {
var serviceUrl = "https://staffhub.maib.local/SalaryStatement?start="+startMonth+"&end="+endMonth;
//var serviceUrl = "https://localhost:44368/SalaryStatement?start="+startMonth+"&end="+endMonth;
console.log("calling "+serviceUrl);
$.support.cors = true;
$.ajax({
url: serviceUrl,
type: "GET",
dataType: 'jsonp',
headers: { Accept: "application/javascript" },
processData: false,
async: false,
crossDomain: true,
xhrFields: { withCredentials: true },
success: function(data) {
console.log("response data: "+JSON.stringify(data));
ParseResponse(data);
},
error: function (xhr, status, error, data) {
if (xhr.status != "200") {
console.log("Error: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
alert("Error: Status=" + status + ", ErrorText=" + error + ", xhr.status=" + xhr.status + ", xhr.statusText=" + xhr.statusText);
}
}
});
}
/*
jsonData={"StaffID":"6051","StaffName":"Robu Suzana Ion","SubdivisionCode":"80573","SubdivisionName":"Departamentul Proiecte și Procese","PostName":"Coordonator proiecte","StartDate":"01.09.2017","SalaryAmount":28000.000,"Movements":[{"PeriodCode":"202012","CalcMonth":"dec.2020","CalcCode":null,"CalcDescription":"concediu suplimentar (casatorie,deces)","DaysCount":3.00,"HourCount":24.00,"DateFrom":"12.09.2020","DateTill":"16.09.2020","ActionPeriod":"dec.2020","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":3000.00},{"PeriodCode":"202012","CalcMonth":"dec.2020","CalcCode":3,"CalcDescription":"salariul funcției","DaysCount":11.00,"HourCount":88.00,"DateFrom":"01.12.2020","DateTill":"15.12.2020","ActionPeriod":"dec.2020","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":14000.00},{"PeriodCode":"202012","CalcMonth":"dec.2020","CalcCode":3,"CalcDescription":"salariul funcției","DaysCount":3.00,"HourCount":24.00,"DateFrom":"16.12.2020","DateTill":"31.12.2020","ActionPeriod":"dec.2020","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":3818.18},{"PeriodCode":"202012","CalcMonth":"dec.2020","CalcCode":8,"CalcDescription":"îndemnizație pentru concediu anual","DaysCount":5.00,"HourCount":40.00,"DateFrom":"23.09.2020","DateTill":"29.09.2020","ActionPeriod":"dec.2020","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":6363.63},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":38,"CalcDescription":"primă unică (lucrări f. importante)","DaysCount":null,"HourCount":null,"DateFrom":"01.01.2021","DateTill":"31.12.2021","ActionPeriod":"mar.2021","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":1000.00},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":56,"CalcDescription":"prima lunara","DaysCount":null,"HourCount":null,"DateFrom":"01.03.2021","DateTill":"31.03.2021","ActionPeriod":"mar.2021","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":500.00},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":82,"CalcDescription":"ajutor material cu ocazia sărbător. (suma)","DaysCount":null,"HourCount":null,"DateFrom":"01.03.2021","DateTill":"31.03.2021","ActionPeriod":"mar.2021","CalcGroupCode":1,"CalcGroupName":"calculat","Amount":2000.00},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":528,"CalcDescription":"cotiz. asigurare medicala","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":2,"CalcGroupName":"reținut","Amount":1051.36},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":528,"CalcDescription":"cotiz. asigurare medicala","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":2,"CalcGroupName":"reținut","Amount":593.18},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":572,"CalcDescription":"impozitul pe venit","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":2,"CalcGroupName":"reținut","Amount":1609.25},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":572,"CalcDescription":"impozitul pe venit","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":2,"CalcGroupName":"reținut","Amount":410.08},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":588,"CalcDescription":"cotiz.în fondul pensionar","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":4,"CalcGroupName":"reținut","Amount":1401.82},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":588,"CalcDescription":"cotiz.în fondul pensionar","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":4,"CalcGroupName":"reținut","Amount":790.91},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":699,"CalcDescription":"transfer TME","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":8,"CalcGroupName":"TME","Amount":840.00},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":571,"CalcDescription":"plăți pe casă","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":9,"CalcGroupName":"achitat","Amount":2546.06},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":606,"CalcDescription":"transf.salar.la cartele","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":9,"CalcGroupName":"achitat","Amount":19301.20},{"PeriodCode":"202103","CalcMonth":"mar.2021","CalcCode":606,"CalcDescription":"transf.salar.la cartele","DaysCount":null,"HourCount":null,"DateFrom":"","DateTill":"","ActionPeriod":"mar.2021","CalcGroupCode":9,"CalcGroupName":"achitat","Amount":3007.19}],"Totals":[{"PeriodCode":"202012","Period":"dec.2020","PayAmount":27181.81,"RetensionAmount":0.0,"NetAmount":0.0,"FacilityAmount":0.0,"MealTicketAmount":0.0,"ExemptionAmount":0.0},{"PeriodCode":"202103","Period":"mar.2021","PayAmount":3500.00,"RetensionAmount":5856.60,"NetAmount":24854.45,"FacilityAmount":0.0,"MealTicketAmount":0.0,"ExemptionAmount":7500.00},{"PeriodCode":null,"Period":"Total","PayAmount":30681.81,"RetensionAmount":5856.60,"NetAmount":24854.45,"FacilityAmount":0.0,"MealTicketAmount":840.00,"ExemptionAmount":7500.00}],"ErrorMessage":null};
if (jsonData.ErrorMesage == null) {
$('.ascunde').show();
ParseResponse(jsonData);
} else {
alert(jsonData.ErrorMesage);
$('.ascunde').hide();
}
*/
function ParseResponse(jsonData) {
if (jsonData.ErrorMessage == null || jsonData.ErrorMessage == "") {
$('.ascunde').show();
fd.field("tbSalaryAmount").value = jsonData.SalaryAmount.toString();
//fd.field("tbStartDate").value = jsonData.StartDate;
//fd.control("dtMovements").value = jsonData.Movements;
var movements = [];
if (jsonData && jsonData.Movements) {
for (var i = 0; i < jsonData.Movements.length; i++) {
var row = jsonData.Movements[i];
if (row.CalcCode != 694) {
movements.push(row);
} else {
for (var j = 0; j < jsonData.Totals.length; j++) {
if (jsonData.Totals[j].PeriodCode == row.PeriodCode || j == jsonData.Totals.length - 1) {
jsonData.Totals[j].RetensionAmount -= row.Amount;
var table = fd.control('dtMovements');
table.ready().then(function() {
var value = table.value;
var row = $(table.$el).find('tr');
if(value){
for (var i = 0; i < value.length; i++){
if(value[i].CalcGroupName == 'calculat' ) {
$(row[i+1]).addClass('pay-amount');
}
}
}
});
}
}
}
}
}
fd.control("dtMovements").value = movements;
fd.control("dtTotals").value = jsonData.Totals;
fd.control('Text6').text = "la " +getTimeStamp()
} else {
alert(jsonData.ErrorMessage);
$('.ascunde').hide();
}//if
};
function getTimeStamp() {
var datetime = new Date().today() + " " + new Date().timeNow();
return datetime;
}
// For todays date;
Date.prototype.today = function () {
return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
}
// For the time now
Date.prototype.timeNow = function () {
return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
}
}
})
i tried to put this code after:
but have an error:
Designer version - 1.4.8
Add the code after the pnp request, like this:
pnp.sp.web.lists.getByTitle('ListName').items.get().then(function(items){
//some code
}).then(function(){
var table = fd.control('dtMovements');
table.ready().then(function() {
var value = table.value;
var row = $(table.$el).find('tr');
if(value){
for (var i = 0; i < value.length; i++){
if(value[i].CalcGroupName == 'calculat' ) {
$(row[i+1]).addClass('pay-amount');
}
}
}
});
});@mnikitina
Hi, no luck
i tried to put it after pnp, and after web server returns data, after populating datatable -every time -table.ready is not a function..
Have you declared the table variable? Replace the table with the fd.control('dtMovements') and test the code.
Please also see this post to learn how to debug the code.
@mnikitina
yes i declared var
i changed table to fd.control('dtMovements')
//var table = fd.control('dtMovements')
fd.control('dtMovements').ready().then(function() {
var value = fd.control('dtMovements').value;
var row = $(fd.control('dtMovements').$el).find('tr');
if(value){
for (var i = 0; i < value.length; i++){
if(value[i].CalcGroupName == 'calculat' ) {
$(row[i+1]).addClass('pay-amount');
}
}
}
});
if found something if i disabled color - my color appears !!!
it's something with css of soft shortpoint... how to use my css primary , from the form ?
You can give the styling a higher specificity by adding a tag like this:
.pay-amount div{
color: red !important;
}
You can find more information about CSS specificity in this article.
Add a div tag to CSS, thus your custom styling will have a higher specificity and will overwrite other styling.
Try out other approaches from the article:
You can also change CSS in the browser's DevTools to find the CSS that overwrite global styling.