Switch between View Modes from the URL

Question

Under the manage display for the user profile /admin/config/people/accounts/display, I have 4 view modes as below:

• Default
• Profile (Machine name: user.profile)
• Company (Machine name: user.company)
• Activities (Machine name: user.activities)

and under each view mode, I have a set of fields.

I also have a menu with below items:

• Profile
• Company
• Activities

Now, I need when a user click on the menu item (Profile), to redirect him to the view mode: Profile and so on for other menu items.

So basically, the link for the menu item should be something like:

/user/1/[view-mode]

I was thinking something easy like:

/user/1#profile will direct the user of uid=1 to the view mode: Profile of his profile page.

/user/1#company will direct the user of uid=1 to the view mode: Company of his profile page.

/user/1#activities will direct the user of uid=1 to the view mode: Activities of his profile page.

How to switch between view modes using the url only ?

is that doable!? if no, any alternative way ?

UPDATE #1 (My requirement)

Say on the user profile page, I have the below fields (as an example):

• field_1
• field_2
• field_3
• field_4
• field_5
• field_6
• field_7
• field_8
• field_9
• field_10
• field_11
• field_12

And a simple menu with below items:

• Profile
• Company
• Activities

I want when a logged in user click on the menu item:

• Profile (to display for him only field_1 -> field_4)
• Company (to display for him only field_5 -> field_8)
• Activities (to display for him only field_9 -> field_12)

How can I do that ? (my javascript knowledge is very very limited)

Answer 1

I think this is what you are looking for.

https://www.drupal.org/project/view_mode_page

It will create viewable routes for view modes. Check the examples and readme. They will display on the page the way they are configured to display from the backend.

Answer 2

Field group can create tab groups (horizontal and vertical) and tab elements on the same view mode. Than you are able to access each tab with a hash. The ID of each tab becomes the has anchor (#company etc).

You have to setup the fields in 1 view mode and place them under the appropriate tabs.

Here is a screenshot of how the setup should look.