SunakoChan Posted March 9, 2022 Report Share Posted March 9, 2022 Hi Team, Is it possible to change the background color based on the value of the record in the result page of the Gallery DataPage? For example: Admin | Orange Manager | Yellow User | Green Public | Gray Quote Link to comment Share on other sites More sharing options...
telly Posted March 9, 2022 Report Share Posted March 9, 2022 Hi @SunakoChan, You may use this code on the HTML block of your result page in the Gallery DataPage: <div id="visi[@field:User_ID#]"></div> <script> document.addEventListener('DataPageReady', function (event) { var isi = document.getElementById("visi[@field:User_ID#]"); if('[@field:Role]' == 'Admin'){ isi.parentNode.parentNode.style.backgroundColor = 'rgb(237 94 74)'; } else if('[@field:Role]'== 'Manager'){ isi.parentNode.parentNode.style.backgroundColor = 'rgb(205 241 101)'; } else if('[@field:Role]'== 'User'){ isi.parentNode.parentNode.style.backgroundColor = 'rgb(44, 143, 152)'; } else{ isi.parentNode.parentNode.style.backgroundColor = 'rgb(200, 200, 200)'; } }); </script> Quote Link to comment Share on other sites More sharing options...
Meekeee Posted February 28 Report Share Posted February 28 Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS. You can insert this in the Header: <style> span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"]) { color: #2543be; } span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"]) { color: #29be25; } </style> If you have more conditions or other fields, you can use this: <style> span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"]) { color: #2543be; } span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"]) { color: #29be25; } span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"]) { color: #2543be; } span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) { color: #29be25; } </style> Hope it helps! Quote Link to comment Share on other sites More sharing options...
Meekeee Posted June 30 Report Share Posted June 30 Hi! You can also use this CSS code in other Form Elements: Text Field and Email <style> input[name="InsertRecordFIELDNAME"][value="Active"] { color: green; } </style> Display-Only field <style> span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) { color: green; } </style> Quote Link to comment Share on other sites More sharing options...
futurist Posted August 28 Report Share Posted August 28 Hi, Just wanna share this customization solution I came up with if you want to make gallery report datapages look more appealing: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.