UI Extensions

Add HotCRM views, pages, dashboards, and actions.

UI Extensions

HotCRM UI metadata lives under src/views/, src/pages/, src/dashboards/, src/reports/, and src/actions/.

Add an action

// src/actions/opportunity.actions.ts
import type { Action } from '@objectstack/spec/ui';

export const MarkOpportunityReviewedAction: Action = {
  name: 'mark_opportunity_reviewed',
  label: 'Mark Reviewed',
  objectName: 'crm_opportunity',
  icon: 'check-circle',
  type: 'modal',
  target: 'mark_opportunity_reviewed',
  locations: ['record_header'],
  body: {
    language: 'js',
    capabilities: ['api.write'],
    source: `
      await ctx.api.object('crm_opportunity').update(input.id, {
        next_step: 'Reviewed by manager'
      });
      return { id: input.id };
    `,
  },
  refreshAfter: true,
};

Add views and pages

  • Put list and kanban definitions in src/views/.
  • Put record pages and utility pages in src/pages/.
  • Export new metadata from the matching index.ts file.
  • Add user-visible labels to src/translations/{locale}.ts.

Verify

pnpm validate
pnpm typecheck
pnpm test

On this page