Support for Interactive .nb-block-item Links Inside Markdown/HTML Blocks

English Forum Feature Request
1

Summary

As a NocoBase user, I am requesting support for clickable links/buttons inside Markdown/HTML blocks (including those inside Detail views) that can trigger the record “panel”/drawer popup, just like they do when rendered in native relationship/table/detail blocks.

What’s the Problem?

  • Currently, clickable elements for records only work if they are part of “native” table, relationship, or detail blocks.
  • If I use a Markdown/HTML (custom render) block—even inside a Details page—and try to create a clickable element with the correct attributes (class=“nb-block-item” and correct data-attributes), clicking does nothing.
  • This limits the ability to create visually-rich or formatted dashboards/lists with interactive links in Markdown/HTML blocks.

For example - rendering a “Notes” table is trivial with handlebars and markdown/HTML - but the user can’t “do” anything with it (nothing can be clickable without routing to a whole new page - ending in a very poor user experience).

Screenshot 2025-04-15 at 15.19.31
Screenshot 2025-04-15 at 15.19.311846×704 31 KB

Expected Behaviour (as a User)

  • If I create a block of HTML or markdown like:
    <div
  class="nb-block-item"
  data-resource-name="notes"
  data-record-id="b17283ff-f153-436f-8958-084bb8477549"
  data-popup-id="12tihcgezh9"
  style="cursor:pointer; color:#1677FF;"
>
  Testing Site Note
</div>
  • I expect that clicking this element would open the record’s details panel, the same as clicking the subject in a native table/collection/detail block.

Actual Behaviour (current state)

  • Clicking such elements in a Markdown/HTML block does nothing, even when all classes and data-attributes are set exactly like the working elements in native NocoBase blocks.
  • The event handler for opening panels is not triggered for custom HTML/markdown content.

Why is this important?

  • NocoBase layout and formatting is very limited, allowing only tables, charts, etc - the Markdown/HTML block is a powerful tool to allow those of us who need to control the formatting of data access within the “80%” rule of NocoBase - rather than every time we want to create a new layout having to be part of the “20%” and create a whole plugin for something that could be resolved with a very simple markdown/HTML box.
  • Many users want to build formatted dashboards, summaries, or dynamic widgets using Markdown/HTML blocks.
  • Inability to use in-context interactive links/panels limits what can be done in reporting, instructions, workflow overviews, or custom layouts.

Technical Explanation

  • The NocoBase panel open logic (for .nb-block-item, etc) is attached to events only inside the React “block context” (such as Table, Detail, Relationship blocks).
  • Markdown/HTML (custom render) blocks are rendered outside of this React tree—just as static HTML—so internal React event handlers never “see” these clicks.
  • Even if custom elements match the CSS classes and data-attributes, the click event is not delegated or processed by the React logic.
  • This cannot be solved by adding more attributes or using a different element—it is a limitation in how events are handled in the app.

Feature Request: What We Need

Please enable support for interactive block item clicks inside Markdown/HTML blocks.

  • Ideally, NocoBase should globally listen for click events on .nb-block-item with the necessary data attributes, even if these are rendered inside a Markdown/HTML block.
  • When such an element is clicked, NocoBase should open the record details panel (drawer), exactly as it would for a native table/field block.
  • This could be implemented as an event delegation at a higher/root container level, or by providing a plug-in point/hook for “panel open” logic.

Extra’s

  • Allow for record updates via clickable events, in the same manner of the “actions” col in a table.
    • This would help (in my example) with events like “Mark as Viewed”, “Delete”, “Hide” etc.

Technical Suggestions (for dev team)

  • Consider delegating the .nb-block-item click panel open logic to the main container or document, not just React block roots.
  • Alternatively, offer a documented global JS API (e.g. window.NocoBase.openPanel(resourceName, recordId, popupId)) so advanced users can trigger panels when needed.
2

We are currently brainstorming, designing, and developing front-end extension capabilities. Your suggestions have been noted and incorporated for consideration. We anticipate having results in the second quarter.

1 Like