Forge UI Kit 2, dashboardGadget

Forge Forge UI Kit and Custom UI
, ,
1

Hi,

is jira:dashboardGadget supported with UI Kit 2?
I managed to create the view, but I’m not able to make a edit view.
Is there an example somewhere?

1 Like
2

HI @AlessandroCombatti

I think you should be able to follow the same basic steps as for adding configuration for a Confluence Macro - have you had a look at this tutorial https://developer.atlassian.com/platform/forge/add-configuration-to-a-macro-with-ui-kit-2/ ?

3

Hi,
thanks for your reply

just tried and I get “Error rendering app - encountered unknown component MacroConfig.”

most results I get is using in the manifest
edit:
resource: edit
but then in edit mode I get a black screen

1 Like
4

Hey @AlessandroCombatti thanks for letting me know - I’m going to see if I can get to the bottom of this for you!

2 Likes
6

Hey @AlessandroCombatti , we are working on adding the template to the forge-cli until then you should be able to able to create edit view with ui-kit2 for dashboard gadget , for the edit view to be rendered with ui-kit2 you should specify renderer:native in manifest like:
modules:

  jira:dashboardGadget:
    - key: dashboard-gadget-ui-kit-2-hello-world-gadget
      title: dashboard-gadget-ui-kit-2
      description: A hello world dashboard gadget.
      thumbnail: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
      resource: main-resource
      render: native
      edit:
        resource: main-resource
        render: native
resources:
  - key: main-resource
    path: src/frontend/index.jsx
app:

also here is code inside src/frontend/index.jsx

import React from "react";
import ForgeReconciler, {
  Text,
  useProductContext,
  Textfield,
  Form,
  Button,
  FormSection,
  FormFooter,
  Label,
  RequiredAsterisk,
  useForm,
} from "@forge/react";
import { view } from "@forge/bridge";
const FIELD_NAME = "field-name";

export const Edit = () => {
  const { handleSubmit, register, getFieldId } = useForm();

  const configureGadget = (data) => {
    view.submit(data);
  };

  return (
    <Form onSubmit={handleSubmit(configureGadget)}>
      <FormSection>
        <Label labelFor={getFieldId(FIELD_NAME)}>
          Value
          <RequiredAsterisk />
        </Label>
        <Textfield {...register(FIELD_NAME, { required: true })} />
      </FormSection>
      <FormFooter>
        <Button appearance="primary" type="submit">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
};

const View = () => {
  const context = useProductContext();

  if (!context) {
    return "Loading...";
  }
  const {
    extension: { gadgetConfiguration },
  } = context;

  return <Text>Value: {gadgetConfiguration[FIELD_NAME]}</Text>;
};

const App = () => {
  const context = useProductContext();
  if (!context) {
    return "Loading...";
  }

  return context.extension.entryPoint === "edit" ? <Edit /> : <View />;
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
;```
hope it helps
3 Likes
7

Thank you very much!