CSS stylesheet for access level

[capstefano]

hello! I thought it could be interesting to have a CSS sheet associated with each access level.
maybe it would be possible to add a tab (CSS) and a field (access_level_CSS or something) in the access level form with a css input object to define a custom style for each user level.
Ithink it could be more attractive, adaptable to use in different environments, with different screen resolutions and different ambient lighting.
I hope the suggestion can be useful to you, congratulations for your fantastic work with nuBuilder

[kev1n]

Thanks for the suggestion! We’ll consider if and how this could be incorporated in the future.
For the time being, you can use Setup → Header to load specific stylesheets based on user or access level.
This approach even lets you load different styles for individual users, not just by access level, giving you more flexibility.

Example 1: Load Style sheet based on Access Level

Code: Select all

// Runs after each Edit and Browse Form loads
function nuOnLoad(formId, formCode) {
  loadAccessLevelStylesheet(nuAccessLevelCode());
}

function loadAccessLevelStylesheet(accessLevel) {
    const head = document.getElementsByTagName("head")[0];

    // Check if an access-level-specific stylesheet already exists
    const existingLink = head.querySelector('link[data-accesslevel-style]');
    if (existingLink) return; // Stylesheet already loaded, do nothing

    // Create and append new stylesheet
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.setAttribute('data-accesslevel-style', 'true'); // Marker for future identification

    // Example logic: choose stylesheet based on access level
    if (accessLevel === "ADMIN") {
        link.href = "custom_css/admin.css";
    } else if (accessLevel === "MANAGER") {
        link.href = "custom_css/manager.css";
    } else if (accessLevel === "USER") {
        link.href = "custom_css/user.css";
    } else {
        link.href = "custom_css/default.css"; // or ignore if another access level
    }

    head.appendChild(link);
}

Example 2: Loading a Stylesheet Based on User:

Code: Select all

// Runs after each Edit and Browse Form loads
function nuOnLoad(formId, formCode) {
  loadUserStylesheet(nuUserName());
}

function loadUserStylesheet(user) {
    const head = document.getElementsByTagName("head")[0];

    // Check if a user-specific stylesheet already exists
    const existingLink = head.querySelector('link[data-user-style]');
    if (existingLink) return; // Stylesheet already loaded, do nothing

    // Create and append new stylesheet
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.setAttribute('data-user-style', 'true'); // Marker for future identification

    // Example logic: choose stylesheet based on user
    if (user === "admin") {
        link.href = "custom_css/admin.css";
    } else if (user === "john") {
        link.href = "custom_css/style.css";
    } else {
        link.href = "custom_css/default.css";
    }

    head.appendChild(link);
}

Alternatively, you can combine the codes to implement custom logic for loading style sheets.

[capstefano]

thanks for the quick reply! I'll apply your code as soon as possible, thx!