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

Return to top

11 Comments

  • 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
  • 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
  • Syd
    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 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
  • Ryan George

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

    Thanks for the feedback, I've passed it along to the product team.
    0
  • JJ Miclat
    Zendesk Product Manager

    Hey Syd!

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

Please sign in to leave a comment.

Powered by Zendesk