Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
40
expand, collapse functionality, carried away to different pages
posted

I’m evaluating which tool should I use to design my first mobile app. I know some very basic programming. If you don’t mind, I have two questions. I need a button (the name of a folder), that when touched on the plus sign it expands to show the list of the folders or files inside that folder. Now, if there is a folder inside that first folder, I would like it to do the same to show its contents too, so you can expand and collapse this folders/buttons touching the plus or minus sign. Do Indigo allow this? And the second question is. If this is possible, can you create a "set" with this folder/sub folder/files, and carry this "set" to different pages, with the functionality included? If not, do you have a suggestion of what prototyping tool may be able to do this?

Thanks!

Parents
No Data
Reply
  • 1870
    Verified Answer
    posted

    Hello Javier,


    You can achieve that with Indigo simply by using the Tree control placed in the Layout category inside the toolbox. That control supports adding multiple nested levels of items. You can collapse and expand items that have children when previewing the prototype. If that’s enough it’s probably the best choice as it’s an out of the box solution for your scenario.


    The other alternative is to build that interaction yourself which will give you total control in terms of the visuals and behavior. You can check the basics of adding interactions to an Indigo prototype here.


    Once you have, let’s say, a button or a plus icon you can add a tap interaction that goes to a new state. In the new state you can change the screen at will, even by adding new controls to represent the contents of that folder. Then you can add another tap interaction to any of those new controls to simulate the opening of a nested element and so on. Note that interactions can be turn into “toggles” so they not only expand but also collapse on second click, by checking the checkbox “Toggle back When User Does Same Action Again”.


    Related to the reuse question I suggest you to take a look at this topic.


    In short, Screenparts are user created controls that can be included in screens as if they were a regular control like a button or tree. This means that if you include your folder design (the tree or the one with the custom interactions) inside a Screenpart then you will be able to use it as many times as you need. Note also that if at some point you update the Screenpart source all the screens that includes it will automatically reflect the change.


    Hope this helps.


    Best regards,
    Diego
    Indigo Studio Team

Children