One of the ways that 3rd-party developers can extend the Wix ecosystem is by creating apps that appear in the site owner’s dashboards. These apps can work with data from the site they’re installed on, such as Content Management System (CMS) data and business solution data (like CRM).
This tutorial explains how to create a dashboard page that displays a site’s most liked and most viewed blog posts.
We use the following technologies to create the app:
The end result will look like this:
We use the following steps to build the “Top Blog Posts” dashboard page:
Before getting started, make sure that:
We use the Wix CLI to initialize our "Top Blog Posts" app. In the process of initializing our app, the Wix CLI automatically:
src
folder containing initial boilerplate code for an app with a dashboard page.package.js
file containing your app dependencies.To initialize the app:
Open a terminal and navigate to the folder where you want to create your app.
Run the following command using npm:
Select A new Wix App.
Enter a name for your app. Let’s name our app Top Blog Posts.
The CLI prompts you to choose a development site (test site), which you’ll use throughout this tutorial to run and test your app. You can choose an existing Wix site as your development site, or create a new one. Let’s Create a new Development Site. The newly-created development site is automatically named something like Dev Site 5x2043, and can be found in your Wix account’s list of sites.
Follow the prompts to open the development site on your default browser. If the browser doesn’t open, install your app on your test site manually and skip the next step.
Click Agree & Add to install your app on your development site.
Back in the terminal, press Enter to select the default folder name (top-blog-posts
) for your app in your local file system.
You now have a new app in the Custom Apps page, a new folder in your local file system, and a local Git repository for developing and testing your app.
Now that you’ve initialized your app, you can run a local development server to see the app in action, and view local changes as you develop your app. The local development environment runs the app and its initial boilerplate code on the development site that you chose in the previous step.
To run a local development server for your app:
Navigate to your newly-created folder for your app.
Run the following command using npm:
Press 1 to open the local environment in your browser. Your development site’s dashboard opens, and you can see your newly-created app’s dashboard page in the left sidebar. We add the content of our app’s dashboard page in the next step.
Your app is now running on your development site. As you develop your app, any changes made to your app’s code are reflected in real time on your development site.
In this step, we'll show how to add permissions for the app. We use the queryPosts()
and getPostMetrics()
functions in the Wix SDK’s Blog API to get a list of all posts and post metrics. Then we use React code to display the most liked and viewed posts on our dashboard page.
To use the queryPosts()
and getPostMetrics()
functions, we need to give our app permission in your app's dashboard. Let’s first look for the permission that we need in the Permission Scopes section of the queryPosts()
function’s page.
The Permission Scopes section reads that we must have one of the permission scopes on the list. In our example, we choose the Manage Blog permission scope.
The same is for getPostMetrics()
. Let's choose the Manage Blog permission scope.
Note: You can find the permission scopes you need for each API in the individual function’s page in the JavaScript SDK documentation.
To add permissions for the app to request upon installation:
When a site owner installs the app, Wix prompts them to grant the necessary permissions.
Before you can start coding, you need to set up Wix Blog on your site and app:
Note: Make sure to add Wix Blog in both the Dashboard and the Editor.
https://{your-site-url}/blog
.Note: You'll be prompted to create an extension before testing the app. Ignore this prompt and click Test Your App.
Next, we will use the JavaScript SDK to retrieve blog data from the test site.
Before starting to write code for the SDK, set up a file for your code and import the necessary SDK modules. Your code will use the sdk
, blog
, and dashboard-sdk
modules. dashboard-sdk
is preinstalled by the CLI.
Create a file named blog-utils.js in the src > dashboard > pages directory of your app’s repo.
In your IDE terminal, run the following commands:
Next, create an SDK client that you can use to make authorized SDK calls. You can do this using the createClient()
function from the sdk
module. When you create an SDK client you have to pass in some settings:
Authorization Strategy: This tells the client how to authorize the calls it makes to the SDK. In this case, pass the OAuthStrategy()
function from the sdk
module. This configures the client to make SDK calls on behalf of your app.
Modules: The SDK submodules you want to call with the client. In this case, pass in the posts
submodules from the blog
module.
Paste the following code into your code file to import modules and create a new SDK client:
Finally, use the blog module in the SDK to retrieve the data you need.
async
function called getTopBlogPosts
in your code file.queryPosts()
function to find the posts with the most likes and views. The query allows you to sort the posts in descending order based on likes and views. Call this function twice, once for likes and once for views.mostLiked
and mostViewed
variables.getPostMetrics()
function to retrieve the post metrics by passing the ID of the post. These metrics include likes and views. Save these metrics as mostLikedMetrics
and mostViewedMetrics
variables.mostViewed
and mostLiked
. The value for each key should be an object containing the post data and the likes and views respectively of the highest-ranking posts.Paste the following code into your code file:
Finally, your blog-utils.js file should look like this:
Now that we have the blog data, we can use the Wix Design System to display it on a dashboard page. The app framework created by the CLI includes the code for a sample dashboard page. We can use that code as the basis for a dashboard page.
Open the page.tsx file.
Delete all the import statements and paste in the following ones:
In the return statement for the Index()
component, delete everything in between the <WixDesignSystemProvider>
tags.
When you’re done, your file should look like this:
Next, get your blog data ready to display on your dashboard page. This code goes below the import statements on your page.tsx file:
Define the interfaces for viewed and liked blog posts.
In the Index()
component use React hooks to access the data.
Add a loader that displays while data are loading.
Next, add React components from the Wix Design System to create the page structure.
<WixDesignSystemProvider>
tags in the return statement for the Index()
component. Structure your components to match the following diagram. Wrap <Text>
components in <div>
tags so that they each display on a different line.Box
component to ensure the cards inside it display correctly:When you’re done, your Index()
component should look like this:
Add static text, dynamic text, and other content to your Design System components. In some cases, text is added between the component’s opening and closing tags. In other cases, the text is passed into the component as a variable.
Pass these variables to the Heading
components inside the Card.Header
components:
Pass these variables to the Heading
components inside the Car.Content
components:
Add an onClick
event handler to the Button
component in the page header actions bar. Set the variable to this function:
When you’re done, your Index()
function should look like this:
Now that the app’s code is ready, you can test it locally using the Wix CLI.
The finished code sample should look like this:
To test your app, do the following:
After testing your app and seeing that it works as expected, you can: