Creating a Fly-out Table

This article will show you how to create a fly-out table.

A fly-out table allows a user to click in a row then have that row's data displayed in the fly-out.  Extra data associated with the row can also be added to the fly-out.

Controls Used

• Horizontal Layout
• Vertical Layout
• Table
• Well
• Text
• Integer
• Button

Configuration Options, Binding, and Logic

For this example, we are using a variable called 'data' to populate the table, this variable is a list and is of type 'ComplexData1.'  'ComplexData1' is a Business Object with two parameters (str1 and int1).  Data has a default value in order to create the table rows.

The On Row Selected by User event is referencing the adjustWellYOffset function defined in the Custom HTML (No. 9 below).  When a row is selected by the user, the fly-out table will move as defined in the function.

<script>
    //This function enables the fly-out table to move when a specific row is selected
    function adjustWellYOffset(tr)
    {
        var well = page.ui.get("Well1");
        var table = page.ui.get("Table1");
        var flyout = page.ui.get("Flyout_Table1");       
  
        var wellDiv = well.context.element;
        var flyoutDiv = flyout.context.element;
        var tableDiv = table.context.element;
        
        //Begin calculations
        var newYOffset = tr.offsetTop + tr.offsetParent.offsetTop - 80;
        //Note: 80 is a magic number for visually-pleasing top position
        
        var minHeight = newYOffset + flyoutDiv.offsetHeight + 60;
        //Note: 60 is a magic number for visually-pleasing position at bottom of table
        
        if(minHeight > tableDiv.offsetHeight)
            newYOffset -= minHeight - tableDiv.offsetHeight;
        //End calculations
        
        wellDiv.style.paddingTop = newYOffset + "px";
    }
</script>

End Result