Using Gallery API and bringing in all the Questions from the workflow

[Q_Ball]

Following the great examples from  Andre de Vries here https://github.com/TheInformationLab/embed-alteryx-gallery-api

I've created a workflow app which has five input parameters, I've created an html page to pass the parms and can run the workflow app and it brings through the first question for me to pass data in. 

However in the examples by Andre he has this section, 

// Define a function to get the app Questions
var appInterface = function(workflowID, gallery) {
gallery.getAppQuestions(workflowID, function(questions){
// just getting the first question -- define a for loop if you want to grab all
// the description is the label of the interface tool
console.log(questions[0].description);
})
}

Not knowing much javascript I've tried all ways to create a loop to bring in all five questions but still can't get it to work anyone have any ideas ? Using the API interactive documentation page in the Gallery I can use the 'get questions' link to return  all the questions but can't get this to work in the javascript loop in the example that Andre created.

[
  {
    "name": "Decor",
    "type": "QuestionTextBox",
    "description": "Decor",
    "value": ""
  },
  {
    "name": "Grade",
    "type": "QuestionTextBox",
    "description": "Grade",
    "value": ""
  },
  {
    "name": "Finish",
    "type": "QuestionTextBox",
    "description": "Finish",
    "value": ""
  },
  {
    "name": "Size",
    "type": "QuestionTextBox",
    "description": "Size",
    "value": ""
  },
  {
    "name": "Thickness",
    "type": "QuestionTextBox",
    "description": "Thickness",
    "value": ""
  }
]

Response Code

200

Thanks for any help.

[DanH · Accepted solution]

From the Gallery API Interactive Docs accessible from your Gallery, you can download a "Pre-built Client". This provides a functional HTML/JavaScript example (similar to the Interactive Docs themselves, just more portable and simplified) that does what you're trying to do. I would advise starting with that code, then modifying it as needed.

I believe the relevant bit from that pre-built client is here within main.js :

$("#getAppInterface").click(function(){
        var workflowId = $("#workflowId").val().trim();
        if (!workflowId) {
            $("#appInterface").html('<span class="red">please enter an app ID.</span>');
            return;
        }
        gallery = new Gallery($("#apiLocation").val().trim(), $("#apiKey").val().trim(), $("#apiSecret").val().trim());
        gallery.getAppQuestions(workflowId, function(questions){
            var listStr = "<table>";
            var len = questions.length;
            if (len === 0) {
                listStr = "This app has no questions.";
            }
            for (var i = 0; i < len; i++){
                var question = questions[i];
                listStr += '<tr><td class="name"><label>' + question.name + '</label></td><td><input type="text" class="' + question.type + '" value="' + (question.value || '') + '" name="' + question.name + '">';
                if (question.items){
                    listStr += '<div>options: ';
                    for (var j = 0; j < question.items.length; j++) {
                        listStr += question.items[j].value += (j < question.items.length-1) ? ", " : "";
                    }
                    listStr += '</div>';
                }
                listStr += '</td></tr>';
            }
            listStr += "</table>";
            $("#appInterface").html(listStr);

        }, function(response){
            var error = response.responseJSON && response.responseJSON.message || response.statusText;
            $("#appInterface").html('<span class="red">' + error + '</span>');
        });
    });