An app which limits the reassignment process so that a ticket that is assigned to an agent cannot be reassigned to a group, only another agent. The article gives the prompt and the generated blueprint.
Problem Statement
Some businesses do not wish to allow a Zendesk ticket to be reassigned to a group after it has already been assigned to an agent. They wish to be able to reassign tickets, but only to actual agents. This app is designed to restrict agents from assigning a ticket to a group.
Potential Enhancements
The admin creating this app could add more restrictions or conditions on the restrictions, such as restrictions only for a particular agent group or allowing group reassignment for some agent groups but not others, a status requirement (e.g. 'only allow group reassignment if ticket status is New'), or any other customer-specific workflow.
Screenshots
These are typical screenshots from executing this prompt in App Builder. As with any AI generated code, the actual text or positioning of elements may vary.
Prompt
Create an app to prevent an agent from assigning a ticket to a group. Using the assignee changed zaf ticket event, detect any change to the assignee. If the assignee is null and a group is selected, display an error stating that the assignee must be an agent. Revert their change. Do not allow the ticket to be saved if the assignee is null but the group is populated. Make sure that any notification uses the ZAF notify() function and not toast or any other method. Those don't work.
Blueprint
Apps Created by App Builder also create a blueprint.md file that provides a clear description of what the AI understood and build for the project. Below is the typical blueprint for the app, to understand what was going on.
App Description
The Assignee Validation Protection App is a Zendesk ticket sidebar app that prevents agents from assigning tickets to groups without selecting a specific agent. It enforces business rules to ensure proper ticket assignment workflows by monitoring assignee changes in real-time and blocking invalid assignments.
Architecture
The app uses a reactive architecture built on ZAF event listeners to monitor ticket assignee changes. It implements both real-time validation with automatic reversion and save-time validation to prevent invalid ticket states from being persisted.
Key Components:
- AssigneeValidator: Main component that handles validation logic and user feedback
- Event-driven validation: Uses ZAF ticket events for real-time monitoring
- Save hook integration: Prevents ticket saves when validation fails
- Automatic reversion: Restores previous valid assignee state when invalid changes are detected
List of Features
- Real-time Assignee Monitoring: Listens for changes to both user and group assignee fields
- Automatic Validation: Detects when a group is selected without a specific agent
- Instant Error Notifications: Uses ZAF notify() function to display clear error messages
- Automatic Reversion: Reverts invalid assignee changes to the previous valid state
- Save Prevention: Blocks ticket saves when assignee validation fails
- Visual Status Indicator: Shows validation status with success/error alerts
- Responsive Design: Optimized for ticket sidebar layout with proper spacing
Documentation Used
- ticketEvents: For listening to assignee change events and save hooks
- ticket: For getting and setting ticket assignee properties
- allLocations: For ZAF notify() function and core app functionality
- coreAppsAPI: For app lifecycle management and resize functionality
Tech Stack
- React 18: Component-based UI framework
- Zendesk Garden Components: Design system for consistent UI
- Styled Components: CSS-in-JS styling solution
- ZAF (Zendesk App Framework): Core platform integration
- ZAF Events API: Real-time ticket change monitoring
- ZAF Ticket API: Ticket data access and manipulation
File Structure
- index.jsx: Main app entry point with theme provider setup
- components/AssigneeValidator.jsx: Core validation component with event handling
- styles/AssigneeValidatorStyles.js: Styled components for responsive layout
- mock.js: Mock ZAF client for development and testing
- blueprint.md: App documentation and architecture overview
- changelog.md: Version history and change tracking
Integration Details
The app integrates deeply with Zendesk's ticket management system through:
ZAF Event Listeners:
-
ticket.assignee.user.id.changed: Monitors agent assignment changes -
ticket.assignee.group.id.changed: Monitors group assignment changes -
ticket.save: Intercepts save operations for validation
ZAF API Usage:
-
zafClient.get('ticket.assignee'): Retrieves current assignee state -
zafClient.set('ticket.assignee', value): Reverts invalid assignments -
zafClient.invoke('notify', message, type, duration): Shows error notifications -
zafClient.invoke('resize', dimensions): Optimizes sidebar layout
Validation Logic:
- Monitor assignee changes in real-time
- Check if group is selected without a specific agent
- Display error notification using ZAF notify()
- Automatically revert to previous valid assignee state
- Prevent ticket saves when validation fails
- Provide clear visual feedback to agents
The app ensures data integrity by preventing invalid ticket assignments while maintaining a smooth user experience through immediate feedback and automatic correction.