Alpha Video Training
Results 1 to 23 of 23

Thread: Collapse All Expanding Menus On A UX?

  1. #1
    "Certified" Alphaholic kingcarol's Avatar
    Real Name
    Carol King
    Join Date
    Jun 2010
    Posts
    1,524

    Default Collapse All Expanding Menus On A UX?

    I am on build 5221-5152 (haven't had time update for many months).

    I am setting up several expanding menus on a UX as a navigation system for my users. If a user clicks to expand one, and then another, I do NOT close the first one (on purpose) so that they have quick access to the ones they opened when they return to the UX. I have looked everywhere for code to collapse all of the expanding menus at once, if user clicks a button that I will label Collapse All. Does anyone know how to do this?
    Carol King
    Developer of Custom Homebuilders' Solutions (CHS)
    http://www.CHSBuilderSoftware.com

  2. #2
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,846

    Default Re: Collapse All Expanding Menus On A UX?

    This functionality was added in 5151-5127

    Link to Alpha Video on it.
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant

  3. #3
    "Certified" Alphaholic kingcarol's Avatar
    Real Name
    Carol King
    Join Date
    Jun 2010
    Posts
    1,524

    Default Re: Collapse All Expanding Menus On A UX?

    Thanks so much, Mike, but that video is about collapsing nodes from WITHIN one expanding menu. I want to be able to collapse expanding menus by using a button that is not within the menus.

    As you can see from my attached screenshot, I have 22 expanding menu elements on one ux and want to click one button to collapse them all. I want the user to be able to leave expanding menus expanded so that when they return to the ux, the ones they have expanded are still expanded. But, then, give them a way to collapse them all at once. I don't want them to have to click on each one they've expanded in order to collapse them.

    Below is the code in Selwyn's video about collapsing nodes from within an expanding menu. On my Collapse All button, I have tried using {dialog.object}.collapseMenu(name of my expanding menu, its value); and various iterations of that, but get an error saying that collapseMenu is not recognized.

    var parent = 'value of parent node';
    this.collapseMenu(parent);
    Attached Images Attached Images
    Carol King
    Developer of Custom Homebuilders' Solutions (CHS)
    http://www.CHSBuilderSoftware.com

  4. #4
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,846

    Default Re: Collapse All Expanding Menus On A UX?

    I see now. I'm not sure if there is a collapse all menu function available. I couldn't find one.

    I was able to get Selwyn's example working (from a node's onClick event) but the collapseMenu() function is really just a expand/collapse toggle. If I run the code twice the menu node collapses and then expands again. So even if you used the function to "collapse" every node in every menu you'd first have to evaluate if the node is collapsed already first and skip over those. I didn't get that far.

    Ashampoo_Snap_Sunday, July 28, 2019_07h19m50s_001_.png
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant

  5. #5
    VAR Pat Bremkamp's Avatar
    Real Name
    Pat Bremkamp
    Join Date
    Apr 2000
    Location
    Oregon, USA
    Posts
    2,626

    Default Re: Collapse All Expanding Menus On A UX?

    I have the same need. I'm working on a quote system that requires selecting the quote to work on, then going to various tabs to do the work. So, it requires closing all the tabs prior to starting on the next quote. Otherwise, the user is left working on the old quote.

    I have a button that closes all the tabs, but I'd like it to close the menu buttons also. I'm wondering if it is possible to get the status of a button and "click" it to toggle closed the leafs.
    Pat Bremkamp
    MindKicks Consulting

  6. #6
    "Certified" Alphaholic kingcarol's Avatar
    Real Name
    Carol King
    Join Date
    Jun 2010
    Posts
    1,524

    Default Re: Collapse All Expanding Menus On A UX?

    Just to let you know, Glenn Schild has been needing this too, and has said that he has put in a feature request for it. I just wondered if anyone had managed to come up with a solution on their own. Plus putting this out there will perhaps let us know of others who need the feature, like Pat, etc.
    Carol King
    Developer of Custom Homebuilders' Solutions (CHS)
    http://www.CHSBuilderSoftware.com

  7. #7
    "Certified" Alphaholic glenschild's Avatar
    Real Name
    Glen Schild
    Join Date
    Apr 2000
    Location
    Frome, Somerset, UK
    Posts
    1,514

    Default Re: Collapse All Expanding Menus On A UX?

    Quote Originally Posted by kingcarol View Post
    Just to let you know, Glenn Schild has been needing this too, and has said that he has put in a feature request for it. I just wondered if anyone had managed to come up with a solution on their own. Plus putting this out there will perhaps let us know of others who need the feature, like Pat, etc.
    Actually Carol, not quite but very similar, my scenarios is that I am using the expanding menu within a tree control on a tabbedui, and the value features for the expanding menu are not exposed in that scenario. Having said that the xbasic to collapse is

    this.collapseMenu('menu_name');

    so I am wondering if you replace "this" with the explicit object name for the first expanding menu and then repeat for each menu, if that might work?
    Glen Schild



    My Blog


  8. #8
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,615

    Default Re: Collapse All Expanding Menus On A UX?

    Have you followed the instructions in this video.
    C:\Users\petec\Downloads\ux_componen...llapseMenu.swf

    Cheers Pete
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  9. #9
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,704

    Default Re: Collapse All Expanding Menus On A UX?

    As Michael points out, collapseMenu() is buggy... since it Expands a menu as well. I'm guessing whomever created the method didn't actually run it twice in a row. This makes sense given the wretched doc for this method... here's the doc... can you find the 2 bugs in it? I'm shaking my head. This is why Alpha is so frustrating these days.

    Code:
    ' Get the object for the 'EXPANDINGMENU_1' control
    var menuObj = {dialog.object}.getControl('EXPANDINGMENU_1');
    if (menuObj) {
        var parent = 'B1';
        menuObj.collapseNode(parent);
    }
    Anyway... attached is a sample UX which works around the "un-intended feature" of collapseMenu()... and also hijacks a property of the menu object... "state". I can't see that state is used anywhere... so we'll use it. If you're uncomfortable using state then create your own property... it doesn't really matter. "state" was probably going to be used for this purpose... Alpha just didn't finish what they started.

    The key to the attached UX is giving a "value" to each top branch of the expanding menu. Then, in the onClick event for that top branch add code which sets "state" to "open".

    The Collapse All button uses 2 Arrays... one for all the menu variables, and a matching Array for all the top branch values.

    We process the Array and if state.state == 'open' then we close the menu and change state.state to 'closed'. If state.state is != 'open' then we set state.state to 'closed' and go on with life.

    I think Alpha is just great for letting us do stuff like this... we can get in a get things done. It's just that so much time is wasted banging our heads against a bug infested wall all the time.

    ux_ExpandingMenu_CollapseAll.zip
    Last edited by Davidk; 07-29-2019 at 09:10 AM.

  10. #10
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,615

    Default Re: Collapse All Expanding Menus On A UX?

    Nice David, good job.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  11. #11
    "Certified" Alphaholic Lance Gurd's Avatar
    Real Name
    Lance Gurd
    Join Date
    Jun 2005
    Location
    Southampton, UK
    Posts
    1,434

    Default Re: Collapse All Expanding Menus On A UX?

    Yes I agree very nice, thank you David.

    If only someone could speed up the expanding menu render when using a SQL query to populate the nodes, a couple of mine take 15 seconds or more to render

  12. #12
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,615

    Default Re: Collapse All Expanding Menus On A UX?

    Have you doubled checked your index settings?
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  13. #13
    "Certified" Alphaholic kingcarol's Avatar
    Real Name
    Carol King
    Join Date
    Jun 2010
    Posts
    1,524

    Default Re: Collapse All Expanding Menus On A UX?

    David K - THANK YOU! I have tried the code in your sample component and it seems to be working very well. I've left it hijacking the "state" property and will cross my fingers that the property doesn't get used some other way by Alpha. Great job, David.
    Carol King
    Developer of Custom Homebuilders' Solutions (CHS)
    http://www.CHSBuilderSoftware.com

  14. #14
    "Certified" Alphaholic kingcarol's Avatar
    Real Name
    Carol King
    Join Date
    Jun 2010
    Posts
    1,524

    Default Re: Collapse All Expanding Menus On A UX?

    UPDATE to code I am using from David K. Since I have 22 expanding menu components on my ux, and a possibility of more, I wondered if the Value of the top branch of each one of them really needed to be unique. To make it all less complex, I experimented with giving the same Value of 'TopBranch' to all of the top branches in all my expanding menus, and changed the code behind the Collapse All button as shown below. Since I will not be using the top branch values for anything except the code to collapse menus, this seems like it will work for me.

    David's code behind the Collapse All button:
    Code:
    var expMenus = ['EXPANDINGMENU1','EXPANDINGMENU2'];
    var expMenuValue = ['CM1','CM2'];
    for(i=0;i<expMenus.length;i++){
    	var menuObj = {dialog.object}.getControl(expMenus[i]);
    	if (menuObj) {
    	    var parent = expMenuValue[i];
    	    if(menuObj.state.state == 'open'){
    	    	menuObj.collapseMenu(parent);
    	    	menuObj.state.state = 'closed';
    	    }else{
    	    	menuObj.state.state = 'closed';
    	    }
    	}
    }
    I have set the Value for the top branch of each of my expanding menus to TopBranch, so below is my revised code for the Collapse All button (except I have 22 expanding menus in my array for expMenus):
    Code:
    var expMenus = ['EXPANDINGMENU1','EXPANDINGMENU2'];
    var parent = 'TopBranch';
    
    for(i=0;i<expMenus.length;i++){
    	var menuObj = {dialog.object}.getControl(expMenus[i]);
    	if (menuObj) {
    	    if(menuObj.state.state == 'open'){
    	    	menuObj.collapseMenu(parent);
    	    	menuObj.state.state = 'closed';
    	    }else{
    	    	menuObj.state.state = 'closed';
    	    }
    	}
    }
    And I will just put David's code for the OnClick event of the top branch of his first expanding menu in case someone wants it, too. Be sure to give the top branch of each expanding menu a value that can be referenced in the code for the Collapse All button shown above.
    SEE UPDATE IN COMMENTS FARTHER DOWN ABOUT THIS!!!!
    Code:
    //debugger;
    var menuObj = {dialog.object}.getControl('EXPANDINGMENU1');
    if (menuObj) {
       	menuObj.state.state='open';
    }
    Last edited by kingcarol; 07-29-2019 at 09:26 AM.
    Carol King
    Developer of Custom Homebuilders' Solutions (CHS)
    http://www.CHSBuilderSoftware.com

  15. #15
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,615

    Default Re: Collapse All Expanding Menus On A UX?

    Well done, good team effort. Thanks for following up.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  16. #16
    "Certified" Alphaholic kingcarol's Avatar
    Real Name
    Carol King
    Join Date
    Jun 2010
    Posts
    1,524

    Default Re: Collapse All Expanding Menus On A UX?

    Another update: In testing, I found that if I clicked a 2nd time on the top branch to close it manually, and THEN clicked the Collapse All button, its code found that the menuObj.state.state was 'open' and so made that expanding menu open. SO.. I changed the onclick for the top branch to the following and it seems to be taking care of that issue. David, let me know if there is anything wrong with this logic, please?

    Revised code for the OnClick event of the top branch in an expanding menu:
    Code:
    var menuObj = {dialog.object}.getControl('EXPANDINGMENU1');
    if (menuObj) {
    	if(menuObj.state.state == 'open'){
    		menuObj.state.state='closed';
    	} else {
       		menuObj.state.state='open';
       	}
    }
    Carol King
    Developer of Custom Homebuilders' Solutions (CHS)
    http://www.CHSBuilderSoftware.com

  17. #17
    "Certified" Alphaholic Lance Gurd's Avatar
    Real Name
    Lance Gurd
    Join Date
    Jun 2005
    Location
    Southampton, UK
    Posts
    1,434

    Default Re: Collapse All Expanding Menus On A UX?

    Hi Pete,

    On one particular UX, there is an expanding menu, a viewbox, and 2 container windows with a few input controls which get populated when items in the viewbox are selected.

    The table (approx 6000 records) is indexed on all the 6 fields (out of 28) that are needed and then filtered into a view which has only records that meet the criteria (circa 2000 records) for the expanding menu. Running a select statement on the view completes in 0.052 seconds. The UX renders in 3-4 seconds, the expanding menu renders in around 28 seconds in this particular case. I would say the UX with the simplest expanding menu renders in about 15 seconds

  18. #18
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,615

    Default Re: Collapse All Expanding Menus On A UX?

    How many sibling and and how many child items in the 2000
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  19. #19
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,704

    Default Re: Collapse All Expanding Menus On A UX?

    Quote Originally Posted by kingcarol View Post
    Another update: In testing, I found that if I clicked a 2nd time on the top branch to close it manually, and THEN clicked the Collapse All button, its code found that the menuObj.state.state was 'open' and so made that expanding menu open. SO.. I changed the onclick for the top branch to the following and it seems to be taking care of that issue. David, let me know if there is anything wrong with this logic, please?

    Revised code for the OnClick event of the top branch in an expanding menu:
    Code:
    var menuObj = {dialog.object}.getControl('EXPANDINGMENU1');
    if (menuObj) {
    	if(menuObj.state.state == 'open'){
    		menuObj.state.state='closed';
    	} else {
       		menuObj.state.state='open';
       	}
    }
    Yes... that works really nice now. Overall, we must fully control the state of the menu... whether by a button... or by a menu event.
    I've updated my code. Thanks.

  20. #20
    "Certified" Alphaholic Lance Gurd's Avatar
    Real Name
    Lance Gurd
    Join Date
    Jun 2005
    Location
    Southampton, UK
    Posts
    1,434

    Default Re: Collapse All Expanding Menus On A UX?

    Hi Pete,

    There are 3 siblings, the largest child has 4 branches, then the largest grand child has has 60 branches, in turn the largest great grand child has 17 branches, then at the next level there are anything between 4-10 branches, with the same type of quantity for the final choice

  21. #21
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,615

    Default Re: Collapse All Expanding Menus On A UX?

    Looks like a lot of JSON being nested there in the browser for things that may never be accessed i'd say the browser is struggling, i'd look at a LIST control for the siblings, then ViewBox for the rest using an ajax callback or maybe all Viewboxes, would be a lot smaller and faster. - just my thought on the issue.
    Cheers, Pete
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  22. #22
    "Certified" Alphaholic Lance Gurd's Avatar
    Real Name
    Lance Gurd
    Join Date
    Jun 2005
    Location
    Southampton, UK
    Posts
    1,434

    Default Re: Collapse All Expanding Menus On A UX?

    Thanks Pete for the different perspective I will look into it

  23. #23
    Alpha Software Employee Selwyn Rabins's Avatar
    Real Name
    Selwyn Rabins
    Join Date
    Mar 2000
    Location
    Boston, MA
    Posts
    5,297

    Default Re: Collapse All Expanding Menus On A UX?

    there is a built-in method. for example
    p.s. you could find this by using Chrome developer tools, getting the 'obj' pointer and then examining what's inside the obj pointer



    var obj = {dialog.object}.getControl('ExpandingMenu')
    obj.collapseAll();

Similar Threads

  1. Replies: 4
    Last Post: 03-18-2018, 05:58 PM
  2. Collapse Button Bar
    By Scott B in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 09-07-2016, 02:17 PM
  3. Collapse button in panel card
    By Catalin in forum Mobile & Browser Applications
    Replies: 1
    Last Post: 07-07-2014, 08:05 AM
  4. how do you collapse a tree control
    By Tbrondolo in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 12-15-2013, 09:38 AM
  5. Collapse columns in tabular grid... or... how?
    By mronck in forum Application Server Version 11 - Web/Browser Applications
    Replies: 2
    Last Post: 01-03-2013, 05:03 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •