angular-portal-actions

Wire Angular Portal list and detail page actions with permission gating.

2|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill angular-portal-actions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-portal-actions
Source: https://github.com/sdcorejs/sdcorejs-agent/tree/main/plugin/skills/angular-portal-actions
Command: npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill angular-portal-actions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents inconsistent or unsafe UI wiring for action buttons and side-effects on Angular Portal list and detail screens by standardizing placement, confirmation, permission gates, validation, and post-action reload behavior.

Core Features & Use Cases

  • Action placement by scope: routes actions to detail headerRight, list toolbar, selector.actions (bulk), or row action column based on single-record vs selection context.
  • Workflow transitions with safety: supports approve/reject/submit/withdraw-style transitions using confirmations (including confirm-with-input when a reason/note is required).
  • Permission + state gating: shows/hides buttons based on CREATE/UPDATE/DETAIL state, business flags (e.g., approvable/editable/exportable), and *sdPermission directives.
  • Save-and-submit pattern: validates the form first, then calls create/update followed by workflow transition using the returned id.
  • Bulk operations: confirms with selected row count, executes bulk service calls in one round-trip, and reloads the table to avoid stale status.

Quick Start

Use angular-portal-actions when adding an action button like approve/reject/export or a bulk approve on a list or detail screen, and ensure the button appears in the correct place for the current state and is gated by the proper sdPermission.

Frequently Asked Questions about angular-portal-actions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add bulk actions to selected rows in an Angular list view?

To wire bulk actions in an Angular list view, place buttons in the selector.actions area, confirm with the selected row count, execute bulk service calls in one round-trip, and reload the table to avoid stale status.

What is the best way to gate Angular action buttons with permissions and state?

To gate Angular action buttons, show or hide them based on CREATE/UPDATE/DETAIL states, business flags like approvable or editable, and *sdPermission directives to enforce correct visibility.

How do I implement a save-and-submit workflow transition in Angular?

A save-and-submit workflow transition requires validating the form first, then calling create or update, followed by the workflow transition using the returned id to ensure data integrity.

Where should action buttons be placed on Angular detail and list pages?

Action buttons on Angular pages are placed in the detail headerRight, list toolbar, selector.actions for bulk operations, or the row action column based on single-record versus selection context.

Why does my Angular list screen show stale data after a workflow transition?

Stale data after a workflow transition occurs when post-action reload behavior is missing, requiring standard notification plus list or detail reload to refresh the UI state.

Can I require user input during confirm dialogs for Angular workflow rejections?

Yes, confirm dialogs for Angular workflow transitions support confirm-with-input when a reason or note is required, ensuring users provide necessary context for actions like approve or reject.