Emulating Stack

DOM Tree Manipulation

The second is to do some DOM tree manipulation.  The code below will rearrange the fields in a GRID by altering their posX and posY attribute

FUNCTION rearrange()
DEFINE last_node, grid_node, root_node, child_node om.DomNode
DEFINE grid_list om.NodeList
DEFINE new_x, new_y INTEGER
DEFINE g, i INTEGER
DEFINE after_title_flag BOOLEAN = FALSE
DEFINE max_width INTEGER
DEFINE adj_width INTEGER

    LET root_node = ui.Window.getCurrent().getForm().getNode()

    -- Reduce Width of form by setting posX to 1 and arrange items vertically
    -- Three rules :-
    -- 1. If first field is a Static Label i.e what would be a Title then put next field on same row
    -- 2. If field has TAG="associate" then assume this is supposed to be on same line as previous
    -- 3. Calculate max width of Title Labels and adjust width of Static Labels to match, and move fields to right accordingly

    LET grid_list = root_node.selectByTagName("Grid")
    FOR g = 1 TO grid_list.getLength()
        -- Repeat for each grid
        INITIALIZE last_node TO NULL
        LET after_title_flag = FALSE
        LET max_width = 0
        LET new_y = 0

        LET grid_node = grid_list.item(g)
        FOR i = 1 TO grid_node.getChildCount()
            LET child_node = grid_node.getChildByIndex(i)
            IF child_node.getTagName() = "FormField" THEN
                LET child_node = child_node.getFirstChild()
            END IF
            IF (child_node.getAttribute("tag") = "associate" AND last_node IS NOT NULL) OR after_title_flag THEN
                -- Keep on this line if associated to previous line or if it is the first field after a title
                LET new_x = last_node.getAttribute("posX") + last_node.getAttribute("gridWidth") + 1
                CALL child_node.setAttribute("posX", new_x)
                CALL child_node.setAttribute("posY", new_y)
            ELSE
                -- Place on a new line
                LET new_y = new_y + 1
                CALL child_node.setAttribute("posX", 1)
                CALL child_node.setAttribute("posY", new_y)

                -- Keep track of max label width
                IF child_node.getTagName() = "Label" THEN
                    IF child_node.getAttribute("gridWidth") > max_width THEN
                        LET max_width = child_node.getAttribute("gridWidth")
                    END IF
                END IF
            END IF

            -- If static label, then set flag so next field is not put on a new line
            IF child_node.getTagName() = "Label" AND child_node.getParent().getTagName() = "Grid" THEN
                LET after_title_flag = TRUE
            ELSE
                LET after_title_flag = FALSE
            END IF
            LET last_node = child_node
        END FOR

        -- Second Pass, adjusting width, posX for width of title 
        FOR i = 1 TO grid_node.getChildCount()
            LET child_node = grid_node.getChildByIndex(i)
            IF child_node.getTagName() = "FormField" THEN
               LET child_node = child_node.getFirstChild()
            END IF

            IF child_node.getAttribute("posX") = 1 THEN
                -- If first field ie label then set width equal to the max width
                IF child_node.getTagName() = "Label" THEN
                    LET adj_width = max_width - child_node.getAttribute("gridWidth")
                    CALL child_node.setAttribute("gridWidth", max_width)
                ELSE
                    LET adj_width = max_width
                    CALL child_node.setAttribute("posX", child_node.getAttribute("posX") + adj_width +1)
                END IF
            ELSE
                -- move other nodes on this line out by the difference to max
                CALL child_node.setAttribute("posX", child_node.getAttribute("posX") + adj_width )
            END IF
        END FOR
    END FOR
END FUNCTION

If we were to ever have a responsive solution that was the equivalent of GRID(FLIPPED) to turn a GRID into something resembling a STACK, we would have to consider similar logic in order to link a Field to its Title / Label, and to allow in some case multiple fields on the same line.  The screenshots below show an example of a complex GRID being transformed to look like a STACK, by applying the rearrange function above to manipulate the posX and posY attributes.  if I was to take this further I would also consider setting the width attribute and if necessary adding scroll so the right edges aligned.