How to build a dynamic form in MacroConfig panel?

Forge Forge Custom UI and UI kit (beta)
,
#1

Hi,

Could you give me an example how to build a dynamic Form in MacroConfig panel component?
On the “example apps” page, i saw only static forms and the examples use old version of UI components like ConfigForm.

Scenario:
Step 1: In MacroConfig panel, the user select a Jira project in a select field
Step 2: Depend of value selected on step 1, the user select a issue type (eg: Requirement) in a second select field.

I don’t know how do ‘depend of a previous value’
Bonus: How to display the second field only if the first one is filled ?

Draft code:

import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, Macro, Form, MacroConfig, Select, useProductContext, useState } from '@forge/ui';

// Get list of Jira Project
const fetchProjects = async () => {
  const response = await api.asUser().requestJira("/rest/api/3/project");
  if (!response.ok) {
    return "Error to get Jira projet list";
  }
  return await response.json();
};

// Get list of Jira issue type depend of Jira Project
const fetchIssueTypes = async (projectIdOrKey: string) => {
  const response = await api.asUser().requestJira("/rest/api/3/project/${projectIdOrKey}");
  if (!response.ok) {
    return "Error to get Jira issue type list";
  }
  return await response.json();
};


const App = () => {
  const [ projects ] = useState(fetchProjects);
  const [ issueTypes ] = useState(fetchIssueTypes);

  return (
    <MacroConfig>
      <Select label="Project" name="projectKey">
        {projects.map(project => {
          return (
            <Option
              label={`${project.name} (${project.key})`}
              value={project.key} />
          )
        })}
      </Select>
      <Select label="Issue type" name="issueTypeId">
        {issueTypes.map(issueType => {
          return (
            <Option label={issueType.name} value={issueType.id} />
          )
        })}
      </Select>
    </MacroConfig>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

Thx

#2

Hi @ThibautFAURE,

Have you tried using the useConfig hook? This should give you the ability to update the form according to the values that have been already filled.

1 Like