Configure Page Header Actions

ACTION S10

Configure Header Actions: The header of the search page contains action buttons that allow users to perform various operations related to the search functionality. These actions can be customized to fit the specific needs of your application.
See more details in Page Header and Search Header.

Template: Header Actions

Directory	`<root-of-ui-app>/src/app/<feature>/pages/<resource>-search`
File	`<resource>-search.component.ts`

ACTION S10 in <resource>-search.component.ts

  // ACTION S10: Update header actions
  headerActions$: Observable<Action[]> = this.viewModel$.pipe(map((vm) => {
      const actions: Action[] = [
        {
          labelKey: '<%= resourceConstantName %>_SEARCH.HEADER_ACTIONS.EXPORT_ALL',
          icon: PrimeIcons.DOWNLOAD,
          titleKey: '<%= resourceConstantName %>_SEARCH.HEADER_ACTIONS.EXPORT_ALL',
          show: 'asOverflow',
          actionCallback: () => this.exportItems(),
        },
        ...

Please refer to the GroupByCountDiagram Component for more adaptations.

Example

Directory	`bookstore/src/app/book/pages/book-search`
File	`book-search.component.ts`

ACTION S10 in book-search.component.ts

  // ACTION S10: Update header actions
  headerActions$: Observable<Action[]> = this.viewModel$.pipe(map((vm) => {
      const actions: Action[] = [
        {
          labelKey: 'BOOK_SEARCH.HEADER_ACTIONS.EXPORT_ALL',
          icon: PrimeIcons.DOWNLOAD,
          titleKey: 'BOOK_SEARCH.HEADER_ACTIONS.EXPORT_ALL',
          show: 'asOverflow',
          actionCallback: () => this.exportItems(),
        },
        ...