How to use api.addHeaderPanel?

Development
1

I’ve been trying to add an interactive nav icon to our top menu bar.

So far I have:

  1. created a widget
  2. found the addHeaderPanel and called api.addHeaderPanel('custom-menu-button', 'customMenu')

However, this is where I get stuck… it looks like (according to the code) the panel will only show if the header widget state has {customMenu: true} in it… and for the life of me I cannot figure out how to set/override the state…

This panel will ultimately need to toggle it’s own state property (open/closed) to change the icon state, and also to send an action out to render a component with the menu. (unfortunately, it’s full-screen so I can’t nest it in the header Panel)

I had this working with a component pretty quickly, but the new virtual DOM is taking some adjustment mentally. :slight_smile:

2

This is a good question. I see that api was added by @gdpelican – how are you supposed to wire up the state in this case?

3

I managed to work around this now by just introducing a service and by-passing the state management entirely, but I think it would still be good to get some clarifications around how this should properly work. :slight_smile:

The service implementation I have is a bit limited since it can’t really loop back in and update the widget state effectively.

4

I was doing it through an attachWidgetAction call to the header.

api.attachWidgetAction('header', 'toggleMyPanel', function() {
  this.state.myPanelVisible = !this.state.myPanelVisible
})

You can then trigger that action by bubbling up an action from within the header. In my case I added a header icon that I could click to toggle:

api.decorateWidget('header-icons:before', function(h) {
  h.attach('header-dropdown', { action: 'toggleMyPanel' })
})

EDIT:

Sorry, I just read this bit. I think the whole point of widget state is that it’s self-contained and doesn’t leak out into other parts of the app, so not sure I have a solid recommendation here. Have you looked into using Ember.evented, to emit events that the header can listen to, perhaps?

// reopening the header widget...
this.appEvents = this.container.lookup('app-events:main')
this.appEvents.on('toggleCustomHeader', () => { this.state.customMenu = !this.state.customMenu })
// MEANWHILE, elsewhere:
this.appEvents = this.container.lookup('app-events:main')
this.appEvents.trigger('toggleCustomHeader')

The keyboard shortcuts code looks like a decent example of this.

I’d be curious to hear what your solution ends up being, maybe it’s something that the addHeaderPanel function should support naturally.