Looking to extend adaptive card designer with our own custom elements

[JackMostert]

Hello,

I've been looking into adding custom Card elements into the adaptivecard-designer. I haven't had much luck extending the card-designer, and I wanted to ask how everyone is doing it? I've looked through the source code to understand better the problem at hand (That is, being unable to add custom elements to the "Card Element" sidebar), but haven't had any luck with trying to add a custom element to the "Card Element" sidebar.

The example on the Microsoft website about extensibility for the nodeJS card designer is a great example, However, That hasn't worked for me and I'm hoping to understand better how the community is implementing their custom card elements?

Any help would be really great, or any links to articles about the adaptive-card extensibility as I am yet to discover any apart from Microsoft's own example, or people just reusing that same example.

[shalinijoshi19]

@dclaux thoughts here? I know folks over at Cisco are extending the designer as well and so are folks on the Power Platform team -- I can see if i can get them added here for comment/tips

[Trish92]

How do we do the same for Actions? I tried following a simple action from the designer-peer.ts

This is what I see #5326 (comment)

The action does show up but peerType and sourceType is a class and not function like the other actions
and the designer does not update with the action in the action set. What needs to be done in order to see the changes.

Your cards are awesome, really hoping to use them very soon. If I can just get this to work. Thank you !

@dclaux

[dclaux]

@JackMostert extending the designer is fairly easy, although not well documented (we'll have to fix that):

• Implement you custom element and register it with the renderer (example here, I assume you've already done that)

• Implement a Designer Peer for your element. The designer peer is the bridge between your custom element and the designer. It allows you to declare which properties show up in the property sheet and the action buttons that can decorate the selection rectangle

  • Implementing a Designer Peer is the part that isn't documented
  • You can take an example from the designer's code (all built-in elements are implemented and registered exactly the same way you'd implement and register custom elements). Open the designer-peers.ts file, and look for the TextBlockPeer class, for instance.

• Register your Designer Peer with the designer:

CardDesignerSurface.cardElementPeerRegistry.registerPeer(<your custom element class>, <your designer peer class>, <the toolbox category>, <the icon CSS class>);

• All icons are from the Fluent UI icon library. You can reuse one of the predefined icon classes (see them in adaptivecards-designer.css but you will most likely want to define your own. Just add a new CSS class using the same syntax as the existing ones, and set its "content" property to the desired code from the Fluent library. You can find that code the following way:
  • Go to https://developer.microsoft.com/en-us/fluentui#/styles/web/icons
  • Select the "Fabric Core" tab
  • Browse the list of icons, find the one that works for you
  • Open the F12 dev tools to determine which CSS class it's associated with
  • Open https://github.com/OfficeDev/office-ui-fabric-core/blob/master/src/sass/variables/_Icon.Variables.scss and look up the class name in the Icons section - that'll give you the value of the "content" property for your CSS style

Example:

.your-icon-class-name::before {
    content: "\F505";
}

I hope this helps until we have better documentation (and a more straightforward way to define icons.)

[shalinijoshi19]

@JackMostert extending the designer is fairly easy, although not well documented (we'll have to fix that):

• Implement you custom element and register it with the renderer (example here, I assume you've already done that)

• Implement a Designer Peer for your element. The designer peer is the bridge between your custom element and the designer. It allows you to declare which properties show up in the property sheet and the action buttons that can decorate the selection rectangle

  • Implementing a Designer Peer is the part that isn't documented
  • You can take an example from the designer's code (all built-in elements are implemented and registered exactly the same way you'd implement and register custom elements). Open the designer-peers.ts file, and look for the TextBlockPeer class, for instance.

• Register your Designer Peer with the designer:

CardDesignerSurface.cardElementPeerRegistry.registerPeer(<your custom element class>, <your designer peer class>, <the toolbox category>, <the icon CSS class>);

• All icons are from the Fluent UI icon library. You can reuse one of the predefined icon classes (see them in adaptivecards-designer.css but you will most likely want to define your own. Just add a new CSS class using the same syntax as the existing ones, and set its "content" property to the desired code from the Fluent library. You can find that code the following way:

  • Go to https://developer.microsoft.com/en-us/fluentui#/styles/web/icons
  • Select the "Fabric Core" tab
  • Browse the list of icons, find the one that works for you
  • Open the F12 dev tools to determine which CSS class it's associated with
  • Open https://github.com/OfficeDev/office-ui-fabric-core/blob/master/src/sass/variables/_Icon.Variables.scss and look up the class name in the Icons section - that'll give you the value of the "content" property for your CSS style

Example:

.your-icon-class-name::before {
    content: "\F505";
}

I hope this helps until we have better documentation (and a more straightforward way to define icons.)

@dclaux can you file a quick bug to track the documentation gap? Thanks!