Blocks

A block is a React component that Devias can place on a screen. A module uses blocks to add its own card to Home or its own section to a record page without changing the studio.

function Greeting() {
  return (
    <InsightCard icon="sparkles" title="Welcome">
      <InsightText>Hello from my module.</InsightText>
    </InsightCard>
  );
}

export const greetingBlock = defineBlockComponent({
  id: ids.blocks.greeting,
  label: 'Welcome',
  icon: 'sparkles',
  surfaces: { home: { order: 10 } },
  component: Greeting,
})

Surfaces of a block

A block lists the surfaces it can appear on.

Surface	Where it shows
`home`	The Home page, as a card. `InsightCard` gives it the house style.
`record`	A record page, placed by a layout or added automatically.
`dialog`	Inside a dialog.
`panel`	Docked beside the content, like the assistant.
`approval`	In the assistant, in place of the default approval card for a module’s tool.

Declare the block in the manifest

Every block has an id. The module’s manifest declares it with defineBlock and lists its surfaces. The manifest side lets layouts refer to the block and lets agents see what exists before any React loads. A block can set requires to certain objects, so that it shows only in workspaces that have them, such as once the module that owns them is installed.

Views and navigation in a module: put a block on a record page.
Pages and commands: give a block a whole page.

Start

Concepts

Guides

Operate

Surfaces of a block

Declare the block in the manifest

​Surfaces of a block

​Declare the block in the manifest

​Related

Surfaces of a block

Declare the block in the manifest

Related