What's the change?
Support app developers now could specify a new boolean property of `flexible` in their apps' manifest file.
Where's the documentation?
https://developer.zendesk.com/documentation/apps/app-developer-guide/manifest/
Why should you care about this property?
We have released functionality that will allow agents to manually resize the width of the apps sidebar. Apps that are built with responsiveness in mind will have their width of the iframe container stretched out to take up the full width of the sidebar. If you have a lot of information in your app, this is a way for agents to better see/interact with the content in a bigger pane. This functionality is now only be available in Agent Workspace. It is now automatically available in your account for agents to manually resize the width of the apps sidebar, no enablement required.
Here's an example:
In this example, the first app, Custom App #104, has a property of `flexible` equating to TRUE, hence the width of its iframe container stretch out to take up the full width of the sidebar whenever resized.
The second app, Marketplace App #576, has a property of `flexible` equating to FALSE, hence the width of its iframe container remains fixed in place to the default width of 320px.
What app location are you able to put this property under?
Available only for the ticket sidebar and new ticket sidebar locations at this time.
What happens if I don't specify it in my apps manifest file?
If you don't specify a value towards the property, the apps framework assumes that it's FALSE.
For any new apps / manifest files created, what is the default value?
`flexible` equates to TRUE
What else should you do, if you haven't already?
Make sure your app is responsive, if it's not already (ie: leverage flexbox, ensure no positioning of elements is fixed. etc..)
Could this new property be used in my private app?
Yes, this new property could be used in both private apps and marketplace apps.
Could this new property be used in my marketplace app?
Yes, this new property could be used in both private apps and marketplace apps.
How could may app listen to an event that fires whenever the sidebar is manually resized?
If your app needs an event that fires whenever the ticket sidebar is resized horizontally, so that the app programmatically knows when to resize vertically, then you could implement something like this in your code. You may want to include a debounce as well.
window.addEventListener('resize', () => { console.log('innerWidth', window.innerWidth) console.log('called') resizeApp(); })
14 comments
Sydney Neubauer
1
JJ Miclat
Hey Sydney Neubauer!
Good questions, I've updated the article to reflect this info. This functionality will only be available in Agent Workspace. Once this functionality is released, it will be automatically available in your account for agents to manually resize the width of the apps sidebar, no enablement required.
Cheers,
JJ
0
Alan Pugh
Hey JJ! As someone using a lot of apps, this is wonderful news. Quick questions:
1. Will the app developer be able to set a responsive app height that shrinks as the width expands, to fit more apps vertically?
2. Any chance that we'll see an option to (or automatically) enable two columns upon hitting double the default width? That would be the holy grail for me.
1
Nicolas DESTROYE
Hello, I have activated the Agent Workspace option. I have access nos to the New worspace functionnality. But the ticket side bar is not "resizable". So I cannot use this new feature. Did I make something wrong ?
0
JJ Miclat
Hey Nicolas DESTROYE!
As mentioned in the article, we will be releasing functionality in Zendesk Support in the near future (shooting for early December 2021) that enables resizing of the ticket sidebar.
0
JJ Miclat
Great feedback Alan Pugh!
We'll consider both of these ideas in a future iteration.
In the meantime, if your app needs an event that fires whenever the ticket sidebar is resized horizontally, so that the app programmatically knows when to resize vertically, then you could implement something like this in your code:
2
Petar Jovanović
Hello, how can I extend my app so it can fit full width of the parent container around my iframe?
Currently zendesk puts some paddings by default. How can I set this to 0 ?
Thanks!
0
JJ Miclat
Hi Petar Jovanović,
Unfortunately, it's not possible to extend apps to fit the full width of the parent container. Zendesk placed padding in there so that the UX of apps is more closely aligned with Zendesk's visual design standards/language.
Cheers,
JJ
0
Josh Keller
I've found the following to manage app sizing pretty well:
The 250ms debounce delay might be excessive, but it's helpful since we have so many apps competing against each other for resources.
I found the additional 10 (pixels) added to the height was necessary, though I don't really understand why since I think the full height should be accounted for by parsing the body element.
0
Ryan Nguyen
Just a quick note that when we call client.invoke("resize"), that call will also fire the window resize event. Prob need a way to distinguish between client.invoke("resize") vs user manual resize for advanced use case.
0
Eric Nelson
Thanks for the feedback, I've passed it along to the product team.
0
Neha Agarwal
Hey Eric,
I am developing a private app and was looking for a similar option for top bar. Do we have it ?
0
Greg Katechis
Hi Neha! The use-case for functionality like this wouldn't apply to the top bar, as apps in the top bar overlay the agent workspace. If you would like to make a feature request for the ability to resize a top bar app, please share your feedback in this forum.
0
Matt Bagnara
Hey Neha Agarwal 👋🏻
I'm the new PM for the Apps Support API and UI. I'm keen to learn why you would want to add the flexible property to a top bar app. Can you please share your use case?
Thanks!
Matt
0