Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

Mashup Editor - Search as you type box

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
satishkurra
Valued Contributor II

Hi

This is on 1 dimension Case Owner.

What if we want to search more than 1 dimension?

Also out of this, i observed a strange issue in demo apps.

https://webapps.qlik.com/masters/index.html

https://webapps.qlik.com/plant-operations/index.html

Steps to reproduce:

1. Select any value from dropdown

2. Click Clear ALL

3. Now perform the same selection done in Step 1. (We are not able to select the same field value again)

Thanks

Satish

0 Likes
259 Views