The ProxyDDCForVAJobCASIntegration does not have a <form> tag because all the information it needs is coming from VA via DDC message and the form is dynamically created via JavaScript.
If you want to have prompts defined directly in the HTML, in addition to those coming from VA, you can have them, but not in a form. The form would submit the parameters to a pre-defined URL, but you still need to add the parameters from VA, so you would need the help of JavaScript for that.
I've modified (but have not validated/tested) your previous example to have a text box, a check box and a button in the HTML, and I've also added some comments. You are already setting many parameters via JavaScript, so I'd only add the extra parameters you need that come from the HTML directly, which in this example is the value in the text box. Also, the job html output will overwrite the HTML content (button, text, and check box). To have the output added below the HTML content, you would need to also return the job output in a list of files (a json structure) and use JavaScript to retrieve the output and display it in the desired location in the HTML (SAS Help Center: Returning a List of Output Files in JSON Format)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple ODS HTML</title>
<link rel="stylesheet" href="/SASJobExecution/theme">
<script type="text/javascript" src="https://bsxxxxx.fsyy.vwf.vwfs-ad/htmlcommons/util/messagingUtil.js"></script>
<script type="text/javascript" src="https://bsxxxx.fsyy.vwf.vwfs-ad/htmlcommons/util/contentUtil.js"></script>
<script type="text/javascript" src="https://bsxxxx.fsyy.vwf.vwfs-ad/htmlcommons/util/jobUtil.js"></script>
<script>
"use strict";
window.$ = window.parent.$;
vat _resultData = null;
var _job_output_cas_table_v2 = null; // example: "CARS_COPY";
var _job_executing_message_v2 = null; // example: "Waiting for job to finish...";
var _job_name_v2 = null; // example: "/Public/Jobs/SAS Communities/HelloCASWorld"
function onDataReceived(resultData)
{
if (resultData) {
_resultData = resultData; // added this line to save the message received from VA to be reused when the button is clicked
var resultName = resultData.resultName;
var selections = va.contentUtil.initializeSelections(resultData); // good practice to remove eventual brush columns
if (resultData.columns.length == 0) {
// it needs at least one column and one row
document.getElementById("JobResults").innerHTML = "";
va.messagingUtil.postInstructionalMessage(resultName, "Please, assign roles");
return;
}
var vaParameters = va.contentUtil.getVAParameters(resultData);
_job_output_cas_table_v2 = vaParameters._job_output_cas_table_v2;
_job_executing_message_v2 = vaParameters._job_executing_message_v2;
_job_name_v2 = vaParameters._job_name_v2;
if (!_job_executing_message_v2) _job_executing_message_v2 = "Executing job...";
if (!_job_output_cas_table_v2 || !_job_name_v2) {
// missing one or more parameters
document.getElementById("JobResults").innerHTML = "";
va.messagingUtil.postInstructionalMessage(
resultName,
"Please, make sure the following parameters are being passed to this object:\n"+
"(1) _job_name_v2\n"+
"(2) _job_output_cas_table_v2\n"+
"(3) _job_executing_message_v2 (optional)"
);
return;
}
/* transfer this block to new function submit() defined below, but change it slightly
to remove access to the json information that is no longer returned in this example */
/*
document.getElementById("JobResults").innerHTML = _job_executing_message_v2;
callJob(resultData)
.done(function(jobOutput){
if (jobOutput.success) {
document.getElementById("JobResults").innerHTML = "Done!";
setTimeout(() => {document.getElementById("JobResults").innerHTML = "";}, 2000);
}
else {
document.getElementById("JobResults").innerHTML = "Job finished with ERROR (see console for details)";
}
})
.fail(function(jqXHR, textStatus, errorThrown){
document.getElementById("JobResults").innerHTML = "Job failed to execute (see console for details)";
});
*/
}
}
function submit() {
document.getElementById("JobResults").innerHTML = _job_executing_message_v2;
callJob(_resultData);
/*
.done(function(jobOutput){
if (jobOutput.success) {
document.getElementById("JobResults").innerHTML = "Done!";
setTimeout(() => {document.getElementById("JobResults").innerHTML = "";}, 2000);
}
else {
document.getElementById("JobResults").innerHTML = "Job finished with ERROR (see console for details)";
}
})
.fail(function(jqXHR, textStatus, errorThrown){
document.getElementById("JobResults").innerHTML = "Job failed to execute (see console for details)";
});
*/
}
function callJob(resultData) {
va.jobUtil.PrepareVADataForSASJobs (resultData);
var stringifiedJSON = JSON.stringify(resultData);
// Your large JSON object as a Blob - Blob is like a file, and the POST method sends the file to the server
var jsonBlob = new Blob([stringifiedJSON], {type: 'text/plain'});
// Create form with input parameters
var formData = new FormData();
formData.append("_program", _job_name_v2);
formData.append("_action", "execute");
formData.append("_output_type", "html"); // the SAS code no longer returns json - ti now produces am html output
formData.append("myjsonfile", jsonBlob);
formData.append("castab", _job_output_cas_table_v2);
// add/process information from html prompts:
formData.append("mytext", document.getElementById("mytext")); // mytext will become a macro variable in the SAS code
var showLog = document.getElementById("_debug").checked;
if (showLog) {
formData.append("_debug", "log");
}
return $.ajax({
method: "POST",
url: "/SASJobExecution/",
data: formData,
contentType: false, // do not send content-type
processData: false, // do not transform data to fit to the default content-type application/x-www-form-urlencoded
headers:{"X-CSRF-TOKEN": "$CSRF$", "Accept":"application/json"}
})
.done(function(jobOutput){
if (jobOutput.success) {
console.log("Job executed with success!");
}
else {
console.log("Job executed with ERROR");
console.log("jobOutput=", jobOutput);
}
})
.fail(function(jqXHR, textStatus, errorThrown){
console.log("************** JOB FAILED ***************");
console.log("jqXHR: ",jqXHR);
console.log("textStatus: ",textStatus);
console.log("errorThrown: ",errorThrown);
});
}
va.messagingUtil.setOnDataReceivedCallback(onDataReceived);
</script>
</head>
<body role="main" class="jobexec_body">
<div class="jobexec_sample_header">SAS<sup>®</sup> Job Execution</div>
<h1 class="jobexec_sample_name">Simple ODS HTML</h1>
<p>
The PRINT procedure creates a simple HTML page that displays the data in the
SASHELP.CLASS table.
</p>
<hr/>
<label for="mytext" id="mytext_label">Any text:</label><br>
<input type="text" id="mytext" name="mytext"><br><br>
<!-- this next line was replaced with the one below it -->
<!--input type="submit" value="Run code" class="jobexec_sample_input_submit"/-->
<button onclick="submit()">Run Code</button>
<input type="checkbox" name="_debug" id="_debug" value="log" class="jobexec_sample_input_checkbox"/><label for="_debug">Show SAS Log</label>
<!-- I've added this div tag to be able to dsiplay the execution messages and show the Job output without overwriting the button and the check box -->
<div id="JobResults"></div>
</body>
</html>
I've also removed the portion that returns json from the SAS code, as your job is now returning HTML output. You could return both, but this would make the solution quite different from what you are familiar with:
title "&castab. &mytext.";
proc print data=sashelp.class noobs;
/* where age > &castab.; */
var name sex age height weight;
run; quit;
BTW, I intend to write a blog about jobs that return a list of files - for example, to handle json messages returned from the job to indicate the status of the execution and other job outputs - but this will most likely be in January 2024.
