Welcome to the nuBuilder Forums!

Join our community by registering and logging in.
As a member, you'll get access to exclusive forums, resources, 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: 4562
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 76 times
Been thanked: 528 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: 4562
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 76 times
Been thanked: 528 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: 4562
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 76 times
Been thanked: 528 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: 4562
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 76 times
Been thanked: 528 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”