Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

custom html subform

Questions related to customising nuBuilder Forte with JavaScript or PHP.
Post Reply
selector
Posts: 41
Joined: Tue Feb 22, 2022 1:55 pm
Has thanked: 9 times

custom html subform

Unread post by selector »

Hi to all. I want to create a custom subform using a third-party Data grid(JSpreedSheet CE, Tabulator etc). At the same time, it is necessary that the data in the table change depending on the fields of the parent form - that is, passing the values of Lookup fields or NuData to build the table. Also, changes in a third-party table must be recorded in the database in the future (that is, to catch these events). I understand that the question is quite extensive, but maybe someone has some examples of implementation? Or at least theoretically how this can be done.
PS: This is primarily due to the fact that a subform with more than 30 columns and several dozen rows is drawn for an unacceptably long time.
Top
kev1n
nuBuilder Team
Posts: 4297
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:
Contact kev1n

Re: custom html subform

Unread post by kev1n »

JSpreedSheet etc. certainly have methods to set cell values and store the content in a database. Please refer to the documentation.
Top
selector
Posts: 41
Joined: Tue Feb 22, 2022 1:55 pm
Has thanked: 9 times

Re: custom html subform

Unread post by selector »

kev1n wrote: ↑Tue May 24, 2022 4:30 pm JSpreedSheet etc. certainly have methods to set cell values and store the content in a database. Please refer to the documentation.
Kevin, here is an example of html code from the grid documentation. How do I display this inside the form?

Code: Select all

<html>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
 
<div id="spreadsheet"></div>
 
<script>
var data = [
    ['Flag Fen', 'South East', '2019-01-01'],
    ['Bristol Aero Collection (BAC)','South West','2019-04-03'],
    ['Experience Barnsley', 'North','2018-12-03'],
    ['Cinema Museum', 'London',''],
    ['University of Hertfordshire Art Collection', 'South East',''],
    ['LUX London', 'London','2016-11-03'],
];
 
jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type:'text',
            title:'Museum',
            width:'300',
        },
        {
            type:'dropdown',
            title:'Region',
            source:['South East','South West','North','London'],
            width:'200',
        },
        {
            type:'calendar',
            title:'Last visit',
            options: { format:'DD/MM/YYYY' },
            width:'100',
        },
    ]
});
</script>
</html>
Top
kev1n
nuBuilder Team
Posts: 4297
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:
Contact kev1n

Re: custom html subform

Unread post by kev1n »

Use a HTML object, paste your code into the html text area.
Top
selector
Posts: 41
Joined: Tue Feb 22, 2022 1:55 pm
Has thanked: 9 times

Re: custom html subform

Unread post by selector »

kev1n wrote: ↑Sun May 29, 2022 11:35 pm Use a HTML object, paste your code into the html text area.
I tried, but it didn't work. I also tried to make the connection of scripts and css in the header. The same result.

Code: Select all

Uncaught ReferenceError: jspreadsheet is not defined
    at <anonymous>:11:1
    at b (jquery.js?ts=20220530085029:2:866)
    at He (jquery.js?ts=20220530085029:2:48373)
    at S.fn.init.append (jquery.js?ts=20220530085029:2:49724)
    at S.fn.init.<anonymous> (jquery.js?ts=20220530085029:2:50816)
    at $ (jquery.js?ts=20220530085029:2:32425)
    at S.fn.init.html (jquery.js?ts=20220530085029:2:50494)
    at nuHTML (nuform.js?ts=20220530085029:1411:22)
    at nuBuildEditObjects (nuform.js?ts=20220530085029:677:13)
    at nuBuildForm (nuform.js?ts=20220530085029:184:3)
Top
kev1n
nuBuilder Team
Posts: 4297
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:
Contact kev1n

Re: custom html subform

Unread post by kev1n »

It works for me:

Header:

Code: Select all

function nuOnLoad() {

    if (nuFormType() == 'edit') {
        // Edit Form loaded
    } else
        if (nuFormType() == 'browse') {
        // Browse Form loaded
    }

}


</script>

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
HTML object:

Code: Select all

<div id="spreadsheet"></div>
 
<script>
var data = [
    ['Flag Fen', 'South East', '2019-01-01'],
    ['Bristol Aero Collection (BAC)','South West','2019-04-03'],
    ['Experience Barnsley', 'North','2018-12-03'],
    ['Cinema Museum', 'London',''],
    ['University of Hertfordshire Art Collection', 'South East',''],
    ['LUX London', 'London','2016-11-03'],
];
 
jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        {
            type:'text',
            title:'Museum',
            width:'300',
        },
        {
            type:'dropdown',
            title:'Region',
            source:['South East','South West','North','London'],
            width:'200',
        },
        {
            type:'calendar',
            title:'Last visit',
            options: { format:'DD/MM/YYYY' },
            width:'100',
        },
    ]
});
</script>
Top
selector
Posts: 41
Joined: Tue Feb 22, 2022 1:55 pm
Has thanked: 9 times

Re: custom html subform

Unread post by selector »

kev1n wrote: ↑Mon May 30, 2022 8:24 am It works for me:
Thank you for </script> after nuOnLoad(). I didn't think to do that.
Top
kev1n
nuBuilder Team
Posts: 4297
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:
Contact kev1n

Re: custom html subform

Unread post by kev1n »

BTW, this might be useful: Jspreadsheet quick reference

E.g. to set a value "Hello" in cell A1:

Code: Select all

var myTable = document.getElementById('spreadsheet').jexcel
myTable.setValue("A1","Hello");
Top
Post Reply

Return to “Custom Code”