[ Top Bar App ] Could not find handler for: "iconSymbol"

If the app location is background, it won’t have a place to display the icon

Sorry for the confusion, I'm running the app in the background AND in the top bar section.

Besides that what I'm updating is the icon that it's always visible at the top.

I noticed that a few top bar apps are doing this such as the Atlassian Status Page app by Zendesk. That svg icon is getting updated without opening the app. My guess is that those are using the background location too but maybe is there another workaround.

I would try creating a background.html file for the background app and remove the icon to fix the error

Not sure if I fully understand that idea. I need to keep the icon in there since I'm updating it based on some logic for this use case. 

Let me explain it by using the Atlassian Status page case below.

You can see how without opening the app:

• in the image on left side, the icon is not showing any notification
• and in the image on the right side, there is another icon showing that there are incidents

Zendesk support told me that they are making this change by replacing the icon with that code 

client.set('iconSymbol', 'mySymbol')

which works when I open my app as expected but it's not working like their app whitout opening the app.

Hope that clarifies the issue and what I'm looking to achieve.

Hi Diego,

When you run an app in multiple locations, ZAF creates an app instance for each location. I think the error is coming from the instance for your background location, which doesn't support the iconSymbol property.

To get around this, you can use the client.instance method to set the iconSymbol using only the ZAF client for the top bar app instance.

I put together a quick example below. It doesn't include the logic for setting a specific symbol, but I left a comment as a starting point.

const client = ZAFClient.init();

async function getTopBarInstance() {
  const response = await client.get("instances");
  const instances = Object.values(response.instances);
  const topBar = instances.find((e) => e.location === "top_bar");
  return client.instance(topBar.instanceGuid);
}

async function setTopBarIcon() {
  // Get ZAFClient for top bar app instance
  const topBar = await getTopBarInstance();
  // Add your logic for setting a specific symbol
  topBar.set("iconSymbol", "mySymbol");
}

setTopBarIcon();

Disclaimer: Eric Nelson is the pro. If he contradicts anything I say, listen to him. :)

I hope that helps!

Thanks James and Eric for your responses.

@James thanks for sharing this

 I think the error  is coming from the instance for your background location, which doesn't support the iconSymbol property.

I was not aware of that limitation and that's what I was trying to use for the first page load.

The code you shared is similar to the code I had in place already and it works perfect when I click and open the top bar app. But my issue is that I need to change the icon without opening the top app first.

@Eric I want to be able to update the icon in two occasions:

1) When the agent loads the page, I need to run my logic to see which icon should be displayed and update it properly. Using the Incident app as an example, when the page loads, you can make the call and see if there are active incidents. If so, you can change the icon to display the number of incidents. If there are zero incidents, you can just display the normal logo.

2) When the agent opens the application, I'm running the same logic again just in case there are new incidents (already have this working by using pane activated-deactivated as well)

You can see on this example recording how the atlassian app in zendesk first loads the regular icon and then it's replaced with the one that contains the orange buble https://share.getcloudapp.com/v1uE6mQA

That's exactly what I'm trying to implement on my app for another use case

Hope that makes sense

Hi Diego,

You should be able to use the above code to change the icon without opening the top bar app. To demonstrate this, you can wrap the setTopBarIcon() call in a conditional so that it only runs in a background app instance.

In the example above, replace the setTopBarIcon(); call with the following:

client.on('app.registered', (appData) => {
  const location = appData.context.location;
  if (location === 'background') {
    setTopBarIcon();
  }
});

If you haven't already, I'd encourage you to take a look at the client.instance docs. To change the top bar icon, you have to use the ZAF client for the top bar instance. The client.instance method lets you get (and use) the top bar instance's ZAF client from your app's background instance.

Thank you SO much James!!!!!

I just noticed that when I tested the previous piece of code, I forgot to re-add the background instance on the manifest :face-palm:

Now that I added it back and modify my logic a bit it's working exactly as I was expecting.

Thank you for the patience and detailed response. 

Have a great day!

I'm glad to hear you got things working, Diego!