Get user’s Designer capabilities

webflow.canForAppMode()

Determine if the user has a specified list of App abilities.

Querying User Capabilities by Designer Mode

Use this API to proactively query a user’s capabilities based on the Designer mode they are in, to see if they can use a certain feature of your App. There are a number of scenarios when you may use this method, including, but not limited to:

Scenarios

1. On App Launch:
   Determine the appropriate UI to display to the user based on the mode they are in.
   
   Example: If your App’s core functionality requires the user to be in the “Editing” role, you can either show UI prompting them to switch to the “Designer” role or notify them that the App can only function in a “Designer” role.
   
   
2. Dynamic UI/UX Adjustments
   Adjust the App’s UI/UX dynamically to match the user’s current capabilities.
   
   Example: If your App can only show a subset of the UI/features based on the user’s current mode, you can alter the App UI/UX to cater to their current capabilities.
   
   
3. User Actions
   Surface error notifications if a user attempts an action beyond their current capabilities.
   
   Example: If a user starts your App in Design mode but switches to Editing mode mid-session and attempts to insert new elements, use canForAppMode() to check their capabilities before proceeding. This allows you to notify them that the action cannot be performed in the current mode.
   
   

Syntax

1
webflow.canForAppMode(appModes: Array<AppMode>): Promise<{[key in AppMode]: boolean}>

Parameters

• appModes: Array<AppMode>
  A list of AppMode enums to request and see if the user has these abilities. You can find the list here:
  

  1
  {
  2
    "canAccessCanvas": "canAccessCanvas",
  3
    "canManageAssets": "canManageAssets",
  4
    "canAccessAssets": "canAccessAssets",
  5
    "canDesign": "canDesign",
  6
    "canEdit": "canEdit",
  7
    "canCreateComponents": "canCreateComponents",
  8
    "canModifyComponents": "canModifyComponents",
  9
    "canCreateStyles": "canCreateStyles",
  10
    "canModifyStyles": "canModifyStyles",
  11
    "canCreatePage": "canCreatePage",
  12
    "canReadPageSettings": "canReadPageSettings",
  13
    "canManagePageSettings": "canManagePageSettings",
  14
    "canReadVariables": "canReadVariables",
  15
    "canModifyVariables": "canModifyVariables",
  16
    "canModifyImageElement": "canModifyImageElement"
  17
  }

  These AppMode strings can be accessed via webflow.appModes (e.g., webflow.appModes.canDesign).

Returns

Promise<{[key in AppMode]}: boolean>

A Promise that resolves to a record containing the ability being requested, which maps to whether or not the user has that ability.

Example

1
const capabilities  = await webflow.canForAppMode([
2
  webflow.appModes.canEdit, 
3
  webflow.appModes.canDesign
4
]);
5
6
// User in "Editing" mode
7
// {capabilities.canEdit: true, capabilities.canDesign: false }

Example: Checking and Executing Based on Capabilities

Let’s build a function that checks if the app can perform the action of inserting an element. If yes, then perform the function; if not, trigger a notification.

1
async function insertElementIfAllowed() {
2
  const capabilities = await webflow.canForAppMode([
3
    webflow.appModes.canDesign,
4
    webflow.appModes.canEdit
5
  ]);
6
7
  if (capabilities.canDesign) {
8
    try {
9
      // Get Selected Element
10
      const selectedElement = await webflow.getSelectedElement();
11
12
      if (selectedElement) {
13
        // Insert DIV before selected Element
14
        const newDiv = await selectedElement.before(webflow.elementPresets.DivBlock);
15
16
        // Print element details
17
        console.log(`Element inserted: ${JSON.stringify(newDiv)}`);
18
        // Notify success
19
        await webflow.notify({ type: 'Success', message: 'Element inserted successfully!' });
20
      } else {
21
        // Notify error: No selected element
22
        await webflow.notify({ type: 'Error', message: 'No element selected!' });
23
      }
24
    } catch (error) {
25
      // Notify error
26
      await webflow.notify({ type: 'Error', message: 'Failed to insert element!' });
27
      console.error(error);
28
    }
29
  } else {
30
    // Notify error: User does not have the required capabilities
31
    await webflow.notify({ type: 'Error', message: 'You do not have the required permissions to insert elements!' });
32
  }
33
}
34
35
// Execute the function
36
await insertElementIfAllowed();