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