How to pass variables to SuiteQL - suitescript

Question

I am trying to pass parameters from the current record to an embedded Suitelet though cannot find the right syntax to do this anywhere
My starting point was using the Suitelet code here: https://timdietrich.me/blog/netsuite-suiteql-query-results-custom-tabs/
The result from my modified version is per this screencap
When the page loads, the SuiteQL record field is populated using the current record's internal Id.
What I want to do is pass this value as a variable to the embedded SuiteQL Suitelet so that the search results are only in relation to the stated record (in this case, the record with the internal id=24486).
Is this actually possible?
If it is possible, how do I pass this value to the SQL query parameters?
This is the full modified version of the code:
/**
* #NApiVersion 2.1
* #NScriptType UserEventScript
* #NModuleScope Public
*/
/*
*/
var log, query, serverWidget;
define([
"N/log",
"N/query",
"N/ui/serverWidget",
"N/record",
"N/runtime",
"N/recordContext",
], main);
function main(
logModule,
queryModule,
serverWidgetModule,
recordModule,
runtimeModule,
recordContextModule
) {
log = logModule;
query = queryModule;
serverWidget = serverWidgetModule;
record = recordModule;
runtime = runtimeModule;
recordContext = recordContextModule;
return {
beforeLoad: beforeLoad,
};
}
function beforeLoad(context) {
if (context.type !== context.UserEventType.VIEW) {
return;
}
var suiteqlTab = context.form.addTab({
id: "custpage_sql_tab",
label: "SuiteQL Tab",
});
context.form.insertTab({
tab: suiteqlTab,
nexttab: "items",
});
var recordId = runtime.getCurrentScript();
log.debug({
title: "recordId",
details: recordId,
});
var parms = context.request.parameters;
log.debug("params", parms);
log.debug("recordid", parms.id);
var id = parms.id;
var recordField = context.form.addField({
id: "custpage_suiteql_record",
type: serverWidget.FieldType.TEXT,
label: "SuiteQL Record",
container: "custpage_sql_tab",
});
recordField.defaultValue = id;
var suiteqlField = context.form.addField({
id: "custpage_suiteql_field",
type: serverWidget.FieldType.TEXT,
label: "SuiteQL Query Results",
container: "custpage_sql_tab",
});
var records = sqlQueryRun();
context.newRecord.setValue({
fieldId: "custpage_suiteql_field",
value: sqlResultsTableGenerate(records),
});
}
function sqlQueryRun() {
var sql = `
SELECT
Transaction.type
FROM
Transaction
Where Transaction.type like 'SalesOrd'
`;
return query.runSuiteQL({ query: sql, params: [] }).asMappedResults();
}
function sqlResultsTableGenerate(records) {
if (records.length === 0) {
return "<div><p>No records were found.</p></div>";
}
let thead = `
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Phone #</th>
</tr>
</thead>`;
var tbody = "<tbody>";
for (r = 0; r < records.length; r++) {
var record = records[r];
tbody += `
<tr>
<td></td>
<td></td>
<td>${record.email}</td>
<td>${record.phone || ""}</td>
</tr>`;
}
tbody += "</tbody>";
let stylesheet = `
<style type = "text/css">
/* Styled Table */
/* https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
width: 100%;
}
.styled-table th,
.styled-table td {
padding: 6px;
}
.styled-table thead tr {
background-color: #607799;
color: #ffffff;
text-align: left;
}
.styled-table tbody tr {
border-bottom: thin solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}
.styled-table tbody tr:hover {
background-color: #ffff99;
}
</style>
`;
return `
${stylesheet}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<div style="margin-top: 6px; border: 1px solid #ccc; padding: 24px;">
<table id="sqlResultsTable" class="styled-table" style="width: 100%;">
${thead}
${tbody}
</table>
</div>
<script>
window.jQuery = window.$ = jQuery;
$('#sqlResultsTable').DataTable( { "pageLength": 10, "lengthMenu": [ 10, 25, 50, 75, 100 ] } );
</script>
`;
}
The original author of the SuiteQL tool: Timothy Dietrich