Opening a new tab when clicked on a link in the same interface

Hi,

Please see the below interface

If you see in the left pane, there are three sections, Suites, Scripts and Cases. In every section, there are some hyperlinks. Also, if you see in the right pane, There are three tabs which I want to be dynamic. Every tab will render the data for 3 sections shown in the left pane but when clicked on any link in the subsequent section. It means, initially there will not be any data in the tabs. Now requirements are as follows:-

1. If user clicks on any of the link in the suites section, I want to open a grid in Tab 1 which can show the data from db.

2. If user clicks on any of the link in the scripts section, I want to open a grid in Tab 2 which can show the data from db.

3. If user clicks on any of the link in the scripts section, I want to open a grid in Tab 3 which can show the data from db.

Can you pls help in achieving this functionality ?

Below is the code for the same interface.

a!localVariables(
  local!suites: rule!BTFU_GetDataSUI_ER(),
  local!scripts: (
    a!localVariables(
      local!suites:
      a!toJson(
        a!queryEntity(
          entity: cons!BTFU_GetScriptsFileList_SUI,
          query: a!query(
            pagingInfo: a!pagingInfo(
              startIndex: 1,
              batchSize: - 1,
              sort: a!sortInfo(field: "id", ascending: true())
            )
          )

        ).data),

        a!fromJson(local!suites) 
    )
  ),
  
  local!cases: (
    a!localVariables(
      local!suites:
      a!toJson(
        a!queryEntity(
          entity: cons!BTFU_GetCasesFileList,
          query: a!query(
            pagingInfo: a!pagingInfo(
              startIndex: 1,
              batchSize: - 1,
              sort: a!sortInfo(field: "id", ascending: true())
            )
          )

        ).data),

        a!fromJson(local!suites) 
    )
  ),
  {
    a!sectionLayout(
      labelSize: "LARGE_PLUS",
      labelColor: "SECONDARY",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Project Name:",
                  labelPosition: "ADJACENT",
                  value: "FinanceSystems",
                  saveInto: {},
                  refreshAfter: "UNFOCUS",
                  readOnly: true,
                  disabled: true,
                  masked: false,
                  validations: {}
                ),
                a!boxLayout(
                  label: "Suites",
                  contents: {
                    a!forEach(
                      items: a!fromJson(a!toJson(local!suites)),
                      expression: {
                        a!linkField(
                          links: a!safeLink(label: fv!item.SuiteFileName, uri: fv!item.link)
                        )
                      }
                    )
                  },
                  style: "STANDARD",
                  isCollapsible: true,
                  isInitiallyCollapsed: true,
                  marginBelow: "STANDARD"
                ),
                a!boxLayout(
                  label: "Scripts",
                  contents: {
                    a!forEach(
                      items: a!fromJson(a!toJson(local!scripts)),
                      expression: {
                        a!linkField(
                          links: a!safeLink(label: fv!item.name, uri: fv!item.link)
                        )
                      }
                    )
                  },
                  style: "STANDARD",
                  isCollapsible: true,
                  isInitiallyCollapsed: true,
                  marginBelow: "STANDARD"
                ),
                a!boxLayout(
                  label: "Cases",
                  contents: {
                    a!forEach(
                      items: a!fromJson(a!toJson(local!cases)),
                      expression: {
                        a!linkField(
                          links: a!safeLink(label: fv!item.name, uri: fv!item.link)
                        )
                      }
                    )
                    
                  },
                  style: "STANDARD",
                  isCollapsible: true,
                  isInitiallyCollapsed: true,
                  marginBelow: "STANDARD"
                )
              },
              width: "NARROW_PLUS"
            ),
            a!columnLayout(contents: {
  {
    /* If using this tab style in a headerContentLayout,              *
     * remove header, put expression below in the contents parameter, *
     * and set backgroundColor to transparent. Then, on the parent    *
     * cardLayout, set showBorder to false and showShadow to true.    */
    a!localVariables(
      local!tabs: { "Tab 1", "Tab 2", "Tab 3" },
      local!activeTab: 1,
      a!cardLayout(
        contents: {
          a!cardLayout(
            contents: {
              a!columnsLayout(
                columns: {
                  a!forEach(
                    local!tabs,
                    a!columnLayout(
                      contents: {
                        a!cardLayout(
                          contents: {
                            a!richTextDisplayField(
                              value: {
                                a!richTextItem(
                                  text: local!tabs[fv!index],
                                  color: if(
                                    fv!index = local!activeTab,
                                    "STANDARD",
                                    "ACCENT"
                                  ),
                                  size: "STANDARD",
                                  style: if(
                                    fv!index = local!activeTab,
                                    "STRONG",
                                    "PLAIN"
                                  )
                                )
                              },
                              align: "CENTER"
                            )
                          },
                          link: a!dynamicLink(
                            value: fv!index,
                            saveInto: local!activeTab
                          ),
                          padding: "LESS",
                          showBorder: false,
                          decorativeBarPosition: "BOTTOM",
                          decorativeBarColor: if(
                            fv!index = local!activeTab,
                            "ACCENT",
                            "#fff"
                          ),
                          accessibilityText: if(
                            fv!index = local!activeTab,
                            "Selected Tab.",
                            "Unselected Tab. Press enter to select tab."
                          )
                        )
                      },
                      width: "NARROW"
                    )
                  )
                },
                marginBelow: "NONE",
                spacing: "NONE"
              ),
              a!cardLayout(padding: "NONE")
            },
            padding: "NONE",
            showBorder: false
          ),
          a!cardLayout(
            contents: choose(
              local!activeTab,
              {
                /* Replace this rich text with the component or rule that should populate this tab */
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: a!richTextItem(
                    text: "The contents of the first tab would go here",
                    style: "EMPHASIS"
                  ),
                  align: "CENTER"
                )
              },
              {
                /* Replace this rich text with the component or rule that should populate this tab */
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: a!richTextItem(
                    text: "The contents of the second tab would go here",
                    style: "EMPHASIS"
                  ),
                  align: "CENTER"
                )
              },
              {
                /* Replace this rich text with the component or rule that should populate this tab */
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: a!richTextItem(
                    text: "The contents of the third tab would go here",
                    style: "EMPHASIS"
                  ),
                  align: "CENTER"
                )
              }
            ),
            padding: "EVEN_MORE",
            showBorder: false
          )
        },
        padding: "NONE"
      )
    )
  },
  {
    a!localVariables(
      local!selectedTab: 1,
      {
        {
          choose(
            local!selectedTab,
            {},
            {
              /* Replace this rich text with the component or rule that should populate this tab */
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {a!richTextItem(text: "The contents of the second tab would go here", style: "EMPHASIS")},
                align: "CENTER"
              )
            },
            {
              /* Replace this rich text with the component or rule that should populate this tab */
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {a!richTextItem(text: "The contents of the third tab would go here", style: "EMPHASIS")},
                align: "CENTER"
              )
            }
          )
        }
      }
    )
  }
}, width: "")
          }
        )
      },
      dividerWeight: "THICK",
      dividerColor: "#ff9900"
    )
  }
)