Want to insert a select list column inside a table in UI Kit macro

Confluence Development
, ,
1

Need help in developing a macro in which I want to insert a select list in a column of a table by Forge. Is there any solution/workaround to achieve this?
Here is the code which I tried but this is giving me empty result.

import ForgeUI, { useConfig, render, Macro, Text, useProductContext, Table, Head, Cell, Row, Fragment, MacroConfig, Select, Option } from "@forge/ui";

const issues =
[
  {
    Jira: '',
    owner:'The document author',
    contributors: 'The collaborators of the document',
    Technical : 'Yes or No'
  }
]

const Fig = () => {
  const config = useConfig() || defaultConfig;
  return (
    <Text> Client Impact:  {config.milestone}
    </Text>
    
  )
};

const Config = () => {
  return (
    <Fragment>
  <MacroConfig>
    <Select label="Client Impact" name="milestone">
    
    <Option defaultSelected label="None" value="None" />
<Option label="RS2SP" value="RS2SP" />
</Select>
    </MacroConfig>
    </Fragment>
  )}
  export const config = render(<Config />);
  

  
const App = () => (

  
  <Table>
    <Head>
      <Cell>
        <Text>JIRA Number</Text>
      </Cell>
      <Cell>
        <Text>Document status</Text>
      </Cell>
      <Cell>
        <Text>Document owner</Text>
      </Cell>
      <Cell>
        <Text>Document contributors</Text>
      </Cell>
      <Cell>
        <Text>Technical Analysis Document Required?</Text>
      </Cell>
    </Head>
    
    {issues.map(issue => (
      <Row>
        <Cell>
          <Text>{issue.Jira}</Text>
        </Cell>
        <Cell>

<Text>{Fig.milestone}</Text>

        </Cell>
        <Cell>
          <Text>{issue.owner}</Text>
        </Cell>
        <Cell>
          <Text>{issue.contributors}</Text>
        </Cell>
        <Cell>
          <Text>{issue.Technical}</Text>
        </Cell>
      </Row>
    ))}

  </Table>

); 

export const run = render(
  <Macro
    app={<App />}
  />
);
const ExportIt = () => {
  const productContext = useProductContext();
  console.log("product context ", productContext);
   return (<Text>Table will not be exported</Text>);
};

export const exportMacro = render(<ExportIt />);

Attached is the screenshot of output.
image

Thanks
Asha

3

Hi @AshaGoyal

From your code above it looks like you’re using UI Kit 1 to build your app (also known as UI Kit in our documentation). UI Kit 1 does not have a Select Component, so you can’t use it within a table cell.

That being said, UI Kit 2 does have a Select component and you can use this within your table - so perhaps building a UI Kit 2 app is the answer (you can’t use UI kit 2 components in UI kit apps).

Here’s a sample app I created which I’ve tested:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Row, Select, Option, Head, Cell, Table, Text } from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {

  return (
    <>
      <Text>Hello world!</Text>
      <Table>
        <Head>
          <Cell>JIRA Number</Cell>
          <Cell>Document Status</Cell>
        </Head>
        <Row>
          <Cell><Text>A jira issue</Text></Cell>
          
          <Cell>      <Select
            label="With a defaultSelected"
            name="milestone"
            onChange={({ label, value }) => console.log(label, value)}
          >
            <Option defaultSelected label="Milestone 1" value="one" />
            <Option label="Milestone 2" value="two" />
            <Option label="Milestone 3" value="three" />
      </Select></Cell>
        </Row>
        <Row>
          <Cell><Text>Another jira issue</Text></Cell>
          
          <Cell>      <Select
            label="With a defaultSelected"
            name="milestone"
            onChange={({ label, value }) => console.log(label, value)}
          >
            <Option defaultSelected label="Milestone 1" value="one" />
            <Option label="Milestone 2" value="two" />
            <Option label="Milestone 3" value="three" />
      </Select></Cell>
        </Row>
      </Table>


    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

and here’s it working in my Confluence Cloud instance

Select in a table
Select in a table1862×982 56.5 KB

I hope this helps
Mel

(Edit - fixed Select which accidentally used markup)

2 Likes