Beautiful table.

[kev1n]

I get errors when I use your header source.
In Setup -> Header: Place the JS code
In Setup -> Style: CSS code

[kknm]

Moved the CSS to 'Settings-Style'.
Once saved, the CSS runs until the session is exited. When you log in again, all changed styles are lost.

[kknm]

Removed the line in 'Settings-Title':

Code: Select all

//<script src='libs/browse_total_rows.js' type='text/javascript'></script>

The styles now work correctly, but the function
browseGroupColumns still doesn't work.I still don't understand the mechanism of how 'Settings-Title' works.

[kev1n]

Please show your full header source.

And also the Styles.

[kknm]

Title:

Code: Select all

</script>

<script>

function nuHeaderTest() {
    console.log('Functions placed here before a closing script tag are available anywhere in nuBuilder Forte');
}

// Сделать редактируемым Калькулятор (Object -> Calc Tab) not readonly
function enableFormulaField() {

    if (window.global_access) {
        if ((nuCurrentProperties().form_id == 'nuobject')) {
            $("#sob_calc_formula")
            .prop("readonly", false)
            .removeClass('nuReadonly');
        }
    }
}
function browseGroupColumns(firstColumnIndex, lastColumnIndex, caption) {

    // Initialize totalWidth to 0
    let totalWidth = 20;

    // Loop through the specified range of columns and sum their widths
    for (let i = firstColumnIndex; i <= lastColumnIndex; i++) {
        totalWidth += $('#nuBrowseTitle' + i).width();
    }

    // Create a new div element for the group header
    let newDiv = $('<div></div>')
        .html(caption) // Set the header text
        .css({
            'width': totalWidth + 'px', // Use the calculated total width
            'position': 'absolute'
            , 'text-align': 'center'
            , 'font-size': '13px'
            , 'color': '#0073aa'
            , 'font-weight': '600'
            , 'border-style': 'solid'
            , 'border-width': 'thin'
        });

    // Find the position of the first column
    const position = $('#nuBrowseTitle' + firstColumnIndex).position();

    // Find the original position of the first column
    const orgTop = $('#nuBrowseTitle0').attr('org-top') ? ? position.top;

    // Calculate the new top
    const newtop = (orgTop ? parseFloat(orgTop, 10) : position.top + 8);

    // Adjust the new div's position
    newDiv.css({
        'top': newtop + 'px', // Adjust this value as needed
        'left': position.left
    });

    // Insert the new div into the DOM before the first column title
    $('#nuBrowseTitle' + firstColumnIndex).before(newDiv);

    // Adjust the positions of titles to make room for the group header by moving them down
    $('.nuBrowseTitle').each(function() {

        if ($(this).attr('org-top') === undefined) {
            const currentTop = parseInt($(this).css('top'), 10);
            $(this).css('top', (currentTop + 24) + 'px') // Adjust this value as needed
                .attr('org-top', orgTop);
        }
    });
}

function nuOnLoad() {
    enableFormulaField();
}

function hideBrowseColumn(column) {
    var cw = parent.$("#" + window.frameElement.id)[0].contentWindow;
    cw.nuFORM.breadcrumbs[cw.nuFORM.breadcrumbs.length - 1].column_widths[column] = 0;
    cw.nuSetBrowserColumns(cw.nuFORM.breadcrumbs[cw.nuFORM.breadcrumbs.length - 1].column_widths);
}

function increaseBrowseTitleHeight() {
    // Increase holder height
    $('#nuActionHolder').css({
        'height': '40px'
    });
    // Increase title height
    var t = -20;
    $('.nuBrowseTitle').not('#nuBrowseFooter').css('top', t);
}

function increaseFrameTitleHeight() {
    $('#nuBreadcrumbHolder').css({
        'height': '40px'
    });
    // Increase title height
    var t = -20;
    $('.nuBrowseTitle').not('#nuBrowseFooter').css('top', t);
}

jQuery.fn.cssNumber = function(prop) {
    var v = parseInt(this.css(prop), 10);
    return isNaN(v) ? 0: v;
};

// <script src="core/libs/apexcharts/apexcharts.min.js"

</script>

<script>

Stile:

Code: Select all

/* Define your own styles, override styles from nubuilder4.css */

.nuBrowseTitle {
    background-color: #FFFFB3;
    height: 55px;
    border-style: solid;
    border-width: 1px;
    position: absolute;
    top: 3px;
    font-size: 14px;
    overflow: visible;
    padding: 3px 5px 3px 5px;
    font-weight: bold
    }
.nuBrowseTable {
    height: 70px;
    border-style: solid;
    border-width: 1px;
    border-color: #D8D8D8;
    padding: 3px 5px 3px 5px;
    position: absolute;
    top: 75px;
    font-size: 14px;
    line-height: 150%
    }
.nuTabHolder {
    background-color: #FFFFB3;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    border-color: lightgrey;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    font-weight: bold
    }
.nuReadonly {
    background-color: white;
    border: 1px solid #ebebeb
    }
.input_undefined.nuCalculator.nuEdited {
    box-shadow: 0 0 0 0px #fff, 0 0 0 1px #888
   }

[kev1n]

Setup - Header:

Code: Select all

// Сделать редактируемым Калькулятор (Object -> Calc Tab) not readonly
function enableFormulaField() {

    if (window.global_access) {
        if ((nuCurrentProperties().form_id == 'nuobject')) {
            $("#sob_calc_formula")
            .prop("readonly", false)
            .removeClass('nuReadonly');
        }
    }
}

function browseGroupColumns(firstColumnIndex, lastColumnIndex, caption) {

    // Initialize totalWidth to 0
    let totalWidth = 20;

    // Loop through the specified range of columns and sum their widths
    for (let i = firstColumnIndex; i <= lastColumnIndex; i++) {
        totalWidth += $('#nuBrowseTitle' + i).width();
    }

    // Create a new div element for the group header
    let newDiv = $('<div></div>')
        .html(caption) // Set the header text
        .css({
            'width': totalWidth + 'px', // Use the calculated total width
            'position': 'absolute'
            , 'text-align': 'center'
            , 'font-size': '13px'
            , 'color': '#0073aa'
            , 'font-weight': '600'
            , 'border-style': 'solid'
            , 'border-width': 'thin'
        });

    // Find the position of the first column
    const position = $('#nuBrowseTitle' + firstColumnIndex).position();

    // Find the original position of the first column
    const orgTop = $('#nuBrowseTitle0').attr('org-top') ?? position.top;

    // Calculate the new top
    const newtop = (orgTop ? parseFloat(orgTop, 10) : position.top + 8);

    // Adjust the new div's position
    newDiv.css({
        'top': newtop + 'px', // Adjust this value as needed
        'left': position.left
    });

    // Insert the new div into the DOM before the first column title
    $('#nuBrowseTitle' + firstColumnIndex).before(newDiv);

    // Adjust the positions of titles to make room for the group header by moving them down
    $('.nuBrowseTitle').each(function() {

        if ($(this).attr('org-top') === undefined) {
            const currentTop = parseInt($(this).css('top'), 10);
            $(this).css('top', (currentTop + 24) + 'px') // Adjust this value as needed
                .attr('org-top', orgTop);
        }
    });
}

function nuOnLoad() {
    enableFormulaField();
}

function hideBrowseColumn(column) {
    var cw = parent.$("#" + window.frameElement.id)[0].contentWindow;
    cw.nuFORM.breadcrumbs[cw.nuFORM.breadcrumbs.length - 1].column_widths[column] = 0;
    cw.nuSetBrowserColumns(cw.nuFORM.breadcrumbs[cw.nuFORM.breadcrumbs.length - 1].column_widths);
}


function increaseBrowseTitleHeight() {
    // Increase holder height
    $('#nuActionHolder').css({
        'height': '40px'
    });
    // Increase title height
    var t = -20;
    $('.nuBrowseTitle').not('#nuBrowseFooter').css('top', t);
}

function increaseFrameTitleHeight() {
    $('#nuBreadcrumbHolder').css({
        'height': '40px'
    });
    // Increase title height
    var t = -20;
    $('.nuBrowseTitle').not('#nuBrowseFooter').css('top', t);
}

jQuery.fn.cssNumber = function(prop) {
    var v = parseInt(this.css(prop), 10);
    return isNaN(v) ? 0: v;
};

Setup -> Style:

Code: Select all

<style>

/* Define your own styles, override styles from nubuilder4.css */

.nuBrowseTitle {
    background-color: #FFFFB3;
    height: 55px;
    border-style: solid;
    border-width: 1px;
    position: absolute;
    top: 3px;
    font-size: 14px;
    overflow: visible;
    padding: 3px 5px 3px 5px;
    font-weight: bold
    }
.nuBrowseTable {
    height: 70px;
    border-style: solid;
    border-width: 1px;
    border-color: #D8D8D8;
    padding: 3px 5px 3px 5px;
    position: absolute;
    top: 75px;
    font-size: 14px;
    line-height: 150%
    }
.nuTabHolder {
    background-color: #FFFFB3;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    border-color: lightgrey;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    font-weight: bold
    }
.nuReadonly {
    background-color: white;
    border: 1px solid #ebebeb
    }
.input_undefined.nuCalculator.nuEdited {
    box-shadow: 0 0 0 0px #fff, 0 0 0 1px #888
   }

</style>

[kknm]

I'm shocked ! (
Apex-chart has disappeared from the main page!
But...the function works.
Errors:

Code: Select all

Uncaught ReferenceError: ApexCharts is not defined
    at HTMLDocument.<anonymous> (<anonymous>:40:13)
    at e (jquery-3.7.1.min.js?ts=1:2:27028)
    at t (jquery-3.7.1.min.js?ts=1:2:27330)
jquery-3.7.1.min.js?ts=1:2 

[kev1n]

Just include it again. See the source code you posted and uncomment the apex line.

[kknm]

Nothing works... The chart doesn't work. Moreover, it shows an error on the line -
<script src='core/libs/apexcharts/apexcharts.min.js';

[kev1n]

There is a syntax error..

Code: Select all

<script src='core/libs/apexcharts/apexcharts.min.js'></script>

Otherwise post again the full source. I can't see from here what it looks like