1 Reply Latest reply: Aug 22, 2018 7:16 AM by prashant naik RSS

    DropDown through Mashup Api

    Sayali Kapdule

      Hi,

      I Created the dropdown list using HTML,CSS, but I Want to create the same using mashup api and the field must come from Qliksense app. How will I create the dropdown list with same design using Qlik mashup API. Please help me out.

      Please find the below attached .png file which is created using HTML and CSS.

        • Re: DropDown through Mashup Api
          prashant naik

          Hi Sayali,

           

          What I understand is you want to fetch data of selected column and show it in dropdown.

          You can use field api and fetch the values of the field and create the dropdown value.

          Code for Reference to create one dropdown using qlik api:

          require(["js/qlik"], function(qlik) { // open the app

          var app = qlik.openApp('c31e2aba-3b46-4b13-8b87-c5c2514dea1d', config); // get data from a field

          var myDiv = document.getElementById("myDropdown");

           

          //Create dropdown and append select list

          var selectList = document.createElement("select");

          selectList.id = "mySelect";

          myDiv.appendChild(selectList);

           

          var myField = app.field("City").getData();

           

          myField.OnData.bind( function(){

               myField.rows.forEach(function(row){

                    var option = document.createElement("option");

                    option.value = row.qText;

                    option.text = row.qText;

                    selectList.appendChild(option);

               });

          });


          In forntend html code you can create a div like this.

          <div id="myDropdown"> </div>

           


          Or if you are using angular js then its little more easy to use. save the data in scope variable and use ng-repeat in <li> or if you are using select tag then use ng-repeat in option tag and fill the value of dropdown.


          Regards,

          Prashant