Consume REST service (Angular)

This guide demonstrates how to consume a custom REST service and authenticate via OAuth. It requires some knowledge about Radzen as it covers advanced topics. Check the quickstart guide for the basics.

We will create a Spotify player application which will show the latest releases and allow us to play the tracks.

Source Code

Running this application requires a Spotify or Facebook account.

How to build the application

• Step 1: Create and configure the application
• Step 2: Add the REST service
• Step 3: Create the New Releases page
• Step 4: Create the Tracks page

Step 1: Create and configure the application

Create a new Radzen application by following the first step from the quickstart guide. Name the application Spotify Player

Step 2: Add the REST service

In this step we will add a new REST data source which consumes two Spotify endpoints:

• Get a List of New Releases
• Get an Album’s Tracks

1. Open the Spotify Player application.
2. Click data to go to My DataSources.
3. Click new to add a new data source.
4. Select REST.
5. Set Name to Spotify.
6. Set the REST endpoint as https://api.spotify.com/v1/.
7. Set Authorization to OAuth.
8. Set ClientID to da4bd9113dec43578cca7c59c6bf6e44.
9. Set Authorization Url to https://accounts.spotify.com/authorize.
10. Click Next

Now we have to describe the responses that those two REST endpoints return. We will do so in the second step of the data source creation wizard by defining a few schemas.

First define the schemas returned by the Get a List of New Releases endpoint endpoint. A sample response is available in the Spotify documentation. We will use a few of the response properties and start defining schemas inside out - from the simplest objects to the ones that contain them.

First describe the images property. It is an array of objects:

{
  "height": 640,
  "url": "https://i.scdn.co/image/e6b635ebe3ef4ba22492f5698a7b5d417f78b88a",
  "width": 640
}

We only need the url property for the purpose of this demo.

1. Click add schema.
2. Set Name to Image.
3. Click the + button to add a new Property.
4. Set the property Name to url.

Now describe the artists property. We only need name.

1. Click add schema.
2. Set Name to Artist.
3. Click the + button to add a new Property.
4. Set the property Name to name.

We are now ready to define the Album schema.

1. Click add schema.
2. Set Name to Album.
3. Click the + button to add a new Property.
4. Set the property Name to album_type.
5. Add a new property.
6. Set the property Name to artists. Set Type to Artist. Check Is Array. This means that the artists property is an array of Album schemas.
7. Add a new property.
8. Set the property Name to id.
9. Add a new property.
10. Set the property Name to images. Set Type to Image. Check Is Array.
11. Add a new property.
12. Set the property Name to name.

Define the remaining schemas.

1. Add a new schema.
2. Set Name to Albums
3. Add a new property which is array of Album and is named items.

1. Add a new schema.
2. Set Name to AlbumsResponse
3. Add a new property of Albums type named albums.

We are ready with the responses of the Get a List of new Releases endpoint!

Now we have to define the actual resource that endpoint represents.

1. Click Next.
2. Click add resource.
3. Set Path to browse/new-releases which is the URL of the Get a List of new Releases endpoint.
4. Click the + button next to Operations to define a new operation with that path.
5. Set Name to getNewReleases. Radzen will create a function with this name that invokes this operation.
6. Set Method to GET.
7. Click the + button next to Responses to add a new response.
8. Set HTTP Status to 200. Set schema to AlbumsResponse.

Click Finish to complete the data source creation.

Step 3 Create the New Releases page

In this step we will create a new page, add a grid and bind it to the result of the getNewReleases operation.

1. Add a new page called New Releases.
2. Create a new page property called releases which is set to the result of the getNewReleases invokation.
3. Add new handler of the page Load event.
4. Set Type to Invoke data source method.
5. Set Name to getNewReleases.
6. Add Then handler.
7. Set Type to Set property.
8. Set Name to releases.
9. Set Value to ${result.albums.items}.

Add the data grid which will display the new releases.

1. Drag and drop a DataGrid component and set its Data property to releases.
2. Add a column that will show the album image.
   1. Click the + button next to the Columns property to add a new grid column.
   2. Set Property to images.
   3. Set Title to
   4. Set Template to <img src="${data.images[2].url}">.
   5. By default a data grid column column displays the property value as is. To display it as an image we set the Template property.
3. Add a column that will show the album name.
   1. Click the + button next to the Columns property to add a new grid column.
   2. Set Property to name.
   3. Set Title to Name.
4. Add a column that will show the first artist name.
   1. Click the + button next to the Columns property to add a new grid column.
   2. Set Property to artists.
   3. Set Title to Artist.
   4. Set Template to ${data.artists[0].name}.
5. Add a column that will show the album type.
   1. Click the + button next to the Columns property to add a new grid column.
   2. Set Property to album_type.
   3. Set Title to Type.

We are done! Run the application to see the latest Spotify releases.

Step 4: Create the Tracks page

Now create the page which will display the tracks of a release and allow us to play them. We will use the Get an Album’s tracks endpoint so we have to define it’s schemas and operations first.

1. Click data to go to the My DataSources screen.
2. Click Spotify to update the Spotify data source.
3. Click Next to skip the first step.
4. Add a new schema called Track.
5. Add two properties: name and preview_url.
6. Add a new schema called TracksResponse.
7. Add an array property of type Track and named items.

Now define the resource and operation.

1. Click Next.
2. Click add resource.
3. Set Path to albums/{id}/tracks. Notice the {id}? This is a placeholder for a path parameter called id. For example an actual URL will look like albums/123456/tracks.
4. Click the + button next to Operations to define a new operation with that path.
5. Set Name to getAlbumTracks.
6. Set Method to GET.
7. Click the + button next to Parameters to define a parameter for the getAlbumTracks operation.
8. Set Name to id.
9. Set In to path. This means this parameter is part of the path. Remember the path has a placeholder for it.
10. Click the + button next to Responses to add a response.
11. Set HTTP Status to 200. Set schema to TracksResponse.

We are done with the data source. Click Finish to save the data source.

Next create the Tracks page and display the tracks in a data grid.

1. Add a new page called Tracks. Exclude it from the navigation.
2. Add a new page property called tracks.
3. Add new handler of the page Load event.
4. Set Type to Invoke data source method.
5. Set Name to getAlbumTracks.
6. Add Parameter.
7. Set Name to id.
8. Set Value to ${parameters.id}.
9. Add Then handler.
10. Set Type to Set property.
11. Set Name to tracks.
12. Set Value to ${result.items}.

Add the data grid component that will display the tracks.

1. Drag and drop a DataGrid component and set its Data property to tracks.
2. Add a column that will show the track name.
   1. Click the + button next to the Columns property to add a new grid column.
   2. Set Property to name.
   3. Set Title to Name.
3. Add a column that will allow the user to play the current track.
   1. Click the + button next to the Columns property to add a new grid column.
   2. Set Property to preview_url.
   3. Set Title to Play
   4. Set Template to <audio controls *ngIf="data.preview_url" src="${data.preview_url}"></audio>.

The final step is to configure the data grid from the New Releases page to display the tracks of a selected album.

1. Load the New Releases page.
2. Select the data grid component.
3. Go to the Events
4. Add a handler of the Select event.
5. Set Type to Navigate to page.
6. Set Path to Tracks.
7. Add a parameter.
8. Set Name to id.
9. Set Value to ${event.id}.

That’s all! Run the application to see the final result.