Hi @Babloo
Here is how I was able to get this running in our Viya 3.5 now 😊
- Created a new Job Definition called 'getDsColValues' with 'No embedded form', that accepts two custom parameters (s_dsName, s_colName) and returns a unique list of values in JSON format.
The Job was saved under the Public Folder (/Public/getDsColValues). Here is it's SAS code.
/* Generate unique list of values */
Proc summary data=&s_dsName NWAY missing;
class &s_colName;
output out=work._unique(drop=_type_);
run;
proc json out=_webout pretty nosastags;
export work._unique;
run;
<html>
<head>
<link rel="stylesheet" href="/SASJobExecution/theme">
</head>
<body>
<h1 class="jobexec_sample_name">Creating JES Prompts and Output Using SAS Data sets</h1>
<p>
The prompts below contains items pulled dynamically from SAS data sets.
<br><br>
To view data set records, make a seletion and press 'submit'
</p>
<p>
<form action="javascript:submitForm();">
<!-- Define Dropdown/Select place holders -->
<div id="yearList"></div>
</nbsp>
<div id="stateList"></div>
</nbsp>
</nbsp>
<p></p>
<input type="submit">
</form>
<center>
<div id="JobResults"></div>
</center>
</body>
<script>
// CREATE AN XMLHttpRequest OBJECT, WITH POST METHOD.
var formData = new FormData();
// This is my SAS Job that returns JSON Objects Array of unique values list from a SAS Data set.
formData.append("_program", "/Public/getDsColValues");
formData.append("_action", "execute");
formData.append('_csrf', "$CSRF$");
formData.append('s_dsName', "sashelp.prdsal2"); // SAS Data set specified for the s_dsName parameter
formData.append('s_colName', "year"); // Year column specified for the s_colName parameter
formData.append("_output_type", "json");
// Declare Ajax request object for the YearList
var xhr = new XMLHttpRequest();
xhr.addEventListener("error", function (event) {
alert("Something went wrong.");
});
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
// Pass Parsed JSON DATA, and other info to the custom function
createSelection(JSON.parse(this.responseText),'year','YEAR',1);
}
else {
document.getElementById("yearList").innerHTML = "Status: " + this.status;
}
}
};
// Declare Ajax request object for the StateList
var xhr2 = new XMLHttpRequest();
xhr2.addEventListener("error", function (event) {
alert("Something went wrong.");
});
xhr2.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
// Pass Parsed JSON DATA, and other info
createSelection(JSON.parse(this.responseText),'state','STATE',5);
}
else {
document.getElementById("stateList").innerHTML = "Status: " + this.status;
}
}
};
// Submit the request and get Year data elements from SAS data set
xhr.open("post", "/SASJobExecution/");
xhr.send(formData);
// Submit the request and get State data elements from SAS data set
xhr2.open("post", "/SASJobExecution/");
formData.set('s_colName', "state"); // Reuse the same formData object, but just change the value of the s_colName parameter
xhr2.send(formData);
// Display a temporary message in the DIV
document.getElementById("yearList").innerHTML = "Please wait ... ";
document.getElementById("stateList").innerHTML = "Please wait ... ";
//Declare a Function to convert JSON response into a Dropdown selection widget
function createSelection(rList,prefix,name,size = 1) {
var listName = prefix + 'List';
var prompt = '<select name="' + prefix + 'Select" size="' + size + '">';
var i;
//alert(JSON.stringify(rList));
for(i = 0; i < rList.length; i++) {
prompt += '<OPTION VALUE="' + rList[i][name] + '">' + rList[i][name] + ' :' + rList[i]._FREQ_ + '</option>';
}
prompt += '</select>'
document.getElementById(listName).innerHTML = prompt;
}
function submitForm() {
var formData = new FormData();
formData.append("yearParm", document.querySelector('[name="yearSelect"]').value);
formData.append("stateParm", document.querySelector('[name="stateSelect"]').value);
formData.append("_program", "$PROGRAM$");
formData.append("_action", "execute");
formData.append('_csrf', "$CSRF$");
var request = new XMLHttpRequest();
request.addEventListener("error", function (event) {
alert("Something went wrong.");
});
request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("JobResults").innerHTML = this.responseText;
}
else {
document.getElementById("JobResults").innerHTML = "Status: " + this.status;
}
}
};
request.open("post", "/SASJobExecution/");
request.send(formData);
// Display a temporary message in the DIV
document.getElementById("JobResults").innerHTML = "Please wait ... ";
}
</script>
</html>
I stopped here once I was able to populate my HTML Select/DropDown widgets from SAS, after all, this is just Prove of Concept 😉
I hope this gets your closer to your goal.
But I'll just repeat my advice again, for SAS Viya 3.5 stick with the TASK Prompts, out of the box, they are probably a lot more feature rich compared to what you would spend time to build using JavaScript/HTML/CSS combination.
Good luck,
Ahmed
