Form Scripts in the new UI

, ,
1

Hello,

We have a need to alter the font size and color of some field labels.

In the old UI this was rather simple…find the id by inspecting the element of the field or field label and add css to it using the syntax in the wiki.

However, in the new UI the naming of id’s and classes have changed and seem to be a very long string of numbers. We have been unsuccessful in finding any id or class we can add css to.

Example:
Old UI: $(‘#aac-checkbox’).css( {‘color’: ‘red’, ‘text-decoration’: ‘underline’, ‘font-weight’: ‘800’});

New UI: $(‘#07915b78af3e43e7a5aee517b4557e8e_-1_8550812b99c34a09af75d842cf937117’).css({‘color’: ‘red’, ‘text-decoration’: ‘underline’, ‘font-weight’: ‘800’});

Are we taking the correct approach here or should we be handling this differently? Are the old id’s anywhere in the new UI?

Thank you

2

In old ui as id’s are constant so you can directly use id to apply css. But in new ui id’s are dynamic. so you need to handle it in other way. Please refer the below code with inline comment[i]

var myLabel = “subject” // Add your label here in which you are trying to apply css.
var labels = ; // declare a label array
for(var i=0; i<$(‘aac-record-form label’).length; i++) { labels.push($(‘aac-record-form label’)[i].innerText); } // get all the labels
var labelIndex = labels.indexOf(myLabel); // get the index of label that you want to apply the style
if (labelIndex !== -1) { // Check if label is exist.
$(‘aac-record-form label’)[index].style.color = ‘red’; // apply css
$(‘aac-record-form label’)[index].style.font-weight = ‘800’; //apply css
}

Thanks
Soumya

3

In this for loop, do I use ‘aac-record-form label’ or do I need my fields label?

for(var i=0; i<$(‘aac-record-form label’).length; i++) { labels.push($(‘aac-record-form label’)[i].innerText); }

4

The loop will be same. You have to use your label at the first line while declaring the variable like below.
var myLabel = “subject”

While applying css i used this $(‘aac-record-form label’)[index].style.color = ‘red’; , Here replace the index with labelIndex like below

$(‘aac-record-form label’)[labelIndex ].style.color = ‘red’.

Thanks
Soumya