Create dynamic dropdown menu using velocity

Help / Discuss
, , , ,
#1

Hello,
I’m trying to create a form which has a dropdown menu to choose different test cases. The choices, however, should be created dynamically based on the page titles in a space. I tried accomplishing this with html to create the general form and velocity, to create the dynamic choice options of the dropdown menu, using the following code:

{{html}}
<form method="post" action="save/MyForm">

   <label for="test_case">Test Case:</label>
   <select id="test_case" name="test_case">


<label for="choice">Auswählen:</label>
<select id="choice" name="choice">

{{velocity}}
    #set ($pages = $xwiki.search("space:Tests"))
    #foreach ($page in $pages)
        #set ($pageTitle = $page.title)
        <option value="$pageTitle">$pageTitle</option>
    #end
{{/velocity}}


   </select><br><br>
    
    <label for="device_model">Device Model:</label>
    <input type="text" id="device_model" name="device_model"><br><br>

    <label for="device_version">Device Version:</label>
    <input type="text" id="device_version" name="device_version"><br><br>
    


    
    <input type="submit" value="Submit">
</form>
{{/html}}

But unfortunately, this doesn’t seem to work (instead of giving me multiple options based on the page titles, it gives me the literal choice “$pageTitle”.

I tried first using velocity, but seeing how this didn’t work, I tried using javaScript instead of velocity to achieve the same thing with the javaScript code but to no avail:

<script>
    var selectElement = document.getElementById("test_case");

    // XWiki API call to get the pages inside the space
    XWikiAjax.search({
        query: 'type:Page space:Tests', # I also tried putting type:DOCUMENT, as I read that somewhere online but that also didn't work
        callback: function(response) {
            var pages = response.results;
            for (var i = 0; i < pages.length; i++) {
                var pageTitle = pages[i].title;
                var option = document.createElement("option");
                option.value = pageTitle;
                option.text = pageTitle;
                selectElement.appendChild(option);
            }
        }
    });
</script>

I’m unfortunately not that experienced when it comes to javaScript and even less experienced when it comes to velocity and I haven’t found anything online that could help me out here, so I was wondering if someone has any tips for me? Preferably I’d like to use velocity here but at this point I don’t care anymore whether it is velocity or JS or any other language, so if someone could help me out here, then I’d really appreciate that!
Thank you! :smiley:

#2

Hi @shafigh,

First of all, you are wrongly nesting the velocity and html macros, html must be used as child of velocity. If you revert them, then you will notice different errors and the first one would be that the search query in $xwiki.search("space:Tests") is wrong. Please look at Query Module (XWiki.org).

Hope it helps,
Alex

1 Like