Skip to main content

 

 

Description
I'm having trouble getting a data connector to work in my Lucid extension. Specifically, when I trigger a data connector action, I'm encountering issues that prevent the action from executing properly. I've set up the data connector in my `manifest.json` file and written the corresponding code, but it's not working as expected.

Manifest.json Setup

{
  "dataConnectors": "
    {
      "name": "quodsi_data_connector",
      "oauthProviderName": "",
      "callbackBaseUrl": "http://localhost:5000/api",
      "dataActions": {
        "Simulate": "Scenario/simulate"
      }
    }
  ]
}



Data Connector Index.ts
 

import { DataConnector, DataConnectorClient } from 'lucid-extension-sdk';
import { simulateAction } from './actions/simulateaction';

export const makeDataConnector = (client: DataConnectorClient) =>
    new DataConnector(client)
        .defineAsynchronousAction("Simulate", simulateAction);


SimulateAction.ts

import { DataConnectorAsynchronousAction } from 'lucid-extension-sdk';
import axios from 'axios';

export const simulateAction: (action: DataConnectorAsynchronousAction) => Promise<{ success: boolean }> = async (
    action,
) => {
    try {

        const data = action.data as { docId: string };
        const documentId = data.docId;
        const apiUrl = `http://localhost:5000/api/Scenario/simulate/${documentId}`;

        const response = await axios.post(apiUrl, null, {
            headers: {
                Authorization: `Bearer ${action.context.userCredential}` // Pass OAuth token
            }
        });

        if (response.status === 200) {
            console.log("Simulate action successfully triggered.");
            return { success: true };
        } else {
            console.error("Simulate action failed.", response.statusText);
            return { success: false };
        }
    } catch (error) {
        console.error("Error executing simulate action:", error);
        return { success: false };
    }
};


 

Extension Code that Calls `performDataAction’
 

protected messageFromFrame(message: any): void {
    console.log('Message from iframe:', message);
    if (message.messagetype === 'SimulateModel') {
        console.log("Extension: Simulate button pressed");
        const document = new DocumentProxy(this.client);
        const docId = document.id;
        console.log("Extension: docId=", docId);
        this.client.performDataAction({
            dataConnectorName: 'quodsi_data_connector',
            actionName: 'Simulate',
            actionData: { docId },
            asynchronous: true
        });
    }
}


 

Network Tab (Chrome Dev Tools)
When the "Simulate" button is clicked, the following error appears in the Network tab:

```
DocumentContext is improperly formatted
```

Console Tab (Chrome Dev Tools)
The following logs are generated in the Console:

```
Message from iframe: {messagetype: 'SimulateModel', lucidId: '', version: '1', instancedata: '{}'}
Extension: Simulate button pressed
Extension: docId= 76990070-d3f1-4176-9437-bccf6eab1cdb

POST https://data-sync.lucid.app/asynchronousAction 400 (Bad Request)
```
I've tried logging the action data and context, and everything seems to be correctly formatted from my side. However, the action fails with a 400 Bad Request error, and the "DocumentContext is improperly formatted" message appears in the logs. I'm not sure what I'm missing or what might be going wrong.

In case my shared code is not enough, here are some random questions/thoughts:

  • Will Data Connector console.log statements show up in dev tools?
  • I used axios in my data connector code.  I did not use axios in my editor extension.  Is this allowed?  if it is, how is it packaged up?
  • My api is written in C# ASP.NET Core 8.x.  I have successfully tested and debugged the following endpoint and can confirm it is working.
http://localhost:5000/api/Scenario/simulate/76990070-d3f1-4176-9437-bccf6eab1cdb
  • For my API, it is using CORS.  What should i add as the allowed origin?  I added https://lucid.app, is that correct?

Any help or guidance would be greatly appreciated!  

Thanks, Dan

 

Hi @PromitaDan, thanks for reaching out and sharing all the details! Someone from our team will follow up with you soon.


Hi Dan, it looks like your “oauthProviderName” is left blank. A data connector will need a valid oauth provider, which should also be added to the manifest.json file. An example of how to set this up can be found here: https://github.com/lucidsoftware/sample-lucid-extensions/tree/main/data-connector-example


I have followed the data connector example and then run this:
 

npx lucid-package test-editor-extension quodsi_editor_extension quodsi_data_connector

and I am now getting this error:

Executing onWatchRun build scripts
stderr error mkdir -p ../../public/rightpanel &&curl http://localhost:3000 | sed -E "s/(src|href)=\"/\\1=\"http:\/\/localhost:3000/gi" > ../../public/rightpanel/index.html: The syntax of the command is incorrect.

Error running Lucid Suite Extension CLI Error: ENOENT: no such file or directory, chdir 'C:\_source\Greenshoes\lucidchart_package_test' -> 'editorextensions\quodsi_data_connector'

Seeing the ENOENT error reminds me that I had to work with Alex Blackburn to get my editor extension working on a windows machine.  Potentially I need to do a one off fix to get a data connector working on a windows development workstation?  Here is a link to my other forum post.

 

my data connector now has a valid oath provider.  My data connector server compiles and is running.

here is my updated manifest.json file

{
"id": "265a72d3-3b33-4187-9c95-c4bc8xxxxxxx",
"version": "1.0.0",
"extensions": o
{
"name": "quodsi_editor_extension",
"title": "Quodsim",
"products": c
"chart"
],
"codePath": "editorextensions\\quodsi_editor_extension\\bin\\extension.js",
"scopes": p
"READ",
"WRITE",
"DOWNLOAD",
"SHOW_MODAL",
"CUSTOM_UI",
"NETWORK"
]
}
],
"shapeLibraries": i
{
"name": "quodsi_shape_library",
"product": "chart",
"lcszPath": "shapelibraries\\quodsi_shape_library.lcsz"
}
],
"oauthProviders": e
{
"name": "lucid",
"title": "Lucid",
"authorizationUrl": "https://lucid.app/oauth2/authorize",
"tokenUrl": "https://api.lucid.co/oauth2/token",
"scopes": p
"folder"
],
"domainWhitelist": i
"https://api.lucid.co"
],
"clientAuthentication": "clientParameters",
"faviconUrl": "https://cdn-cashy-static-assets.lucidchart.com/marketing/images/LucidSoftwareFavicon.png"
}
],
"dataConnectors": o
{
"name": "quodsi_data_connector",
"oauthProviderName": "lucid",
"callbackBaseUrl": "http://localhost:3001/?kind=action&name=",
"dataActions": {
"Simulate": "simulate"
}
}
]
}

Thoughts?

Thanks, Dan


The command that you are trying to run would be for two extensions named `quodsi_editor_extension` and `quodsi_data_connector`. It looks like you probably just want this command for running the one extension while the data connector is running in a separate terminal:

npx lucid-package test-editor-extension quodsi_editor_extension

 


Reply