DEVREL-2723: Example for getDisplayName and setDisplayName

Author: tim-webflow

src/components/PermissionsMap.tsx

@@ -81,6 +81,8 @@ export const permissionsMap: PermissionsMap = {
     setStyles: { permissions: ['canDesign'] },
     getTag: { permissions: ['canAccessCanvas'] },
     setTag: { permissions: ['canDesign'] },
+    getDisplayName: { permissions: ['canAccessCanvas'] },
+    setDisplayName: { permissions: ['canDesign'] },
     getAttribute: { permissions: ['canAccessCanvas'] },
     setAttribute: { permissions: ['canDesign'] },
     getAllAttributes: { permissions: ['canAccessCanvas'] },

src/examples/elements.ts

@@ -923,6 +923,38 @@ export const Elements = {
       }
     },
   },
+  // Display Name Operations
+  displayName: {
+    getDisplayName: async () => {
+      // Get Selected Element
+      const element = await webflow.getSelectedElement()
+
+      if (element && element.displayName) {
+        // Get the Navigator display name (null if using automatic name)
+        const name = await element.getDisplayName()
+        console.log(name) // e.g. 'Hero Wrapper' or null
+      } else {
+        console.log('No element selected or element does not support display names')
+      }
+    },
+
+    setDisplayName: async (displayName: string) => {
+      // Get Selected Element
+      const element = await webflow.getSelectedElement()
+
+      if (element && element.displayName) {
+        // Set a custom Navigator label; pass '' to reset to automatic name
+        await element.setDisplayName(displayName)
+
+        // Verify the update
+        const name = await element.getDisplayName()
+        console.log(name)
+      } else {
+        console.log('No element selected or element does not support display names')
+      }
+    },
+  },
+
   formInputOperations: {
     getInputName: async () => {
       const selectedElement = await webflow.getSelectedElement()