Make Apps Collapsable

Completed

31 Comments

  • Official comment
    Erica Wass
    Comment actions Permalink

    Hi all:
    I'm pleased to say that we are rolling out a feature that allows sidebar apps to expand and collapse. Here is the announcement. 

  • Allen Hancock
    Comment actions Permalink

    Each App author has the ability to do this within their app. (We implemented this concept in the app we're about to release)

    I'd suggest reaching out to the makers of the tallest apps first.

     

    0
  • Craig Willis
    Comment actions Permalink

    That's good to hear, many of ours are built by Zendesk, so I would hope that they can implement this.  I would imagine that they would also have better luck getting the App Builders to implement this rather than I would as an individual user of the app.

    Craig

    0
  • Andrew J
    Comment actions Permalink

    Would be good to see this part of the app framework - so that ANY app has this ability.  This is good for the users, but possibly won't affect app makers much.

    I'd echo the fact that some of our bulkier apps are Zendesk or Zendesk Labs apps.

    - Agent Availability

    - Redaction App

    - Time Tracking

    1
  • Jeremiah Currier
    Comment actions Permalink

    Edited by Zendesk: This solution worked on V1 of the apps framework, which is no longer supported. It doesn't work on V2.

     

    Hey there,

    You can hide/show an app container with JQuery in a Zendesk App. 

    Demo

    Here's how it's done in this example:

    'app.js'

    Add an event into the app for when the plus/minus sign is clicked:

    events: {
    'click .toggle-app': 'toggleAppContainer'
    },

    ...then add the function which does the magic as it's own function farther down in the app.js file:

    toggleAppContainer: function(){
    var $container = this.$('.app-container'),
    $icon = this.$('.toggle-app i');
    if ($container.is(':visible')){
    $container.hide();
    $icon.prop('class', 'icon-plus');
    } else {
    $container.show();
    $icon.prop('class', 'icon-minus');
    }
    }

    'layout.hdbs'

    Wrap your "<section data-main/>" in a "div" used as your app container. Then modify your "header" element to contain the "a" (link) & "i" (icon) elements like so:

    <header>
    <span class="logo"/>
    <h3>
    <a class="toggle-app"><i class="icon-minus"></i> {{setting "name"}}</a>
    </h3>
    </header>
    <div class="app-container">
    <section data-main/>
    </div>

    A note on the entire demo code used to help visualize this:

    Lastly, for the purposes of making the demo easy to visualize on the 'app.activated' event I'm using a function to show a template switch to something with placeholder text from a meaty Lorem Ipsum generator.

    So the full events portion of the app.js looks like this: 

     events: {
    'app.activated': 'doSomething',
    'click .toggle-app': 'toggleAppContainer'
    },

    The function called on app.activated is written like so:

     doSomething: function() {
    this.switchTo('main');
    },

    ...and the template being switched to for demo purposes is the following standalone code in a file named 'main' inside the templates folder: 

    <p>Hamburger ground round fatback kevin turducken shank, ball tip shankle beef pork belly leberkas tri-tip drumstick sausage biltong. Cupim boudin spare ribs tenderloin beef. Pork spare ribs meatball porchetta ham hock alcatra doner drumstick sirloin pork belly ground round tri-tip. Ham pig tri-tip meatball t-bone jerky cupim pork. Filet mignon landjaeger pork chop, pork loin meatball frankfurter rump beef chuck t-bone brisket hamburger meatloaf ball tip strip steak. Jowl cow drumstick, tri-tip hamburger porchetta beef ribs chuck t-bone tongue.</p>

    Happy coding!

    -Jeremiah

    0
  • Craig Willis
    Comment actions Permalink

    Hi Jeremiah, 

    As this requires access to the application code I assume this would have to be done by each app developer, correct?

    If this is the case, could you add this to the Salesforce App which I assume is built by Zendesk as it's the biggest app that we have.

    0
  • Andrew J
    Comment actions Permalink

    I would like to see that added to all sidebar apps - maybe an option to turn it on and off in the app installer would be good too.

    1
  • Joel Hellman
    Comment actions Permalink

    I would add my vote here.

    I think the best way to get more apps to collapse is to add support for this within the apps framework.

    If we had helper methods that allowed us to declare in the app manifest the app should be collapsible, and some helper methods like .collapse() isCollapsed() etc, I think we would soon see a lot of apps offering this.

    Making an app collapsible adds a bit of complexity to the app itself, in addition to that complexity, there are several steps for a 'good' collapse:

    • Special CSS styling so when the app is in its collapsed state, its actually no taking up a lot of real estate; as proposed by the OP, which I think is what most people want. Just using .hide(), and the app will still take up considerable space
    • Setting the events for how the users can toggle the visibility. Should the user use click the header? Or should there be a plus-minus, etc.
    • A collapsed app needs to be able to retain its state, or it isn't useful. If I collapse an app on ticket A, and then open up a new ticket B, then the app should now start in collapsed mode. 
    • The apps settings should add a configuration setting for the admin to decide if the app should be collapsible
    • The apps settings should add a configuration setting for the admin to decide if the initial state (for new installations/fresh sessions where no state have been set), should be expanded or collapsed (though that may be nice to have)

    All of the concerns above could be implemented in lots of ways, and if its not standardized by the apps framework, I don't think we will se many apps offering this feature. 

     

     

     

    0
  • Joel Hellman
    Comment actions Permalink

    I'll just paste in a section from a comment I made to collapse the Tag Control, to provide some more context on all the steps that may be neccesary to collapse an app:

    This is definitely a 'nice to have', but I think it would add greatly to the UX for the agents. 

    2
  • Andrew J
    Comment actions Permalink

    Very nice Joel!

    0
  • Craig Willis
    Comment actions Permalink

    Very nice, now just to get the App Developers to add it in!

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey guys!

    In the interest of making sure the right people see this feedback, I'm going to move this whole post over to our Product Feedback forum. :)

    0
  • Tom Browning
    Comment actions Permalink

    Would love to see this implemented system-wide by Zendesk - I think asking individual developers to do this is a bit of a conflict of interest; as some larger devs probably like the idea of their app being very visible!

    1
  • Andrew J
    Comment actions Permalink

    Agree @Tom, this is a customer request, it should not an option for developers to crowd out the screen.

    2
  • Craig Willis
    Comment actions Permalink

    Tom, Andrew, 

    Great point.

    0
  • Jakki Macfadyen
    Comment actions Permalink

    Is there a way to do this using ZAF v2?

    0
  • Tom Browning
    Comment actions Permalink

    @AndrewJ, especially given that Zendesk themselves don't enable this on (at least some of) their apps!

    0
  • Andrew J
    Comment actions Permalink

    Is the answer in the 'official' comment only working on Apps v.1?

    How about a solution for App v.2?

    Any progress on building this in?

    0
  • James Rago
    Comment actions Permalink

    Please, for any larger organizations using many apps, this is becoming horrible to look at. From a Zendesk business case, you can improve latency and loading times of the Zendesk platform for every customer. By allows customers to collapse them or have them collapsed by default, that would potentially mean that the app does not need to populate of pull/push data. The customer can pick and choose which apps to stay open in order to have visibility on what is always important, and which need to send/receive data all the time.

     

    At the very least the collapse should be available just to hide it and minimize. Zendesk and partners are making more and more quality apps, but have 10+ apps can be overload visually. 

     

    Can we get any official response on this?

    1
  • Andrew J
    Comment actions Permalink

    Another possibility on this might be to minimise the apps into a logo only...

    So you could go 3 or 4 wide... and when one is clicked, the app opens below...

    3
  • Andrew J
    Comment actions Permalink

    It appears that the official answer does not work for v.2 apps... Can we have a progess report on building this into the app framework?

    0
  • Dan Ross
    Comment actions Permalink

    It would be great to be able to do this in v2 apps, especially because v1 is now End of Life. Feature parity with v1 would be great! App management is getting difficult with so many tall apps.

     

    0
  • Phil Grove
    Comment actions Permalink

    Hi All, I wanted to post a comment here letting you know that we are working on this feature. Once we have a beta ready I will post again with a beta sign up link. Thanks for all your feedback.

    1
  • Andrew J
    Comment actions Permalink

    Hello Phil, thanks for getting back to us :-)

    0
  • Tom Browning
    Comment actions Permalink

    That's great news Phil, thanks for the update!

    0
  • Heather R
    Comment actions Permalink

    Can't wait!

    0
  • Andrew J
    Comment actions Permalink

    Hey Phil, any progress reports?

    There's a bunch of features that are really obvious to us as users that really would be good to be included if a rework is happening. 

    Optional features per app:

    • Collapsible for agents or admins
    • Reorderable for agents or admins
    • Maintain the last used state of the app for each user (ie. open/closed)

    Features:

    • Minimised state option (allow a small portion of app to show - for some apps this might be headline info, but not controls)
    • Click on header and name to open/close
    • Hover to open app bar - ie. have a small residual app bar with icons like left hand side - ideally showing icons for apps... when you mouse over these for 1 sec, the app bar opens and the appropriate app is opened. This state could be the default state for newly opened ticket (optional)

     

    0
  • Dan Ross
    Comment actions Permalink

    There is actually a beta for this, I thinks it's found on the second page of the product feedback section in the zd support guide. I'm on mobile so getting a link is a pain right now, but so far the beta's been going well for us!

    0
  • Andrew J
    Comment actions Permalink

    Thanks Dan, I hadn't heard about this - will try to get on it!

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi all - 

    Here's the link to the Beta. It doesn't appear to be particularly active right now, but I'm checking in with the appropriate Product Manager for an update. Standby!

    0

Post is closed for comments.

Powered by Zendesk