The basics of the Capability API's

acquire_selection_state.js

// https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/SelectionAPI/qlik-selectionState-interface.htm

// here is a basic example of acquiring and working with the current selection
// state. Here we can get a list of all fields that have selections and what
// values have been selected for each field

var selectionState = app.selectionState()
var listener = function() {
  var selections = selectionState.selections
  // each item in the selectionState.selections is a field
  selections.forEach(item => {
    console.log("Selected Field", item.fieldName)
    var filters = item.selectedValues
    // each of the values in item.selectedValues is a selected value for that
    // field.
    filters.forEach(filter => {
        
        console.log("  Selected value:", filter.qName)
    })
  })
}

//bind the listener
selState.OnData.bind(listener)

connecting_to_engine.js

// https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/RootAPI/openApp-method.htm

// this is the config object used to connect to an app on a Qlik Sense server
var config = {
  host: 'playground-sense.qlik.com',
  prefix: '/showcase/',
  port: '443',
  isSecure: true,
  rejectUnauthorized: false,
  appname: '0b0fc6d5-05ce-44d7-95aa-80d0680b3559'
}

function main() {
  // our API uses requirejs, so here we're setting up our base URL
  require.config({
    baseUrl:
      (config.isSecure ? 'https://' : 'http://') +
      config.host +
      (config.port ? ':' + config.port : '') +
      config.prefix +
      'resources'
  })

  /**
   * Load the entry point for the Capabilities API family
   * See full documention: http://help.qlik.com/en-US/sense-developer/Subsystems/APIs/Content/MashupAPI/qlik-interface-interface.htm
   */
  require(['js/qlik'], function(qlik) {
    // We're now connected

    // Suppress Qlik error dialogs and handle errors how you like.
    qlik.setOnError(function(error) {
      console.log('ERROR', error)
    })

    // Open a dataset on the server
    app = qlik.openApp(config.appname, config)
  })
}

creating_a_hypercube.js

// https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/qlik-interface-interface.htm

// This is the basic definition of a hypercube and it's creation. You must
// define your dimensions with qDimensions, your measures with qMeasures and
// your qInitialDataFetch, where qHeight is the number of rows being
// retrieved and qWidth is the number of columns (usually dimensions + measures)

var hyperCubeDef = {
    qDimensions: [
      {
        qDef: {
          qFieldDefs: ['Title']
        }
      },
      {
        qDef: {
          qFieldDefs: ['Start Date']
        }
      }
    ],
    qMeasures: [
      {
        qDef: { qDef: '=Sum(TotalSales)' },
        qSortBy: { qSortByNumeric: -1 }
      }
    ],
    qInterColumnSortOrder: [2, 0, 1],
    qInitialDataFetch: [
      {
        qTop: 0,
        qLeft: 0,
        qHeight: 200,
        qWidth: 3
      }
    ]
  }
  app.createCube(hyperCubeDef, hypercube => {
    // after creating a cube you define a callback function to handle it
    // this function will be called each time the data changes (ie. when
    // someone makes a selection).


    // the basic matrix of data is available in the hypercube datapages
    let matrix = hypercube.qHyperCube.qDataPages[0].qMatrix

    // you can then treat the matrix as an array
    matrix.forEach((row, index) => {
        // the value for each column can be obtained by referencing array indexes
        // you can use qText for text values and qNum for numerical
        console.log("Title:", row[0].qText)
        console.log("Start Date:", row[1].qText)
        console.log("Sales:", row[2].qText)
      })
  })

creating_a_list.js

// https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/AppAPI/createList-method.htm

// This is the basic call to creating a list. It's similar to the call for a
// hypercube except instead of qDimensions and qMeasures you just specify
// qDef for a single field to list. qInitialDataFetch is basically the
// same.

// by specifying qSortByState: 1 we're saying we want the selected/optional/
// locked values first and the excluded values after.
const salesListDef = {
  qDef: {
    qFieldDefs: ["Salesperson Name"],
    qSortCriterias: [{ qSortByState: 1 }, { qSortByAscii: 1 }]
  },
  qInitialDataFetch: [
    {
      qTop: 0,
      qLeft: 0,
      qHeight: 2000,
      qWidth: 1
    }
  ]
}

app.createList(salesListDef, function(reply) {
  const $list = $("#salesList")
  // here we can see the actual list of data is available in the qListObject
  reply.qListObject.qDataPages[0].qMatrix.forEach(row => {
    let item = $(`<div>${row[0].qText}</div>`)
    // we can use the qState property to determine whether or not the current value
    // is available (selected, locked or optional)
    if (row[0].qState === "X") {
      item.addClass("notSelected")
    }
    item.click(() => {
      // on click we can have the selection of the value toggled
      app.field("Salesperson Name").selectValues([row[0].qText], true, true)
    })
    $list.append(item)
  })
  $list.scrollTop(0)
})

selecting_fields.js

// https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/APIs/Content/Sense_ClientAPIs/CapabilityAPIs/qlik-field-interface.htm

// here is a basic example of selecting a value for a field. When working with
// the QIX engine, selecting a field will cause all data to be updated
// dynamically and the callback function for all calls to create hypercubes
// or lists will automatically be recalled

const field = app.field('Salesperson Name')

// here we see that we can pass in multiple values to the selectValues
// function, selecting multiple values at the same time so only one
// update occurs. The second parameter indicates if we're toggle
// a selection or explicitly selecting. The second value indicates
// if we want this selection to override any locks
field.selectValues(['Jeff','John','Mary'], true, false)

// we can also get a list of the field data the same way we do with creating
// a list. Here's an example below.
const fieldData = field.getData()
fieldData.OnData.bind(() => {
    fieldData.rows.forEach(row => {
        console.log("Field Value:", row.qText)
    })
})

// finally you can clear the fields selection by calling .clear on it
field.clear()