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

Return to top

14 Comments

  • Sydney Neubauer
    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
  • 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
  • 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
    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
  • 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
  • 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 ?

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

    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:

    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
  • Ryan N

    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
    Zendesk Developer Advocacy
    Hey Ryan,

    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
    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
  • 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.

Powered by Zendesk