Programmatically add tab into Border

[spider58]

Hi, here is my border definition on program startup, It has 2 tabs in right border definition.

`borders:[ { "type": "border", "location":"right", "size":500, "selected" : 0, "children": [ { "type": "tab", "selected" : 0, "enableClose":false, "name": "KATMANLAR", "component": "deneme", },
{ "type": "tab", "enableClose":true, "name": "KATMANLAR2", "component": "deneme", },

        ]
    },
	{
      "type": "border",
      "location":"left",
	  "size":300,
	  "selected" : 0,
      "children": [
          {
          "type": "tab",
  		  "selected" : 0,
		  "enableClose":false,
          "name": "ÇİZİM",
          "component": "cizimAraclari",
          },

        ]
    }
],`

I want to add new tab with button click into right border after KATMANLAR2 tab. I can add a new tab into tabset, but i can't find a solution for border

Thanks inadvance

[spider58]

i tried to add a tab object into json (pushed border.children) programmatically, but whole FlexLayout components being rendered.

I just want to add new tab without refresh whole FlexLayout components

[nealatcaplin]

Have you tried using: Actions.addNode(newNodeJson, toNodeId, location, index)?

[spider58]

Have you tried using: Actions.addNode(newNodeJson, toNodeId, location, index)?

Yes, addNode doesn't working for Border

[N8th8n8el]

I am currently trying to achieve something similar to @spider58. I want to add a new tab to a border and select it programmatically. I tried using

model.doAction(
  Actions.addNode(
    {
      type: "tab",
      enableClose: true,
      name: "MyName",
      component: "MyComponent"
    },
    model
      .getBorderSet()
      .getBorders()
      .find(b => b.getLocation() === DockLocation.BOTTOM)
      .getId(),
    DockLocation.BOTTOM,
    -1
  )
);

which does indeed work. It adds a new tab to the bottom border. To then select it programmatically I tried using

model.doAction(
  Actions.selectTab(
    model
      .getBorderSet()
      .getBorders()
      .find(b => b.getLocation() === DockLocation.BOTTOM)!
      .getChildren()
      .slice(-1)[0]
      .getId();
  )
);

which works, but only if no other tab in the same border is selected. If that is the case, the first action (addNode) will add and select the new tab and the other action (selectTab) will deselect the new tab. Is this intended behaviour?

[N8th8n8el]

Found a workaround in case this is intended behaviour:

model.doAction(
  Actions.addNode(
    {
      type: "tab",
      enableClose: true,
      name: "MyName",
      component: "MyComponent"
    },
    model
      .getBorderSet()
      .getBorders()
      .find(b => b.getLocation() === DockLocation.BOTTOM)
      .getId(),
    DockLocation.BOTTOM,
    -1
  )
);

// If a tab in the same border is visible,
// selectTab causes the new tab to hide
const shouldSelectNewTab = !model
  .getBorderSet()
  .getBorders()
  .find(b => b.getLocation() === DockLocation.BOTTOM)!
  .getChildren()
  .map(c => c.isVisible())
  .includes(true);

if (shouldSelectNewTab) {
  model.doAction(
    Actions.selectTab(
      model
        .getBorderSet()
        .getBorders()
        .find(b => b.getLocation() === DockLocation.BOTTOM)!
        .getChildren()
        .slice(-1)[0] // Get last children === new tab
        .getId();
    )
  );
}

[spider58]

@N8th8n8el thank you :)