Admin UI
Action Callbacks

Action Callbacks

Per default the views offer the following actions:

ViewActions
indexShow All (if list of parent item), New
showShow All (back to root or parent list), Edit, Delete
editSave, Cancel
createSave, Cancel

You can add additional actions to your views by providing actionCallbacks. You would probably want to go to another (default or custom) route or make an GraphQL call. The ActionCallbackContext provides you with the necessary services and you can control the behavior in the view after the execution of the callback with the returned ActionCallbackResultType.

export type ActionCallbackType = {
  enabled?:boolean|((item:any|any[], context:ActionCallbackContext) => Promise<boolean>|boolean)
  label:string
  callback: ActionCallbackFnType
}
 
export type ActionCallbackFnType = (item:any|any[], context:ActionCallbackContext) => ActionCallbackResultType | Promise<ActionCallbackResultType>
 
export type ActionCallbackContext = {   
  dataService:AdminDataService
  configService:AdminConfigService
  router:Router
}
 
export type ActionCallbackResultType = 
  undefined | 
  boolean | 
  string |
  { toast:string, action?:string } |
  { message: string, title:string } |
  { route:string }

The following example would add a button "Send per Mail" to the show view, performs a GraphQL mutation call (to a custom mutation on your ActiveQL server) and shows the user a message afterwards with the return value of the mutation.

config:AdminConfig = {
  entities: {
    Car: {
      show: {
        actionCallbacks: [
          {          
            label: 'Send per mail',
            callback: async (item:any, {dataService}) => {
              const result = dataService.mutation(`mutation{ sendCarMail(id: "${item.id}") }`);
              return { message: result, title: 'Car E-Mail' };
            }
          }
        ]
      }
    }
  }
}