How to replace a PanelSet using replaceChild in BrightScript

Question

I'm using the PanelSet class to create a settings screen made of two panels:

• panelA on the left-hand side displays a list of overall settings options
• panelB is displayed on the right-hand side, includes a list of different options for each item on panelA

How can I replace the Panel displayed on the right-hand side, when the user changes the focused item on panelA?

Roku's documentation states that you have to use the method replaceChild, but I can't figure out how that's supposed to work, or any examples. This is what I was trying but it doesn't work:

function showPanelInfo()
    if m.panelA.list.itemFocused = 0
        m.panelset.replaceChild(m.panelB, 3)
    else
        m.panelset.replaceChild(m.panelC, 3)
    end if
end function

Function init()
    m.panelset = createObject("roSGNode", "PanelSet")

    ' Left-hand side panel with two items list
    m.panelA = m.panelset.createChild("OptionsListPanel")

    ' Right-hand side panels with different lists for each item on left-hand side panel
    m.panelB = m.panelset.createChild("OptionsBPanel")
    m.panelC = createObject("roSGNode", "OptionsCPanel")

    m.panelA.list.observeField("itemFocused", "showPanelInfo")
...
end function

Answer 1

If you use GridPanel or ListPanel, you should observe its createNextPanelIndex field and simply set new panel to its nextPanel field in the observer. So, usually you should never manually insert/replace/create children of PanelSet. Check how this works here and here. If you use a plain Panel node, it can be a bit more complicated, but I believe that's not the case.

Sample code:

Function showPanelInfo()
  if m.panelA.list.itemFocused = 0
    m.panelset.nextPanel = m.panelB
  else
    m.panelset.nextPanel = m.panelC
  end if
end function

Function init()
  m.panelset = createObject("roSGNode", "PanelSet")

  ' Left-hand side panel with two items list
  m.panelA = m.panelset.createChild("OptionsListPanel")

  ' Right-hand side panels with different lists for each item on left-hand side panel
  m.panelB = m.panelset.createChild("OptionsBPanel")
  m.panelC = createObject("roSGNode", "OptionsCPanel")

  m.panelA.observeField("createNextPanelIndex", "showPanelInfo")
  ...
end function