Jira-dashboard have one component for both view and edit

I have an app that display a table I build by calling third-party REST API. There is nothing for user to configure. I used below code to show the View component for both view and edit mode.

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

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

manifest file:

modules:
  jira:dashboardGadget:
    - key: ....-jira-dashboard-gadget-ui-kit-2-hello-world-gadget
      title: ....
      description: ....
      thumbnail: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
      resource: main-resource
      render: native
      resolver:
        function: resolver
      edit:
        resource: main-resource
        render: native
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main-resource
    path: src/frontend/index.jsx
app:
  runtime:
    name: nodejs20.x
  id: ari:cloud:ecosystem::app/a580b.....
permissions:
  scopes:
    - read:jira-work
  external:
    fetch:
      backend:
        - mydomain.teamsupport.com

When the Jira dashboard is not in edit mode I get below message.
image

Regards,

Yeah, it’s far from transparent, but you have to set at least a minimal configuration the first time you hit “Edit” — otherwise, your gadget won’t even think about loading in “View.”

...
// show on "Edit" only:
const saveClickHandler = async () => {
  await view.submit({ refresh: 15 });
}
...
some Button with onClick handler

How do I know this? Let’s just say I’ve been there… :sweat_smile:

Thanks, @AndreiPisklenov! Below is what I did and it worked.

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

  const configureGadget = (data) => {
    view.submit(data);
  };
  setTimeout(configureGadget({ test: true }), 100);

  return (
    <Form onSubmit={handleSubmit(configureGadget)}>
    </Form>
  );
};
const App = () => {
  const context = useProductContext();
  if (!context) {
    return "Loading...";
  }

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