Embedding a Link with the SDK

CONTENTS

Home

Once you have created an embed link you can add it to your registered external application using an iframe. The SDK includes a standalone javascript file (bipp.js) used by the external application to load the embeddable bipp dashboard. You need the bipp-generated app_id, client_id and client_secret credentials sent by email when the external application was registered.

Embedded Analytics is only supported for bipp Enterprise Edition.

Getting started with the SDK:

Initializing the SDK

The SDK must be initialized in your html file:

const server = "https://acme.app.bipp.io";

// embed link
const url = "https://acme.app.bipp.io/embed/31d19821-5f73-4730-96f5-ccc6ab34e4a0";

let auth_detail = {
    app_id: '90dd7c07-9bd6-4faa-8e2e-763e7e787daf',
    client_id: '2e6b06c282eb4516911e2767348c672d.zwchaz.localhost',
    client_secret: 'UwIfuCHgzHYfZFCwnLhSWCuEYNAmJc5MgLSwJxIwoY2vubkL'
}
 
let bipp = new bipp();
bipp.init({
    server,
    auth_detail,
    url
});

Loading a Dashboard

This example code creates an iframe object and appends it in the container html element. You need the bipp-generated app_id, client_id and client_secret credentials sent by email when the external application was registered. Change the width and height of the iframe with config.

let element = document.getElementById('container');
let config = { width: '700px', height: '400px' }

bipp.load({element, config});

Determining the Dashboard Loaded

You can set up a message to verify when the dashboard is fully loaded.

bipp.onmessage = (e) => {
       console.log("message from embedded SDK", e.data);
       // message from embedded SDK {source: "bippSDK", message: "ready"}
   }

Adding Filters

You can add filters to the embedded dashboard.

bipp.addFilter(<filters>)

where filters is an array of objects and each object represents a filter. A filter object has the following structure:

{
    table,
    column,
    value,
    params: {
        mode
    }
}

table and column are the underlying table name and column name
params is an optional field.
mode can have following values: IN, BETWEEN, <, >, <=, >=
value is a string

If mode is IN or BETWEEN then value is an array of length two, containing two values.

Filter examples:

// single filter   
filters = [{
    table: 'trips',
    column: 'payment_type',
    value: 'CSH'
}];
// two filters
filters = [
    {
        table: 'trips',
        column: 'payment_type',
        value: 'CRD'
    },
    {
        table: 'trips',
        column: 'rate_code',
        value: '34'
    }
]
// filter mode = 'IN'
filters = [{
    table: 'trips',
    column: 'payment_type',
    value: ['CSH', 'CRD'],
    params: { mode: 'IN' }
}]
// filter mode = 'BETWEEN'
filters = [{
    table: 'trips',
    column: 'pickup_datetime',
    value: ['2012-07-01', '2012-07-30'],
    params: { mode: 'BETWEEN' }
}]

Removing Filters

To remove filters from the embedded dashboard, pass an array of filter objects. Each filter object requires two fields: table and column.

bipp.removeFilter(<filters>)
 
// Example
bipp.removeFilter(
    [{
        table: 'trips',
        column: 'pickup_datetime'
    }]
);

Final HTML Example

Here is an example:

<!DOCTYPE html>
<html>
<body>
   <script  src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script src="https://unpkg.com/bipp"></script>
   <div id='container'></div>
 
<script>
 
   const server = "https://zwchaz.app.bipp.io";
  
   let auth_detail = {
       app_id: '90dd7c07-9bd6-4faa-8e2e-763e7e787daf',
       client_id: '2e6b06c282eb4516911e2767348c672d.zwchaz.localhost',
 
       client_secret: 'UwIfuCHgzHYfZFCwnLhSWCuEYNAmJc5MgLSwJxIwoY2vubkL'
   }
 
   // embed link
   const url = "https://zwchaz.app.bipp.io/embed/31d19821-5f73-4730-96f5-ccc6ab34e4a0";
 
   let element = document.getElementById('container');
   
   let config = { width: '1200px', height: '900px', style: 'border:none;' }
  
 
   let bipp = new bipp();
 
   bipp.init({
       server,
       auth_detail,
       url
   });
   bipp.load({element, config});
</script>
 
</body>
</html>