Page 1 of 1
custom html subform
Posted: Tue May 24, 2022 3:39 pm
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.
Re: custom html subform
Posted: Tue May 24, 2022 4:30 pm
by kev1n
JSpreedSheet etc. certainly have methods to set cell values and store the content in a database. Please refer to the documentation.
Re: custom html subform
Posted: Sun May 29, 2022 10:51 pm
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>
Re: custom html subform
Posted: Sun May 29, 2022 11:35 pm
by kev1n
Use a HTML object, paste your code into the html text area.
Re: custom html subform
Posted: Mon May 30, 2022 7:52 am
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)
Re: custom html subform
Posted: Mon May 30, 2022 8:24 am
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" />
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>
Re: custom html subform
Posted: Mon May 30, 2022 8:57 am
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.
Re: custom html subform
Posted: Mon May 30, 2022 10:44 am
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");