Solved

Reference other existing libraries in an extension?

  • 10 June 2024
  • 2 replies
  • 44 views

Badge

I love the Salesforce Well-Architected shape library and the Salesforce integration to connect and create ERDs but I don’t see an easy way to generate a document using the shape library from the ERD connector output.

If I made a custom extension could that extension rely upon the Salesforce shape library or not? Or in general any other 3rd party shape library?

icon

Best answer by ablackburn 10 June 2024, 22:42

View original

Comments

Userlevel 1
Badge +1

Hi Pbattisson, thanks for reaching out!

 

I don’t see an easy way to generate a document using the shape library from the ERD connector output

Unfortunately we don't support this right now, I’ll pass your feedback on to the team responsible for the integration!

 

If I made a custom extension could that extension rely upon the Salesforce shape library or not? Or in general any other 3rd party shape library?

 

Yes! This would definitely be possible. Here’s an example of an extension which draws a salesforce card:

import {
EditorClient,
Menu,
MenuLocation,
MenuType,
Viewport,
} from "lucid-extension-sdk";

const client = new EditorClient();
const menu = new Menu(client);
const viewport = new Viewport(client);

client.registerAction("drawSalesforceShape", async () => {
await client.loadBlockClasses(["SFACard"]);
const page = viewport.getCurrentPage();
if (!page) return;

const size = {
h: 80,
w: 320,
};

const position = viewport.findAvailableSpace(size.w, size.h);
page.addBlock({
className: "SFACard",
boundingBox: {
...position,
h: 80,
w: 320,
},
});
});

menu.addMenuItem({
label: "Draw Salesforce card",
action: "drawSalesforceShape",
menuType: MenuType.Main,
location: MenuLocation.Extension,
});


// Convenience function for figuring out what block classes you need to use.
// Select a single shape, right click, then use the new menu item to log the shape's class to the browser console.
client.registerAction("logBlockClass", () => {
const selection = viewport.getSelectedItems().pop();
if (!selection) return;

const page = viewport.getCurrentPage();
if (!page) return;

const blockWithSameId = page.blocks.get(selection.id);
console.log(blockWithSameId.getClassName());
});

client.registerAction("singleShapeSelected", () => {
const items = viewport.getSelectedItems();
return items.length === 1;
});

menu.addMenuItem({
label: "Log block class",
action: "logBlockClass",
menuType: MenuType.Context,
visibleAction: "singleShapeSelected",
});

 

Hopefully that helps! Let me know if you have any other questions.

 

Alex

Userlevel 1
Badge +1

I've also added that example into our open source repo here.

Reply