Alpha DevCon 2018
Results 1 to 5 of 5

Thread: Programmatically resize a panel card

  1. #1
    Member
    Real Name
    Greg Taylor
    Join Date
    Feb 2009
    Location
    Columbus, Ohio
    Posts
    426

    Default Programmatically resize a panel card

    I have an editor set that drops down in a panel (TTB panel card layout). The panel card as a defined size. This works great for a text field editor

    How can I programmatically resize the HEIGHT of that panel card if the editor is a text area field or an editor list?

    In the SHOW EDITOR in the editor properties I have tried getting a pointer to the panel object and using the resize option, but I lose the horizontal settings and the panelcard resizes both vertically and horizontally.

    I can use the onSize event in the panel card and I am guessing that is what I need to focus on? Just not sure how to pass values to it if a particular editor is used

    In looking at the responsive layout rules, I can resize the panel based on screen size, etc, so I know there is a way to do it, but I cant see the javascript invoked with that responsive layout setting....or at least I haven't found a way to do so.

    Trying to keep things as minimal as possible and don't want to add additional editor sets and panel cards if I can help it.

    Thanks in advance for any assistance you might provide.
    Last edited by gregincolumbus; 04-18-2018 at 12:23 PM.

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,729

    Default Re: Programmatically resize a panel card

    Is it the PanelCard "Layout size" property you want to be variable... depending upon the Editor being displayed? E.g. an Editor showing a KeyPad will need more room than an Editor showing a TextBox.

    I think you'll need to get Alpha to have a look at this one. The whole process of Editors is so convoluted... so many bits and pieces involved... that changing one area will destroy another.

    Alpha probably has an answer for this.

  3. #3
    Member
    Real Name
    Greg Taylor
    Join Date
    Feb 2009
    Location
    Columbus, Ohio
    Posts
    426

    Default Re: Programmatically resize a panel card

    Hi David...thank you for taking the time to reply. Here is a quick screencast of what I want it to do

    Video

    Basically I want the panel card that holds the editor to resize based upon the editor for the field being viewed. Hard to put in words but the video shows what I mean.

    I would think this would a common need for those trying to avoid the back and forth panel swaps for a phone when doing CRUD operations. The drop down pc keeps the editor above the soft keyboard on a phone but it needs flexibility to allow the next/previous option to work with changing editors.

  4. #4
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,729

    Default Re: Programmatically resize a panel card

    I figured that's what you were after. That height is controlled by the PanelCard Layout size property. That size is picked up by the Editors and used in a "translate3d" transformation. Your size is probably set at 150px. I don't know if there's a proper way to get this done. It seems to me that the PanelCard should resize according to what's coming in... but it looks like Alpha didn't think that far ahead.

    Here's a brute force way to do this. I'd still contact Alpha, if I were you, and ask about how to do this properly. If the solution is currently within Alpha... it's nicely buried.

    The code below is specific to my UX... so you need to get your Panel names right for this to work.

    In the EditorSet Show Javascript event for the TextBox Editor... I have...

    Code:
    {dialog.object}.panelSetActive('PANELCARD_2');
    {dialog.object}.editorCancel('EDITORSET_2');
    
    var transProp = $("{dialog.ComponentName}.R1.PANEL.1.BODYINNER").style.transform;
    var transArr = transProp.split(",");
    var transHeight = transArr[1];
    
    if(transHeight == " 450px"){
    	$("{dialog.ComponentName}.R1.PANEL.1.BODYINNER").style.transform = "translate3d(0px, 150px, 0px)";
    	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0").style.transform = "translate3d(0px, -150px, 0px)";
    	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0.BODY").style.height = "150px";
    }
    All my code is the code after the setActivePanel method... which was already in place.
    This code closes a potentially open EditorSet_2 (my EditorSet for a NumberPad). The code then gets the Transform settings for the Panel. I need to reset the Panel back to 150px if it has been increased by some other EditorSet.

    Here the code for my second EditorSet (my Editor for a NumberPad). The NumberPad must be set to a height of 450px in order to for the full NumberPad to show.

    Code:
    {dialog.object}.panelSetActive('PANELCARD_2');
    {dialog.object}.editorCancel('EDITORSET_1');
    setTimeout(function(){
    	$("{dialog.ComponentName}.R1.PANEL.1.BODYINNER").style.transform = "translate3d(0px, 450px, 0px)";
    	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0").style.transform = "translate3d(0px, -450px, 0px)";
    	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0.BODY").style.height = "450px";
    },50);
    Here I am cancelling a potentially open EditorSet_1, and then resizing the Panel to accomodate the Number Pad. I put it within a slight setTimeout Delay so that it's not just "popping" into view.

    Here's a video of what all this looks like... http://youtu.be/y_QMBTJYQmQ?hd=1

  5. #5
    Member
    Real Name
    Greg Taylor
    Join Date
    Feb 2009
    Location
    Columbus, Ohio
    Posts
    426

    Default Re: Programmatically resize a panel card

    Hi David,

    Thanks so much for the assistance…... I was definitely looking in the wrong spot on how to solve this.

    I just watched the video and this is exactly what I am looking for…..I will dig into the code so that I have an understanding of how it works. Will also reach out to Alpha…seems like this would be a common need for those developing for phones and trying to minimize the weight of the UX for CRUD operations.

    I appreciate your willingness to help!

    Greg

Similar Threads

  1. Expanding Menu - Load child ux in panel card kills set active panel
    By gregincolumbus in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 10-20-2017, 08:12 AM
  2. Panel card with List - Disable Scroll on List so Panel card scrolls
    By stewx in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 08-29-2014, 12:51 PM
  3. Programmatically resize container
    By JPMPA in forum Mobile & Browser Applications
    Replies: 1
    Last Post: 07-25-2014, 04:43 PM
  4. Open UX, select item from list, goto panel.. programmatically
    By cemopolat in forum Mobile & Browser Applications
    Replies: 7
    Last Post: 06-08-2014, 12:15 PM
  5. How to show/hide a panel card based on a control in side a panel navigator?
    By Ferenju in forum Mobile & Browser Applications
    Replies: 3
    Last Post: 03-18-2014, 01:07 PM

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
  •