Recent searches


No recent searches

New 'Flexible' Property in the Manifest File for Support Apps to Denote Responsiveness



image avatar

JJ Miclat

Zendesk Product Manager

Edited Apr 05, 2023


2

14

14 comments

  1. Is this update for all Support Interfaces or only Agent Workspace?
  2. Is this feature something we enable or will it be enabled once it is released?

1


image avatar

JJ Miclat

Zendesk Product Manager

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


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


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


image avatar

JJ Miclat

Zendesk Product Manager

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


image avatar

JJ Miclat

Zendesk Product Manager

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:

window.addEventListener('resize', debounce(() => {
console.log('innerWidth', window.innerWidth)
console.log('called')
resizeApp();
}, 200, {leading: false}))

2


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 ?

.workspace.apps:not(.ticket_editor_app) .app_view { padding:10px 15px 20px }

Thanks!

0


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


image avatar

Josh Keller

Zendesk Luminary

I've found the following to manage app sizing pretty well:

function resize_app() {
    let el = document.getElementsByTagName('body')[0];
    let height = el.offsetHeight;
    let style = getComputedStyle(el);
    height += parseInt(style.marginTop) + parseInt(style.marginBottom) + 10;
    client.invoke('resize', { width: '100%', height: height });
}

function debounce(func, timeout=250) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => { func.apply(this, args); }, timeout);
    };
}

window.addEventListener('load', debounce(resize_app));
window.addEventListener('resize', debounce(resize_app));

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


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


image avatar

Eric Nelson

Zendesk Developer Advocacy

Hey Ryan,

Thanks for the feedback, I've passed it along to the product team.

0


Hey Eric,

I am developing a private app and was looking for a similar option for top bar. Do we have it ?

0


image avatar

Greg Katechis

Zendesk Developer Advocacy

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


image avatar

Matt Bagnara

Zendesk Product Manager

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


Please sign in to leave a comment.