Select theme:
Radzen Blazor Studio has replaced Radzen as the primary RAD tool for Blazor applications.
Radzen Blazor Studio offers a modern UI, enhanced features, and improved performance to streamline your development process.
The latest documentation for Radzen Blazor Studio is available here: https://www.radzen.com/blazor-studio/documentation/
Open Radzen Blazor Studio docsThis 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.
Running this application requires a Spotify or Facebook account.
Create a new Radzen application by following the first step from the quickstart guide. Name the application Spotify Player
In this step we will add a new REST data source which consumes two Spotify endpoints:
https://api.spotify.com/v1/
.da4bd9113dec43578cca7c59c6bf6e44
.https://accounts.spotify.com/authorize
.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.
Now describe the
artists
property. We only need name
.
We are now ready to define the Album schema.
artists
property is an array of Album
schemas.Define the remaining schemas.
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.
browse/new-releases
which is the URL of the Get a List of new Releases endpoint.
Click Finish to complete the data source creation.
In this step we will create a new page, add a grid and bind it to the result of the getNewReleases
operation.
getNewReleases
invokation.${result.albums.items}
.Add the data grid which will display the new releases.
Drag and drop a DataGrid component and set its Data property to releases.
Add a column that will show the album image.
<img src="${data.images[2].url}">
.Add a column that will show the album name.
Add a column that will show the first artist name.
${data.artists[0].name}
.Add a column that will show the album type.
We are done! Run the application to see the latest Spotify releases.
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.
Now define the resource and operation.
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
.getAlbumTracks
operation.
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.
${parameters.id}
.${result.items}
.Add the data grid component that will display the tracks.
Drag and drop a DataGrid component and set its Data property to tracks.
Add a column that will show the track name.
Add a column that will allow the user to play the current track.
<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.
${event.id}
.That's all! Run the application to see the final result.
Radzen is free to use. You can also test the premium features for 15 days.
Start FreeSelect theme: