📁
DashboardJS
  • Getting Started
  • Configuration Options
    • Data
    • Config
      • Fetch API
      • Tabs
      • Record Settings
      • Fields
      • Actions
      • Internationalization & Localization
    • templateURL
    • appendTo
  • Dashboard Tools
    • Sorting
    • Filtering
    • View Modes
    • Pagination
  • Classes & APIs
    • Dashboard Overview
    • Dashboard.js
    • Tabs.js
    • Tab.js
    • Recordset.js
Powered by GitBook
On this page
  1. Configuration Options
  2. Config

Fetch API

Configure the fetch property in the config object

var dashboard = new FutureLabs.Dashboard({
  config: {
    fetch: {
      url: 'http://localhost:3010/getData'
    },
    tabs: {
      'User Profiles': {
        recordSettings:{
          fields: {
            Date: { name: 'Date of Birth' },
            Status: { name: 'Marital Status'},
            Name: { name: 'Name'},
            Gender: { name: 'Gender' }
          }
        }
      }
    }
  },
  templateURL: 'dashboard.html',
  appendTo: document.querySelector(".dashboard-container")
});

Optional Fetch parameters

You can also pass an optional options object to the fetch parameter

var dashboard = new FutureLabs.Dashboard({
  config: {
    fetch: {
      url: 'http://localhost:3010/getData',
      options: { 
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ed2ffbf5-6312-4ce3-900a-b31f6ec068f4'
        },
        method: 'GET',
        mode: "cors",
        cache: "no-cache"
      }
    },
    ....
});

You can also redefine the default pagination, sorting, and filtering parameters sent by the fetch API:

var dashboard = new FutureLabs.Dashboard({
  config: {
    fetch: {
      url: 'http://localhost:3010/getData',
      dashboardParameters: {
        page : 'page',
        itemsPerPage: 'itemsPerPage',
        count: 'count',
        getCount: 'getCount',
        filterBy: 'filterBy',
        sortBy: 'sortBy'
      },
      options: { 
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ed2ffbf5-6312-4ce3-900a-b31f6ec068f4'
        },
        method: 'GET',
        mode: "cors",
        cache: "no-cache"
      }
    },
    ....
});

PreviousConfigNextTabs

Last updated 1 year ago