What’s Axios?

Axios is a powerful promise based HTTP client available for your browser and node.js. It allows you to easily make API calls to content or data endpoints in your digital workplace without having to worry about re-authenticating. Every Igloo digital workplace has Axios available to widgets it out-of-the box.

How can I use it?

In our example, we’ll build a widget that displays the 10 most recent blog posts in a channel.  

Let’s dive into some simple code:

We’ll focus on lines 50 through 57 where we’re making a call into the digital workplace using Axios. To access the blog posts on a channel we’ll use the endpoint

/.api/api.svc/objects/byPath/children/view:

 We start by populating the endpoint URL with content from our configuration. In this case, the object’s path (config.path), and the number of items to return (config.count). Sinceaxios is available to every widget you can call it through the parent within your <script> tag.

This endpoint takes the following query parameters:

 path will depend on your digital workplace.

 maxcount is the number of records to return.

 startindex is the starting record. This is handy to create a widget that pages through the results.

orderby is the sort order of items to be returned. We’re going to use “PublishedDateDesc” – which means we’re going to return results from most to least recently published.

includefuturepublished controls whether the retunedresults include content set to be published in the future. We have this set to ‘false’ in our example.

In the response we’re going to look at data->response->items[]. We’ll iterate through this array and build a table with the results:

The complete call  isshown above. We’re iterating through the ‘response.data.response.items’ array and populating our table with the content. Some basic error handing has also been added to assist with troubleshooting.

The Result

Here’s how the widget looks:

To Dos

This simple widget was created to illustrate how easy it is to access your Igloo digital workplace content from within a widget. However, it’s far from complete. Next steps would include:

• Type checking should be implemented. By examining the __type parameter for each item, you can validate that you’re looking at the object you’re expecting.
• Better error handling. The example here spits out the error code in an alert <div>. A proper widget should catch all relevant error codes and provide friendly messaging to your end-users.
  
  

Our article What makes a widget great! also provides ideas for improving your widgets.

Caveats

It should be noted that Igloo’s ‘view’ APIs (including the one we’ve used will count as a page view. Your digital workplace’s analytics will reflect this.