Skip to main content

Block buttons

Block buttons are optional buttons at the top of the detail page that can trigger an action or event

Adding a block button​

You can add a BlockButton by overriding the blockButtons(Model $model) method in your resource.

    public function blockButtons(Model $model): BlockButtonCollection
    {
        return new BlockButtonCollection(
            (new BlockButton(__('notes::notes.Note') . ' +'))
                ->icon('description')
                // ->outlined()
                // ->stacked()
        );
    }

Handling button click​

Block buttons can trigger (multiple) events which components may have registered listeners for.

Running a resource action​

You can open a resource action by clicking on the button:

(new BlockButton('Archive'))
    ->icon('delete')
    ->runsAction($this->action(DeleteResource::class))
    
// or:
(new BlockButton('Add note +'))
    ->icon('description')
    ->runsAction($this->action(SetBannerAlertAction::class))

Triggering events​

The qore-frontend has some pre-defined listeners which you can trigger.

For example, you might want to click on a div or span that contains some text:

(new BlockButton('Add note +'))
    ->icon('description')
    ->emits(FrontendEvent::RESOURCE_DETAIL_CLICK_ON_TEXT, [
        'text' => __('notes::notes.Notes'),
        'tag' => 'div'
    ])

Triggering multiple events​

You can chain multiple events that will be run in sequence (with a small delay in between):

(new BlockButton('Add note +')
    ->icon('description')
    ->emits(FrontendEvent::RESOURCE_DETAIL_CLICK_ON_TEXT, [
        'text' => __('notes::notes.Notes'),
        'tag' => 'div'
    ])
    ->emits('qore.notes.add.note'),

Listening to events​

If you are creating a custom front-end component and you want to listen to events, you can do so:

  created () {
    this.$root.$on('my_event', this.runListener)
  },

  beforeDestroy () {
    this.$root.$off('my_event', this.runListener)
  }
  
  methods: {
    runListener(args) {
      console.log('listener triggered', args)
    }
  }

Your component has to be created/mounted somewhere before the listener will be active.

(new BlockButton('Trigger'))
    ->emits('my_event', ['my' => 'argument'])