Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
Yianni_Ververis
Employee
Employee

In my previous posts I have showed how to use bootstrap's drop-down menus with the Capabilities API. In this tutorial I will show you how to use jQuery's UI to get results as you type like this

preview.png

  • From the dev-hub (http://localhost:4848/dev-hub/) click on "Create New", to create a new mashup. Give it a name and select as template the "Grid mashup template"

  • Select the "Helpdesk Management.qvf" for your app.

  • On the right hand side, click on "Create a list". This will be the results that we would like to search on.

  • From the left hand side click and drag the "case details" table onto the preview panel

  • Click on "Fields" and select "Case Owner".

  • Under "Rows" put 100 since we do not need any more for this tutorial, and give a name to your callback function. I usually name mine as "refactorData" because I restructure all of the data in a more accessible format. Once you hit create, you will see that the code for the list was added as well as the refactorData in line 108.

  • In our html's headers, after bootstrap css and right before requirejs, add the jquery ui css and js

<link rel="stylesheet" href="https://community.qlik.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  • Let's add the code into our callback function

function refactorData(reply, app){

     var data = [];

     for (var i = 0; i < reply.qListObject.qDataPages[0].qMatrix.length; i++) {

          data.push(reply.qListObject.qDataPages[0].qMatrix[0].qText);

     }

     $("#search").autocomplete({

          source: data

     });

};

  • In our "function AppUi ( app ) {" add the code below that will make the actual selection in our app

$( "#searchBtn" ).on( 'click', function () {

     app.field('Case Owner').selectValues([$('#search').val()], false, false);

});

  • Now Let's add the text box in our html page. Replace the "<div class="col-sm-4 qvplaceholder" id="QV01">" with this one

<div class="col-sm-4 qvplaceholder" id="QV01">

     <div class="input-group input-group-sm">

          <input type="text" class="form-control" placeholder="Type in the Case Owner" aria-describedby="basic-addon1" id="search" name="search">

          <span class="input-group-btn">

               <button class="btn btn-default" type="button" id="searchBtn"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>

          </span>

     </div>

</div>

And that's it. The final should look like this

preview2.png

YV

1 Comment