npm - pptb-standard-sample-tool - Versions diffs - 0.0.5 - Mend

pptb-standard-sample-tool 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,141 @@
+# PowerPlatform Example Tool
+A complete example tool demonstrating the HTML-first architecture with TypeScript for PowerPlatform ToolBox.
+## Features
+- ✅ TypeScript with full type safety
+- ✅ HTML+CSS+JS architecture
+- ✅ Access to ToolBox API via `window.toolboxAPI`
+- ✅ Connection URL and access token handling
+- ✅ Event subscription and handling
+- ✅ Interactive UI with notifications, clipboard, and data display
+## Structure
+```
+example-tool/
+├── src/
+│   ├── index.html      # Main UI
+│   ├── index.ts        # Tool logic (TypeScript)
+│   └── styles.css      # Styling
+├── dist/               # Compiled output (after build)
+│   ├── index.html
+│   ├── index.js
+│   ├── index.js.map
+│   └── styles.css
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+## Installation
+Install dependencies:
+```bash
+npm install
+```
+## Development
+Build the tool:
+```bash
+npm run build
+```
+Watch mode for development:
+```bash
+npm run watch
+```
+## Usage in ToolBox
+1. Install the tool in ToolBox:
+   ```javascript
+   await window.toolboxAPI.installTool('@powerplatform/example-tool');
+   ```
+2. Load the tool:
+   ```javascript
+   await window.toolboxAPI.loadTool('@powerplatform/example-tool');
+   ```
+3. Get the tool's HTML with connection context:
+   ```javascript
+   const html = await window.toolboxAPI.getToolWebviewHtml(
+     '@powerplatform/example-tool',
+     'https://your-env.crm.dynamics.com',
+     'your-access-token'
+   );
+   ```
+4. Render the HTML in a webview.
+## API Usage
+The tool demonstrates various ToolBox API features:
+### Getting Connection Context
+```typescript
+const context = await window.toolboxAPI.getToolContext();
+console.log(context.connectionUrl);
+console.log(context.accessToken);
+```
+### Showing Notifications
+```typescript
+await window.toolboxAPI.showNotification({
+  title: 'Success',
+  body: 'Operation completed',
+  type: 'success'
+});
+```
+### Subscribing to Events
+```typescript
+window.toolboxAPI.onToolboxEvent((event, payload) => {
+  console.log('Event:', payload.event);
+  console.log('Data:', payload.data);
+});
+```
+### Accessing Connections
+```typescript
+const connections = await window.toolboxAPI.getConnections();
+const active = await window.toolboxAPI.getActiveConnection();
+```
+## Type Definitions
+This tool includes TypeScript type definitions in the `types/` folder. The type definitions provide:
+- Full ToolBoxAPI interface
+- Event type definitions
+- Connection and Tool interfaces
+- Notification options
+- And more...
+## TypeScript Configuration
+The tool uses modern TypeScript configuration:
+- **Target**: ES2022
+- **Module**: ES2022
+- **Module Resolution**: bundler (modern strategy)
+- **Strict Mode**: Enabled with additional safety checks:
+  - `noUnusedLocals`: Warns about unused local variables
+  - `noUnusedParameters`: Warns about unused function parameters
+  - `noFallthroughCasesInSwitch`: Ensures all switch cases handle control flow
+  - `useDefineForClassFields`: Modern class field semantics
+  - `moduleDetection`: Force module detection
+## License
+MIT

package/dist/index.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PowerPlatform Example Tool</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🔧 PowerPlatform Example Tool</h1>
+            <p>HTML-first architecture with TypeScript</p>
+        </header>
+        <section class="info-panel">
+            <h2>Connection Information</h2>
+            <div class="info-grid">
+                <div class="info-item">
+                    <label>Tool ID:</label>
+                    <span id="tool-id">Loading...</span>
+                </div>
+                <div class="info-item">
+                    <label>Connection URL:</label>
+                    <span id="connection-url">Loading...</span>
+                </div>
+                <div class="info-item">
+                    <label>Access Token:</label>
+                    <span id="access-token">Loading...</span>
+                </div>
+            </div>
+        </section>
+        <section class="actions-panel">
+            <h2>Quick Actions</h2>
+            <div class="button-grid">
+                <button id="btn-show-notification" class="btn btn-primary">
+                    Show Notification
+                </button>
+                <button id="btn-get-connections" class="btn btn-secondary">
+                    Get Connections
+                </button>
+                <button id="btn-copy-url" class="btn btn-secondary">
+                    Copy Connection URL
+                </button>
+                <button id="btn-get-tools" class="btn btn-secondary">
+                    List All Tools
+                </button>
+            </div>
+        </section>
+        <section class="events-panel">
+            <h2>Event Log</h2>
+            <div id="event-log" class="event-log"></div>
+            <button id="btn-clear-log" class="btn btn-small">Clear Log</button>
+        </section>
+        <section class="output-panel">
+            <h2>Output</h2>
+            <pre id="output"></pre>
+        </section>
+    </div>
+    <script type="module" src="index.js"></script>
+</body>
+</html>

package/dist/index.js ADDED Viewed

@@ -0,0 +1,191 @@
+/// <reference types="../types" />
+/**
+ * PowerPlatform Example Tool - Main Entry Point
+ *
+ * This tool demonstrates the HTML-first architecture with TypeScript.
+ * It accesses the ToolBox API via window.toolboxAPI and displays
+ * connection information, handles events, and performs actions.
+ */
+// Type the toolbox API
+const toolbox = window.toolboxAPI;
+// State management
+let eventCount = 0;
+/**
+ * Listen for TOOLBOX_CONTEXT from parent window (passed via postMessage)
+ */
+window.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "TOOLBOX_CONTEXT") {
+        // Set the context on window object
+        window.TOOLBOX_CONTEXT = event.data.data;
+        console.log("Received TOOLBOX_CONTEXT:", window.TOOLBOX_CONTEXT);
+        // If DOM is already ready, update the display immediately
+        if (document.readyState === "complete" || document.readyState === "interactive") {
+            displayConnectionContext();
+        }
+    }
+});
+/**
+ * Initialize the tool when DOM is ready
+ */
+document.addEventListener("DOMContentLoaded", async () => {
+    console.log("Example Tool Initialized");
+    // Display connection context
+    await displayConnectionContext();
+    // Setup event listeners for UI interactions
+    setupUIEventListeners();
+    // Subscribe to ToolBox events
+    subscribeToToolBoxEvents();
+    // Log tool startup
+    logEvent("Tool started successfully");
+});
+/**
+ * Display connection context from TOOLBOX_CONTEXT or getToolContext
+ */
+async function displayConnectionContext() {
+    try {
+        // First, try to get context from injected window.TOOLBOX_CONTEXT
+        let context = window.TOOLBOX_CONTEXT;
+        // If not available, fetch it via API
+        if (!context) {
+            context = await toolbox.getToolContext();
+        }
+        // Update UI
+        updateElement("tool-id", context.toolId || "Not set");
+        updateElement("connection-url", context.connectionUrl || "Not set");
+        updateElement("access-token", context.accessToken ? "***" + context.accessToken.slice(-10) : "Not set");
+        logEvent("Connection context loaded", context);
+    }
+    catch (error) {
+        console.error("Failed to load connection context:", error);
+        logEvent("Error loading connection context", error);
+    }
+}
+/**
+ * Setup UI event listeners
+ */
+function setupUIEventListeners() {
+    // Show Notification button
+    document.getElementById("btn-show-notification")?.addEventListener("click", async () => {
+        try {
+            await toolbox.showNotification({
+                title: "Hello from Example Tool!",
+                body: "This is a notification from the example tool",
+                type: "success",
+                duration: 5000,
+            });
+            logEvent("Notification shown");
+        }
+        catch (error) {
+            logEvent("Error showing notification", error);
+        }
+    });
+    // Get Connections button
+    document.getElementById("btn-get-connections")?.addEventListener("click", async () => {
+        try {
+            const connections = await toolbox.getConnections();
+            displayOutput("Connections", connections);
+            logEvent(`Retrieved ${connections.length} connections`);
+        }
+        catch (error) {
+            logEvent("Error getting connections", error);
+        }
+    });
+    // Copy Connection URL button
+    document.getElementById("btn-copy-url")?.addEventListener("click", async () => {
+        try {
+            const context = await toolbox.getToolContext();
+            if (context.connectionUrl) {
+                await toolbox.copyToClipboard(context.connectionUrl);
+                logEvent("Connection URL copied to clipboard");
+            }
+            else {
+                logEvent("No connection URL available");
+            }
+        }
+        catch (error) {
+            logEvent("Error copying URL", error);
+        }
+    });
+    // List All Tools button
+    document.getElementById("btn-get-tools")?.addEventListener("click", async () => {
+        try {
+            const tools = await toolbox.getAllTools();
+            displayOutput("Installed Tools", tools);
+            logEvent(`Retrieved ${tools.length} tools`);
+        }
+        catch (error) {
+            logEvent("Error getting tools", error);
+        }
+    });
+    // Clear Log button
+    document.getElementById("btn-clear-log")?.addEventListener("click", () => {
+        const eventLog = document.getElementById("event-log");
+        if (eventLog) {
+            eventLog.innerHTML = "";
+            eventCount = 0;
+        }
+    });
+}
+/**
+ * Subscribe to ToolBox events
+ */
+function subscribeToToolBoxEvents() {
+    toolbox.onToolboxEvent((_event, payload) => {
+        logEvent(`ToolBox Event: ${payload.event}`, payload.data);
+    });
+    logEvent("Subscribed to ToolBox events");
+}
+/**
+ * Update an element's text content with animation
+ */
+function updateElement(id, value) {
+    const element = document.getElementById(id);
+    if (element) {
+        element.textContent = value;
+        element.classList.add("status-updated");
+        setTimeout(() => element.classList.remove("status-updated"), 500);
+    }
+}
+/**
+ * Display output in the output panel
+ */
+function displayOutput(title, data) {
+    const output = document.getElementById("output");
+    if (output) {
+        output.textContent = `=== ${title} ===\n\n${JSON.stringify(data, null, 2)}`;
+    }
+}
+/**
+ * Log an event to the event log panel
+ */
+function logEvent(message, data) {
+    const eventLog = document.getElementById("event-log");
+    if (!eventLog)
+        return;
+    eventCount++;
+    const time = new Date().toLocaleTimeString();
+    const entry = document.createElement("div");
+    entry.className = "event-entry";
+    entry.innerHTML = `
+        <span class="event-time">[${time}]</span>
+        <span class="event-type">#${eventCount}</span>
+        <span>${message}</span>
+    `;
+    eventLog.appendChild(entry);
+    eventLog.scrollTop = eventLog.scrollHeight;
+    // Also log to console
+    if (data) {
+        console.log(`[${time}] ${message}`, data);
+    }
+    else {
+        console.log(`[${time}] ${message}`);
+    }
+}
+// Export for debugging
+window.exampleTool = {
+    displayConnectionContext,
+    logEvent,
+    displayOutput,
+};
+export {};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/styles.css ADDED Viewed

@@ -0,0 +1,202 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 20px;
+    min-height: 100vh;
+}
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+header {
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+    text-align: center;
+}
+header h1 {
+    color: #667eea;
+    font-size: 2em;
+    margin-bottom: 10px;
+}
+header p {
+    color: #666;
+    font-size: 1.1em;
+}
+section {
+    background: white;
+    padding: 25px;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+section h2 {
+    color: #333;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #667eea;
+}
+.info-grid {
+    display: grid;
+    gap: 15px;
+}
+.info-item {
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    gap: 10px;
+    align-items: center;
+}
+.info-item label {
+    font-weight: 600;
+    color: #555;
+}
+.info-item span {
+    color: #333;
+    padding: 8px 12px;
+    background: #f5f5f5;
+    border-radius: 5px;
+    font-family: 'Courier New', monospace;
+    word-break: break-all;
+}
+.button-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+.btn {
+    padding: 12px 24px;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 600;
+}
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+.btn-secondary {
+    background: #f0f0f0;
+    color: #333;
+}
+.btn-secondary:hover {
+    background: #e0e0e0;
+    transform: translateY(-2px);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+.btn-small {
+    padding: 8px 16px;
+    font-size: 0.9em;
+    margin-top: 10px;
+}
+.event-log {
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 15px;
+    max-height: 300px;
+    overflow-y: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+    margin-bottom: 10px;
+}
+.event-entry {
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    color: #333;
+}
+.event-entry:last-child {
+    border-bottom: none;
+}
+.event-time {
+    color: #666;
+    font-size: 0.85em;
+    margin-right: 10px;
+}
+.event-type {
+    font-weight: 600;
+    color: #667eea;
+    margin-right: 10px;
+}
+.output-panel pre {
+    background: #2d2d2d;
+    color: #f8f8f2;
+    padding: 15px;
+    border-radius: 5px;
+    overflow-x: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+    max-height: 400px;
+    overflow-y: auto;
+}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: #667eea;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #764ba2;
+}
+/* Animation for status changes */
+.status-updated {
+    animation: pulse 0.5s ease-in-out;
+}
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "pptb-standard-sample-tool",
+  "version": "0.0.5",
+  "displayName": "Power Platform Standard Sample Tool",
+  "description": "Example tool demonstrating HTML-first architecture with TypeScript",
+  "author": "Power Platform ToolBox",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc && npm run copy-html && npm run copy-css",
+    "copy-html": "cp src/index.html dist/",
+    "copy-css": "cp src/styles.css dist/",
+    "watch": "tsc --watch"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3"
+  }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ES2022",
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "moduleResolution": "bundler",
+        "declaration": false,
+        "sourceMap": true,
+        "allowSyntheticDefaultImports": true,
+        "isolatedModules": true,
+        "useDefineForClassFields": true,
+        "moduleDetection": "force",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "dist"]
+}

package/types/index.d.ts ADDED Viewed

@@ -0,0 +1,155 @@
+/**
+ * PowerPlatform ToolBox API Type Definitions
+ *
+ * Tools running in ToolBox webviews can access the ToolBox API via window.toolboxAPI
+ */
+declare namespace ToolBox {
+  /**
+   * Tool context containing connection information
+   */
+  export interface ToolContext {
+    toolId: string | null;
+    connectionUrl: string | null;
+    accessToken: string | null;
+  }
+  /**
+   * Notification options
+   */
+  export interface NotificationOptions {
+    title: string;
+    body: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    duration?: number; // Duration in milliseconds, 0 for persistent
+  }
+  /**
+   * Event types that can be emitted by the ToolBox
+   */
+  export type ToolBoxEvent =
+    | 'tool:loaded'
+    | 'tool:unloaded'
+    | 'connection:created'
+    | 'connection:updated'
+    | 'connection:deleted'
+    | 'settings:updated'
+    | 'notification:shown';
+  /**
+   * Event payload for ToolBox events
+   */
+  export interface ToolBoxEventPayload {
+    event: ToolBoxEvent;
+    data: unknown;
+    timestamp: string;
+  }
+  /**
+   * Dataverse connection configuration
+   */
+  export interface DataverseConnection {
+    id: string;
+    name: string;
+    url: string;
+    environment: 'Dev' | 'Test' | 'UAT' | 'Production';
+    clientId?: string;
+    tenantId?: string;
+    createdAt: string;
+    lastUsedAt?: string;
+    isActive?: boolean;
+  }
+  /**
+   * Tool information
+   */
+  export interface Tool {
+    id: string;
+    name: string;
+    version: string;
+    description: string;
+    author: string;
+    icon?: string;
+  }
+  /**
+   * ToolBox API exposed to tools via window.toolboxAPI
+   */
+  export interface ToolBoxAPI {
+    // Settings
+    getUserSettings: () => Promise<any>;
+    updateUserSettings: (settings: any) => Promise<void>;
+    getSetting: (key: string) => Promise<any>;
+    setSetting: (key: string, value: any) => Promise<void>;
+    // Connections
+    addConnection: (connection: any) => Promise<void>;
+    updateConnection: (id: string, updates: any) => Promise<void>;
+    deleteConnection: (id: string) => Promise<void>;
+    getConnections: () => Promise<DataverseConnection[]>;
+    setActiveConnection: (id: string) => Promise<void>;
+    getActiveConnection: () => Promise<DataverseConnection | null>;
+    disconnectConnection: () => Promise<void>;
+    // Tools
+    getAllTools: () => Promise<Tool[]>;
+    getTool: (toolId: string) => Promise<Tool>;
+    loadTool: (packageName: string) => Promise<Tool>;
+    unloadTool: (toolId: string) => Promise<void>;
+    installTool: (packageName: string) => Promise<Tool>;
+    uninstallTool: (packageName: string, toolId: string) => Promise<void>;
+    getToolWebviewHtml: (
+      packageName: string,
+      connectionUrl?: string,
+      accessToken?: string
+    ) => Promise<string | null>;
+    getToolContext: () => Promise<ToolContext>;
+    // Tool Settings
+    getToolSettings: (toolId: string) => Promise<any>;
+    updateToolSettings: (toolId: string, settings: any) => Promise<void>;
+    // Notifications
+    showNotification: (options: NotificationOptions) => Promise<void>;
+    // Clipboard
+    copyToClipboard: (text: string) => Promise<void>;
+    // File operations
+    saveFile: (defaultPath: string, content: any) => Promise<string | null>;
+    // Events
+    getEventHistory: (limit?: number) => Promise<ToolBoxEventPayload[]>;
+    onToolboxEvent: (
+      callback: (event: any, payload: ToolBoxEventPayload) => void
+    ) => void;
+    removeToolboxEventListener: (
+      callback: (event: any, payload: ToolBoxEventPayload) => void
+    ) => void;
+    // Auto-update
+    checkForUpdates: () => Promise<void>;
+    downloadUpdate: () => Promise<void>;
+    quitAndInstall: () => Promise<void>;
+    getAppVersion: () => Promise<string>;
+    onUpdateChecking: (callback: () => void) => void;
+    onUpdateAvailable: (callback: (info: any) => void) => void;
+    onUpdateNotAvailable: (callback: () => void) => void;
+    onUpdateDownloadProgress: (callback: (progress: any) => void) => void;
+    onUpdateDownloaded: (callback: (info: any) => void) => void;
+    onUpdateError: (callback: (error: string) => void) => void;
+  }
+}
+/**
+ * Global window interface extension for ToolBox tools
+ */
+declare global {
+  interface Window {
+    toolboxAPI: ToolBox.ToolBoxAPI;
+    TOOLBOX_CONTEXT?: ToolBox.ToolContext;
+  }
+}
+export = ToolBox;
+export as namespace ToolBox;