Fluent Commerce Logo
Docs
Sign In

Restrict UserAction button visibility by using user roles

How-to Guide

Author:

Fluent Commerce

Changed on:

14 Sept 2023

Key Points

  • The below example demonstrates how the visibility of the CREATE WAVE button in Fluent STORE can be customised via roles, permissions, and the manifest.

Steps

Step arrow right iconCheck the current Wave Screen

Before making any changes, open up the STORE screen and check if the CREATE button is visible. (Note: Ensure you have at least 1 awaiting_wave fulfilment sitting pending to show the CREATE button):

No alt provided

Step arrow right iconUpdate Manifest

Add the following code snippet inside the userAction button in : `fc.mystique.manifest.store.fragment.waves`

1                            "roles": [
2                                "CREATE_WAVE_BUTTON"
3                           ],
No alt provided

Step arrow right iconCheck the wave screen

Go back to the STORE again and do a browser-level refresh.  The CREATE button should now be hidden:

No alt provided

Step arrow right iconCreate a new user role

Now go to the postman to create a new :

No alt provided
1POST: {{fluentApiHost}}/graphql. 
2Authorizatiuon: bearer {{account_token}}
3
4
5// Variable:
6{
7  "input": {
8    "name": "CREATE_WAVE_BUTTON"
9  }
10}
11
12
13// Query:
14mutation createRole ($input: CreateRoleInput) {
15    createRole (input: $input) {
16        id
17        name
18    }
19}
20
21




Step arrow right iconAssign Role to the Store user

Assign the new to the STORE user:

No alt providedNo alt provided
1POST: {{fluentApiHost}}/graphql. 
2Authorizatiuon: bearer {{account_token}}
3
4//Variable:
5{
6  "input": {
7    "id": 2297,
8     "roles": {
9      "role": {
10        "name": "CREATE_WAVE_BUTTON"
11      },
12      "contexts": [{
13        "contextType": "RETAILER",
14        "contextId": "199"
15      },
16        {
17        "contextType": "AGENT",
18        "contextId": "134"
19      }]
20    }
21
22     
23
24  }
25}
26
27
28// Query:
29
30mutation updateUser ($input: UpdateUserInput) {
31    updateUser (input: $input) {
32        id
33        ref
34        username
35        title
36        firstName
37        primaryLocation{
38            id
39        }
40        lastName
41        language{
42            label
43            value
44        }
45        primaryEmail
46        primaryPhone
47        type
48        status
49        department
50        country
51        timezone
52        promotionOptIn
53        createdOn
54        updatedOn
55    }
56}
57
58
59

Step arrow right iconCheck the Wave Screen

Go back to Fluent STORE and refresh the page. The user should able to see the CREATE button on the screen because the user now contains the new :

No alt provided

Step arrow right iconRemoving Roles from a user

You can easily remove the roles from the user by using this GQL mutation:

No alt provided
1POST: {{fluentApiHost}}/graphql. 
2Authorizatiuon: bearer {{account_token}}
3
4
5// Query
6mutation{
7  removeUserRolesFromUser(input:{
8    user:{username:"199_MEL"} 
9    roles:[
10    	{role:{name:"CREATE_WAVE_BUTTON"} contexts:{contextType:"RETAILER" contextId:"199"}},
11        {role:{name:"CREATE_WAVE_BUTTON"} contexts:{contextType:"AGENT" contextId:"134"}}        
12    ]
13  })
14   {
15    status
16  }
17}
18



Fluent Commerce

Fluent Commerce