Transform all required field label [done]

[nc07]

Hi,

The following function will transform all required field label with *

captures_chrome-capture-2023-7-23.png

.

Code: Select all

function tansformRequiredField(){
     var o = nuSERVERRESPONSE.objects;
                for (let i = 0; i < o.length; i++) {
                    let id = o[i].id;
                      if (o[i].valid == '1'|| o[i].valid == '3'){
                        
                         
                         $("#label_" +id).append('<span style="color:red;">*<span/>');
                         $("#label_" +id).attr('title',nuTranslate('Required field.'));
                      }

    
    
                }  
}

The function can be called in individual edit forms js or in the header for all forms.

Just sharing to the forum.

Regards
Nilesh

[kev1n]

Hi Nilesh,

Thank you for sharing your code! This will certainly be a valuable addition to our Code Library.

To optimise this code, we can make a few improvement (mostly suggested by ChatGPT):

1. Caching jQuery Selectors: Repeatedly selecting the same element using jQuery can be expensive. Instead, we can cache the selected element for better performance.

2. Avoid Redundant DOM Manipulation: In the current code, you're selecting the same element twice (`$("#label_" +id)`) and appending the same content to it. This can be optimized to select the element once and then manipulate it.

3. Use Single Quotes for HTML Attributes: It's a good practice to use single quotes for HTML attributes to avoid potential conflicts with double quotes within the attribute content.

Here's the optimized version of your code:

Code: Select all

function tansformRequiredField() {
    var o = nuSERVERRESPONSE.objects;
    for (let i = 0; i < o.length; i++) {
        let id = o[i].id;
        if (o[i].valid === '1' || o[i].valid === '3') {
            let labelElement = $("#label_" + id);
            labelElement.append('<span style="color:red;">*</span>');
            labelElement.attr('title', nuTranslate('Required field.'));
        }
    }
}

However, I'd like to suggest using jQuery's `.each()` function to iterate through the array of objects. This can make the code more concise and readable:

Code: Select all

function tansformRequiredField() {
    const o = nuSERVERRESPONSE.objects;
    $.each(o, function(index, object) {
        if (object.valid === '1' || object.valid === '3') {
            $("#label_" + object.id).append('<span style="color:red;">*</span>')
                       .attr('title', nuTranslate('Required field.'));
        }
    });
}

Remember that optimizing code is not just about performance, but also about readability and maintainability. The optimized code versions aim to balance all these factors.

[nc07]

Thanks Kevin for the improved function and suggestions.

Appreciated and i will keep the in mind for future functions.

Hope NB users find the function useful.

[kev1n]

To achieve this in pure CSS:

Code: Select all

.nuBlank::after,
.nuDuplicateOrBlank::after {
    content: "*";
    color: red;
    font-weight: bold;
    margin-left: 4px;
}

/* Optional: Remove bold style from labels */
.nuBlank,
.nuDuplicateOrBlank {
    font-weight: normal;
}

To add the "Required Field" title, you would probably still need JS. This is optional (The use of an asterisk (*) within HTML elements or labels as a convention is a well-established practice in web design. Users are generally familiar with its significance, making it unnecessary to explicitly explain its meaning in a title or separate text)

Code: Select all

const objects = nuSERVERRESPONSE.objects;
objects.forEach(object => {
    if (object.valid === '1' || object.valid === '3') {
        $(`#label_${object.id}`).attr('title', nuTranslate('Required field.'));
    }
});

Asterisk.png