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 />}
/>
);
Thank you for your help. I tried using the ‘useConfig’ with a basic example. But i have a problem, the panel of MacroConfig isn’t displayed when i click on “edit” button".
I
Thank you @FranzBinder , i added information about config in manifest.yml and it’s work !
Goal
I’ve been trying to achieve my goal for several days:
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.
Problem:
I don’t know how to get value of selected field in step 1 dynamically.
My code is:
import ForgeUI, { useConfig, useEffect, render, Fragment, Text, Macro, Form, TextField, MacroConfig, Select, Option, useProductContext, useState } from '@forge/ui';
import api from "@forge/api";
// Get list of Jira Project
const fetchProjects = async () => {
const response = await api.asUser().requestJira("/rest/api/3/project");
console.log("Jira projet list - STATUS HTTP: "+ response.status);
if (!response.ok) {
return "Error to get Jira projet list" + response;
}
return await response.json();
};
// Get list of Jira issue type depend of Jira Project
const fetchIssueTypes = async (projectId: string) => {
const response = await api.asUser().requestJira("/rest/api/3/project/"+projectId);
console.log("Jira issue type - projectId: "+ projectId);
console.log("Jira issue type - STATUS HTTP: "+ response.status);
if (!response.ok) {
return "Error to get Jira issue type list" + response;
}
return await response.json();
};
const App = () => {
// Retrieve the configuration
const config = useConfig();
// Use the configuration values
return (
<Fragment>
<Text>Hello world!</Text>
</Fragment>
);
};
export const run = render(
<Macro app={<App />} />
);
// Function that defines the configuration UI
const Config = () => {
const [projects] = useState(fetchProjects);
const [issueTypes] = useState(fetchIssueTypes(10001)); // STATIC VALUE, I NEED A VALUE DEPEND OF SELECTED VALUE
return (
<MacroConfig>
<Select label="Project" name="projectKey">
{projects.map(project => {
return (
<Option label={`${project.name} (${project.key})`} value={project.Id} />
)
})
}
</Select>
<Select label="Issue Type" name="issueType">
{issueTypes.issueTypes.map(issueType => {
return (
<Option label={`${issueType.name}`} value={issueType.Id} />
)
})}
</Select>
</MacroConfig>
);
};
export const config = render(<Config />);
Currently my MacroConfig panel look like:
Becareful i put a static value of projectId (10001):
Hi @ThibautFAURE ,
I had a similar problem. I wanted to search for specific attachments on the current page or a specific page.
This source code works for my use case.