Creating tabs to nest inside Macro with Forge

Forge
1

I am trying to create tabs that can be edited within a Macro. Exactly this > Tabs (atlassian.com)
but with the ability to edit it dynamically in a macro; instead of hard-code it.
More like this behaviour: Form (atlassian.com)

import ForgeUI, { render, Fragment, Macro, MacroConfig, TextField, Text, Tabs, Tab } from '@forge/ui';

// set default value for a new tab
const defaultConfig = {
  tabname: "Tab 1",
  tabcontent: "default"
  
};

// defines the config ui
const Config = () => {
  return (
    <MacroConfig>
      <TextField name="name" label="Tab Name" defaultValue={defaultConfig.tabname} />
      <TextField name="content" label="Tab Content" defaultValue={defaultConfig.tabcontent} />     
    </MacroConfig>
  );
};

const App = () => {
  return (

    
    <Fragment>
      <Text>Hello world!</Text>
        <Tabs>
          <Tab label="Tab 1">
              <Text>Hello</Text>
          </Tab>
          <Tab label="Tab 2">
              <Text>World!</Text>
          </Tab>
        </Tabs>
    </Fragment>

  );
};
  // render
  export const run = render(<Macro app={<App />} />);(<Config />);(<defaultConfig />);
1 Like
2

Hi there,

you could dynamically render your tabs almost like you would in react:

const yourTabObject = [
  {label: "Tab 1", content="Tab 1 Hello World"},
  {label: "Tab 2", content" "Tab 2 Hellow World"}
]

<Fragment>
  <Text>Hello World!</Text>
    <Tabs>
      {yourTabObject.map((singleTab) => (
        <Tab label={singleTab.label}>
          <Text>{singleTab.content}</Text>
        </Tab>
      ))}
    </Tabs>
</Fragment>

This is just an example, of course “yourTabObject” should be dynamically filled.

Regards,
Adrian

2 Likes