Datagrid remote data & API Key

Webix JS
#1

Hi,

I’m using the datagrid component with the url property set to an API endpoint to get my data, which works fine. I want to add some authentication to the API via the X-API-Key header. How can I send this header to authenticate with the API endpoint?

Thanks,
David

#2

Hello,

You can try using a loading function or a loading proxy. Both make a webix.ajax GET call to fetch the data Code Snippet, and you can pass the needed headers with the request:

https://docs.webix.com/helpers__ajax_operations.html#extraheaders

#3

The backend API is returning the data in the “records” key. Is there a way to have Webix use a key other than “data”?

Example from backend:
{
“records”: [
{
“id”: 100071,
“sourcemodule”: “IAM”,
“ticketnumber”: “SCTASK12345678”,
“jobtype”: “CreateADUser”,
“jobstatus”: “COMPLETED”,
“portaluser”: “”,
“jobserver”: “DC1WSTSXJOB01”,
“timestamp”: “2021-03-03 13:50:00”,
“starttimestamp”: “2021-03-03 14:41:01”,
“endtimestamp”: “2021-03-03 14:41:07”,
“export”: null,
“export_timestamp”: null
},
{
“id”: 100072,
“sourcemodule”: “IAM”,
“ticketnumber”: “SCTASK12345699”,
“jobtype”: “CreateADUser”,
“jobstatus”: “COMPLETED”,
“portaluser”: “”,
“jobserver”: “DC1WSTSXJOB01”,
“timestamp”: “2021-03-03 13:50:00”,
“starttimestamp”: “2021-03-03 14:43:01”,
“endtimestamp”: “2021-03-03 14:43:07”,
“export”: null,
“export_timestamp”: null
},
]
}

#4

Please share a sample of data which is returned from the backend.

Webix Datatable expects either an array or an object like data: [/*array*/]. It looks like your server returns an object with a key other than data.

#5

Thanks. I added this but I’m not getting any data in the grid, only “1620955250637” in the first column. No errors in developer tools. Am I missing something? I can run it in postman and it returns the data.

url:function(params){
return webix.ajax().headers({
“X-API-Key”:“02c042aa-c3c2-4d11-9dae-1a6e230ea95e”
}).get("/apiv1/api.php/records/ent_jobqueue?filter=sourcemodule,eq,iam");
},

#6

If you are using a loading function or proxy, you can get the response and return the needed array from it:

url:function(params){
   return webix.ajax().headers({
         key:value
    }).get(url).then(function(data){
       data = data.json();
       return data.records; 
    });
}