Accessing a local extension in Lucidchart UI

Hello Dagon, thank you for your question.

I am pulling the open-source Asana extension code myself and running it to ensure that my answer is correct. I’ll be in touch soon.

I have a few findings that might be affecting you. To your original question, when running correctly you should be able to find “Asana” at the bottom of “More Tools”.  In the below picture, I expect it will show where you see “Smartsheet” above “Search Marketplace”. Once you have selected it, it will appear in the list to the left. Notice I have two Asana. One is the Marketplace installed version and the other is me running it locally.

However, I fear you are affected by a bug I found while loading the extension. You should have two processes running; the extension and the dataconnector, You posted the dataconnecor process (with corrected path as the documentation is wrong), and one for the extension itself.  When I attempted to run the extension, I got the following error: 

mbowers@mbowers:~/github/sample-lucid-extensions/asana$ npx lucid-package test-editor-extension asana

Listening at http://localhost:9900/extension.js
Listening at http://localhost:9901/shapeLibraries

Error running Lucid Suite Extension CLI Error: manifest.json: Data connector "callbackEvents" must be a record from strings to strings

After some research I found the cause of the error and am working on a solution. In the meantime, you can fix this issue by adding “callbackEvents” to your manifest.json  data-connector:

    "dataConnectors": [
        {
            "name": "asana",
            "oauthProviderName": "asana",
            "callbackBaseUrl": "http://localhost:3001/?kind=action",
            "dataActions": {
                "Import": "",
                "Patch": "",
                "HardRefresh": ""
            },
            "callbackEvents": {}
        }
    ]

With that change, the error should go away, both processes will run, and you’ll see the Asana icon become available.  I look forward to hearing if this resolves the issue and am working on both a fix to the error and updating the inaccuracies in the Asana extension README

..You may encounter more issues like below. I am researching them now:

ERROR in /home/mbowers/github/sample-lucid-extensions/asana/editorextensions/asana/src/asanacardintegration.ts
28:13-33
[tsl] ERROR in /home/mbowers/github/sample-lucid-extensions/asana/editorextensions/asana/src/asanacardintegration.ts(28,14)
      TS2415: Class 'AsanaCardIntegration' incorrectly extends base class 'LucidCardIntegration'.
  Property 'userSearchCallback' is private in type 'AsanaCardIntegration' but not in type 'LucidCardIntegration'.

Turns out I had a local version of node running that was conflicting with the extension node. You should not see errors like the ones I did.

Thanks for the prompt reply and the help!
The screenshot you show looks like Lucidspark, I am looking to find the extension in Lucidchart UI.

Here’s what I see in the Lucidchart UI - where do I find the integration?

Also, is Team subscription enough to be able to see it? I’d have thought so, since the Developer extension is available in the Lucidchart UI and the Developer functionality is promised in the feature matrix when choosing my tier, but I see eg the Marketplace Asana→Lucidspark extension says it needs Enterprise.

Glad to hear that I over-complicated a simple question. I have confirmed that I also do not see Asana in the Lucidchart UI and am working with our internal teams to understand why.

The Asana Cards Integration is Enterprise only if installed from the marketplace. Running the open source extension should only requires access to the Developer Portal, which Teams have.

Thanks a lot! 

Are there any working examples of a data integration code with Lucidchart?

I am looking to build an integration between Linear and Lucidchart, representing issue hierarchies as mind maps with two-way sync, and could really use some example code to get started:)

I think the only available example we have with two way sync is https://github.com/lucidsoftware/sample-lucid-extensions/tree/main/todoist

I am a bit nervous, as that is one of our older examples and I haven’t worked with it personally. But, it does contain two-way sync logic and hopefully provide some guidance on getting the basics setup.

Thanks! That one is also lucidspark however. Are there any examples that show something, anything, in the Lucidchart UI?

Ah yes, I still am in the old habit of thinking of “Lucidchart” as the company instead of a distinct product. This example integration https://github.com/lucidsoftware/sample-lucid-extensions/tree/main/data-connector-example works in both Lucidspark and Lucidchart. You can see in the README an example of going to the extension menu to start the import flow.

Thanks! Followed the instructions at that link precisely; when I run both parts, and open Lucidchart UI, the Extensions > Data Connector Example > Import menu is there, but when I click on it, nothing happens, in particular no OAuth confirmation dialog. How do I debug this?
Thanks again for all your help!

Hmm,  do you see anything in the browser console? My guess would be that there is an oauth2 configuration setup error and the request is failing.

A few ideas off the top of my head that I often miss:

1. Does your oauth2 client have the correct redirect enabled? It should be: https://extensibility.lucid.app/packages/YOUR_APPLICATION_ID_FROM_THE_URL/oauthProviders/lucid/authorized
2. Do you have a credentials file with the clientId and secret next to your manifest.json?

Hmm, after a reboot and restart of everything, it works like a charm! And I’m not even on Windows :)
Thanks a lot for all your help, now will go ahead and try to build the integration I want.

Fanastic! Good luck on your build; hopefully it goes smoothly from here.