Sidebar Field Extension

[nroth]

@roger

A rank of 0 seems bugged right now.

Thanks, ok that makes more sense. I was really struggling to understand what was going on with the rank.

@roger

As for using dynamic data fetched async from the outside, unfortunately you can’t really do that inside the connect() function in main.tsx right now (I wish you could too, and am asking for it internally)

Yeah, i was mainly just pointing out how the documentation seems to at least suggest all these methods are available from that ctx type, when they aren’t.

@roger

But for now, you have to move that part of the logic inside the actual rendered component (which is just standard React or JS).

To follow up on how I ended up implementing this configurable sidebar component. The idea was for this kind of data it would be better to render it dynamically than trying to keep the data in sync, given the data we want to display might change over time. So, for a generic hubspot object preview plugin, I wanted to make it as configurable as possible.

Config

On my plugin config page I added a configuration option that queries dato for the available record types, allowing you to select one. This is used to then decide whether or not the sidebar should show up at all for a given record type. Then in the config you can choose a field name that will contain the object id, then we fetch the hubspot object types to choose from, then which fields you want to display from that object type, each contained within a named section. This allows us to render a dynamic preview in the sidebar of any hubspot object type that we might want to reference while authoring content, using a static config that can’t be tied to a particular field as a field extension (like the notes plugin is implemented).

Rendering

Then, once we are in the rendered sidebar component we look for the pre-configured field to contain a value and when it does, we fetch that record from hubspot with the properties we have configured to fetch and render it.

Our sidebar showing the ticket preview and the draft content preview (we use the sidebar panels since we have to leverage multiple panels at the same time and switching is too cumbersome).

Wishlist

Just captured some of the things I came across

• More dato-styled react components or at least maybe a theme that can be applied to some framework (shadcn, mantine, etc) to provide more components with consistent styling. It seems unreasonable to create all components every needed, so having a theme that applies to a commonly used framework would be a big help.
• Ability to programmatically open a full sidebar. For a moment I considered supporting opening the full hubspot record in a sidebar if you want to go see the full thing, but didn’t notice a method to do this.
• Ability to control whether the sidebar panel is expanded or collapsed (rather than just the initial state) or even visible. Ideally I only want it visible and/or expanded when i’m trying to render something. It seems like after I’ve expanded it one time, it stays expanded until i manually collapse it.
• The data model to configure this plugin ended up being rather complex to support reordering the sections, adding/deleting them, etc. However, if I could have created a dato model and leveraged the built-in UI for configuring the plugin, leveraging the field types, blocks, etc, it would be way less work to defer to that instead. However, the plugin configuration must be static and can’t be fetched dynamically, so doing this would be kind of awkward to manage. So, I had to implement a custom form handler to define my plugin config schema.