Access content using JavaScript

Content management systems should not be walled gardens; robust platforms with rich APIs are where the future is headed. We built HiFi around a powerful API that can be accessed not only from server-side templates (as you may have used in the template design challenge) but also through a public-facing JSON API. 

For this mini-challenge, we will query and update content from your website using the HiFi JavaScript API and your browser's JavaScript console. 

Getting Started

Step 1) Navigate to your trial site's blog and click through to the 'Second Blog Post' (URL: /blog/second-blog-post ).

Step 2) Open up your browser's JavaScript console. ( Chrome: View > Developer > JS Console. FireFox w/ FireBug: View > Firebug > Console.)

Step 3) We will use the HiFi JavaScript library's each function to fetch some content and iterate over each result. Using the same query from the content challenge we can print the most recently updated pages on the site:

var printTitle = function(page) { console.log(page.title); };
hifi({'type':'page','orderBy':'-modified'}).each( printTitle );

First we defined the callback function, printTitle, that prints the title of a page. Then we used the HiFi JS API to query for pages ordered descending by modification and iterated through each using the printTitle callback.

Step 4) Now lets query for a specific blog post using some criteria on its url property. Here's the snippet:

hifi({'type':'page','url':'/blog/second-blog-post'}).each( printTitle );

The title of the blog post we are viewing will be printed 'Second Blog Post'.

Step 5) In a new browser tab, make sure you are logged in to your site's admin panel. (Place 'edit.' in-front of your subdomain.) In the challenge you will be updating data through the API so you'll need to be logged in.

Challenge

Use the HiFi JavaScript API's update function to change the url of the second blog post from '/blog/second-blog-post' to '/blog/lorem-ipsum-text'. (Hint: replace the each function in step 4 with update). After you have updated the URL, try refreshing your browser opened to the blog post whose URL you just changed to see HiFi's automatic 301 redirection in action. Nice work!

Conclusion

Today's customers are demanding complex, interactive features on their sites; HiFi's API pairs perfectly with jQuery giving you the tools you need to deliver awesome, custom client-side features. Your customers will love being able to control their data from HiFi's intuitive user interface. And we think you are going to love the possibilities this API opens up for your work.