On a recent project, I had to create a custom page which displays content by the logged in user, think of it as a “My articles” or “My blogs” page. I knew how to do it by writing code but I thought I’d try it with Views and see how far I could get without writing any custom code. Long story short, I was able to do it all by using just the Views module.
In this tutorial, you’ll learn how to create a page which will appear as a tab (local task) on the user profile page.
For once there are no extra modules to download and install. In Drupal 8, Views ships with core and will be automatically installed if you installed Drupal using the Standard installation profile.
If it’s not already installed, go to Extend and install Views and “Views UI”.
Create User Profile Page
The first bit of work we need to do is create an actual Views page.
This page will display a table of articles which is owned by the user, we’ll call it “My articles” and the URI to the page will be
%user argument will be the user ID which will be used by the contextual filter.
The owner of the content is defined by the user added to the “Authored by” field on the content edit page.
1. Go to Structure, Views and click on “Add view”.
2. Fill in the “Add view” form with the values defined in Table 1.0.
Table 1.0: Add view
|View name||My Articles|
|Create a page||Checked|
|Page title||My Articles|
3. If you go to
%user with any number, it should return a table of articles.
Create Contextual Filter
%user argument getting passed through the URI is not being used at this point. Let’s now add a contextual filter which will use the argument and only display articles which are authored by the user ID.
1. While on the Views edit page, click on Advanced then Add next to Contextual filters.
2. Search for “Authored by” in the Content category and click on Add.
3. Select the “Provide default value” radio button and choose “User Id from route context”
4. Further down the page:
- Check “Specify validation criteria”.
- Select “User ID” from Validator.
- Check “Validate user has access to the User”.
- Under “Access operation to check” select Edit.
5. Click on Apply to save the contextual filter, then click on Save to save the view.
Now if you go to the page,
/user/%user/my-articles make sure you change
%user with an actual user ID, you should only see their articles.
Page Access Control
Please make sure you’ve checked “Validate user has access to the User” and have chosen Edit under “Access operation to check”.
This means that only users who have edit access can access the page. This would be users accessing their own accounts or site administrators who can edit other user accounts.
If you do not then any user who knows the URI
/user/%user/my-articles could go directly to it and see which articles are owned by the user.
Display Page as Tab (Local Task)
At this point, we’ve created the page and added a contextual filter to only display articles owned by the user.
Now let’s create a menu for the page so it’s accessible via a tab on the user profile page.
1. While on the views edit page, click on “No menu” link in the “Page settings” section.
2. In the “Page: Menu item entry” window, complete the following:
- Select “Menu tab” from Type.
- Add “My articles” to “Menu link title”.
- Select “<User account menu>” from Parent. This is important if you don’t do this then the tab won’t appear.
- Add 5 to weight.
3. Now if you go to the “My articles” page it should go from this:
If you can’t see the tabs but have configured it properly then try rebuilding the site cache. Go to Configuration, Performance and click on “Clear all caches”.
The ability to create these types of pages is where Views really shines. Often a client will ask for a content specific page such as a “My blog” or “My articles” page and Views makes it very easy to create these types of pages.
Q: “My Articles” tab is not appearing.
First, make sure you’ve chosen “<User account menu>” from the Parent drop-down. Second, try rebuilding the site cache (go to Configuration, Performance and click on “Clear all caches”) and see if that fixes it.