Merge pull request #1 from DavidDurman/update-readme-remove-filter

Update README; Remove domain filter
clientIO · Feb 28, 2024 · 288e337 · 288e337
2 parents 6f070b3 + e1e65fa
commit 288e337
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 83 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "am-demo-embedded-integrations"
+    "default": "am-demo-embedded-designer"
   }
 }
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-# Appmixer Embedded Integrations Demo
+# Appmixer Embedded Designer Demo
 
 Try live at:
 
 ```
-https://demo-integrations.appmixer.com?apiUrl=https://api.YOUR_TENANT.appmixer.com&studioUrl=https://my.YOUR_TENANT.appmixer.com
+https://demo-designer.appmixer.com?apiUrl=https://api.YOUR_TENANT.appmixer.com&studioUrl=https://my.YOUR_TENANT.appmixer.com
 ```
 
 The following query parameters are supported:
@@ -14,7 +14,7 @@ The following query parameters are supported:
 | `studioUrl`  | ✅ | The Appmixer Tenant Studio URL that you were assigned at sign-up.  | `https://my.YOUR_TENANT.appmixer.com` |
 | `username`  |  | An Appmixer Virtual User Username. If not defined, a virtual user with a the following username will be created `[email protected]` (for demo purposes).  | `[email protected]` |
 | `token`  |  | An Appmixer Virtual User Token.  | `d17e3798-d754-4397-aff2-f06e71c5ae57` |
-| `domainFilter`  |  | If specified, only integrations pubslihed to this specific domain will be displayed. Otherwise, integrations published to all users will be displayed.  | `myapp.com` |
 
 
-![Screenshot](assets/screenshot.png?raw=true "Screenshot")
+![Screenshot](assets/screenshot-flow-manager.png?raw=true "Screenshot")
+![Screenshot](assets/screenshot-designer.png?raw=true "Screenshot")
diff --git a/assets/screenshot-designer.png b/assets/screenshot-designer.png
diff --git a/assets/screenshot-flow-manager.png b/assets/screenshot-flow-manager.png
diff --git a/assets/screenshot.png b/assets/screenshot.png
diff --git a/index.html b/index.html
@@ -3,52 +3,31 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Appmixer Embed Integrations Demo</title>
+    <title>Appmixer Embed Designer Demo</title>
     <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 <body>
     <div class="container">
         <div class="guide">
             <img id="yoursaas" src="./assets/yoursaas.svg" />
 
-            <h1>Appmixer Embedded Integrations Demo</h1>
-            <p>This demo shows you how to embed Appmixer Integrations in your own web application.</p>
+            <h1>Appmixer Embedded Designer Demo</h1>
+            <p>This demo shows you how to embed the Appmixer Designer in your own web application.</p>
 
-            <h2>1. Try the Appmixer Integrations UI</h2>
-            <p>The Appmixer Integrations UI allows end-users of your application to browse and activate integrations that you pre-built for them in the Appmixer Studio.</p>
-            <p><b>Try it yourself and activate an integration by clicking on the integration tile and configuring the integration.</b></p>
-            </p>
-            <p class="small">Note that this integration will run in the context of an Appmixer virtual user that was created for you in the background when you opened this page.</p>
-            <p class="small">The Integration marketplace is rendered in the page natively, using the Appmixer JavaScript SDK. It is not included in an iframe.</p>
+            <h2>Try it yourself</h2>
+            <p>Try to create and start a new automation just as your end-user would.</p>
 
-            <h2>2. Trigger the integration by sending an App Event</h2>
-            <p>Once you have activated an integration, you can trigger it by sending an App Event to Appmixer (assuming your integration starts with the <code>OnAppEvent</code> trigger). This is normally done using the Appmixer JavaScript SDK or an HTTP request:</p>
-<pre>
-    <code>
-        appmixer.api.sendAppEvent('contact-created', { first: 'David', last: 'Doe' });
-    </code>
-    or:
-    <code>
-        curl -XPOST \
-           -H 'Content-Type: application/json' \
-           -H "Authorization: Bearer VIRTUAL_USER_ACCESS_TOKEN" \
-           -d '{ "first": "David", "last": "Doe" }' \
-           "https://APPMIXER_TENANT_API_URL/plugins/appmixer/utils/appevents/events/contact-created"
-    </code>
-</pre>
-    <p><b>In this demo, you can send an App Event using the helper form below. This is to simulate a real-world scenario where you would send an App Event from your own application code.</b></p>
+            <p>Both the Flow Manager and the Designer can be customized to match your branding and you can also build your own custom connectors and utilities to let
+            your end-users fully automate your and other connected apps.</p>
 
-    <form class="app-event-form">
-        <label>App Event name</label><input class="app-event-event" type="text" value="contact-created" placeholder="contact-created" />
-        <label>App Event data (JSON)</label><textarea class="app-event-data" placeholder="JSON data">{ "first": "David", "last": "Doe" }</textarea>
-        <input type="submit" value="Send App Event" />
-    </form>
+            <p class="small">Note that this automation will run in the context of an Appmixer virtual user that was created for you in the background when you opened this page.</p>
+            <p class="small">The Designer and Flow Manager is rendered in the page natively, using the Appmixer JavaScript SDK. It is not included in an iframe.</p>
 
-            <a id="github-link" href="https://github.com/clientIO/appmixer-demo-embedded-integrations" target="_blank"><img src="./assets/github-mark.svg" /></a>
+            <a id="github-link" href="https://github.com/clientIO/appmixer-demo-embedded-designer" target="_blank"><img src="./assets/github-mark.svg" /></a>
         </div>
         <div class="app">
-            <div id="appmixer-integrations-marketplace"></div>
-            <div id="appmixer-integrations-logs"></div>
+            <div id="automations-placeholder"></div>
+            <div id="designer-placeholder"></div>
         </div>
     </div>
 
@@ -74,5 +53,3 @@ <h2>2. Trigger the integration by sending an App Event</h2>
 </body>
 </html>
 
-
-
diff --git a/main.js b/main.js
@@ -8,7 +8,6 @@ if (!APPMIXER_API_URL) {
 
 let APPMIXER_VIRTUAL_USER_USERNAME = QUERY_PARAMS.get('username');
 let APPMIXER_VIRTUAL_USER_TOKEN;
-let DOMAIN_FILTER = QUERY_PARAMS.get('domainFilter');
 
 if (APPMIXER_VIRTUAL_USER_USERNAME) {
     // If username is provided in the query string of this demo, password must be provided as well.
@@ -18,9 +17,9 @@ if (APPMIXER_VIRTUAL_USER_USERNAME) {
     // Note that Appmixer username can be any, even non-existing, email address. We're using a user ID
     // together with a fictional domain name. Appmixer does not send anything to these email addresses.
     // They are just used as a virtual user credentials pair. Moreover, the email domain
-    // allows us to easily share integration templates with a specific group of users
+    // allows us to easily share automations with a specific group of users
     // (An alternative to this is to use the user scopes.)
-    APPMIXER_VIRTUAL_USER_USERNAME = 'embed-demo-1234@appmixer-embed-integrations.com';
+    APPMIXER_VIRTUAL_USER_USERNAME = 'embed-demo-1234@appmixer-embed-designer.com';
     APPMIXER_VIRTUAL_USER_TOKEN = '4efaa8ec-ddc5-4852-b6cc-cb3039fe17b1';
 }
 
@@ -30,15 +29,12 @@ if (typeof Appmixer === 'undefined') {
 
 // Appmixer SDK instance.
 const appmixer = new Appmixer({
-    baseUrl: APPMIXER_API_URL,
-    theme: {
-        variables: { colors: { surface: '#f5f5f5' } }
-    }
+    baseUrl: APPMIXER_API_URL
 });
 
 const widgets = {
-    integrations: null,
-    wizard: null
+    automations: null,
+    designer: null
 };
 
 // Learn more about Appmixer virtual users at https://docs.appmixer.com/appmixer/tutorials/appmixer-virtual-users.
@@ -63,43 +59,56 @@ async function ensureAppmixerVirtualUser(username, token) {
 }
 
 function createWidgets() {
-    // Create Integrations Page widget.
-    widgets.integrations = appmixer.ui.Integrations({
-        el: '#appmixer-integrations-marketplace',
+    widgets.automations = appmixer.ui.FlowManager({
+        el: '#automations-placeholder',
+        options: {
+            customFilter: {
+                'customFields.tag': 'appmixer-demo-embedded-designer'
+            },
+            menu: [
+                { event: 'flow:remove', label: 'Remove' }
+            ]
+        }
+    });
+    widgets.designer = appmixer.ui.Designer({
+        el: '#designer-placeholder',
         options: {
-            showHeader: true,
-            customFilter: [{
-                // Show only integration templates shared with users in this demo app.
-                ...(DOMAIN_FILTER && { 'sharedWith.0.domain': DOMAIN_FILTER }),
-                type: 'integration-template'
-            }, {
-                userId: appmixer.get('user').id,
-                type: 'integration-instance'
-            }]
+            showButtonHome: true,
+            menu: [
+                { event: 'flow:rename', label: 'Rename' }
+            ],
+            toolbar: [
+                ['undo', 'redo'],
+                ['zoom-to-fit', 'zoom-in', 'zoom-out'],
+                ['logs']
+            ]
         }
     });
-    widgets.integrations.on('integration:create', templateId => {
-        widgets.wizard.close();
-        widgets.wizard.set('flowId', templateId);
-        widgets.wizard.open();
+
+    widgets.automations.on('flow:create', async () => {
+        const flowId = await appmixer.api.createFlow('New Flow', {}, { customFields: { tag: 'appmixer-demo-embedded-designer' } });
+        widgets.designer.close();
+        widgets.designer.set('flowId', flowId);
+        widgets.automations.close();
+        widgets.designer.open();
     });
-    widgets.integrations.on('integration:edit', integrationId => {
-        widgets.wizard.close();
-        widgets.wizard.set('flowId', integrationId);
-        widgets.wizard.open();
+
+    widgets.automations.on('flow:open', flowId => {
+        widgets.designer.close();
+        widgets.designer.set('flowId', flowId);
+        widgets.designer.open();
+        widgets.automations.close();
     });
-    widgets.wizard = appmixer.ui.Wizard();
-    widgets.wizard.on('flow:start-after', () => widgets.integrations.reload());
-    widgets.wizard.on('flow:remove-after', () => {
-        widgets.integrations.reload();
-        widgets.wizard.close();
+    widgets.designer.on('navigate:flows', () => {
+        widgets.designer.close();
+        widgets.automations.open();
     });
 }
 
 async function main() {
     await ensureAppmixerVirtualUser(APPMIXER_VIRTUAL_USER_USERNAME, APPMIXER_VIRTUAL_USER_TOKEN);
     createWidgets();
-    widgets.integrations.open();
+    widgets.automations.open();
 
     document.querySelector('.app-event-form').addEventListener('submit', (evt) => {
         evt.preventDefault();

diff --git a/style.css b/style.css
@@ -6,7 +6,7 @@ body {
     margin: 20px;
 }
 .guide {
-    flex: 2;
+    flex: 1;
     padding: 50px;
     position: relative;
 }
@@ -74,10 +74,4 @@ input, select, textarea {
 .app-event-form input[type="submit"]:hover {
     background-color: #0056b3;
 }
-#appmixer-integrations-marketplace {
-    position: absolute;
-    inset: 0;
-}
-.am-integrations {
-    padding: 50px;
-}
+