# Jira-dashboard have one component for both view and edit

**URL:** <https://community.developer.atlassian.com/t/jira-dashboard-have-one-component-for-both-view-and-edit/85028>\
**Category:** Forge\
**Tags:** jira-dashboard\
**Created:** [October 7, 2024, 2:55pm UTC](https://community.developer.atlassian.com/t/jira-dashboard-have-one-component-for-both-view-and-edit/85028 "2024-10-07T14:55:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AhmedPan](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@AhmedPan](https://community.developer.atlassian.com/u/AhmedPan)\
**Post date:** [October 7, 2024, 2:55pm UTC](https://community.developer.atlassian.com/t/jira-dashboard-have-one-component-for-both-view-and-edit/85028/1 "2024-10-07T14:55:59Z")

</div>

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.

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

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

```

manifest file:

```auto
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](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/3/a/3afafd4604cd7b1edcfbcf29b8cb120d9cbb5083.png)

Regards,

---

<div class="post-metadata">

**Author:** ![AndreiPisklenov](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/andreipisklenov/32/52306_2.png) [@AndreiPisklenov](https://community.developer.atlassian.com/u/AndreiPisklenov)\
**Post date:** [October 7, 2024, 7:50pm UTC](https://community.developer.atlassian.com/t/jira-dashboard-have-one-component-for-both-view-and-edit/85028/2 "2024-10-07T19:50:50Z")

</div>

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.”

```auto
...
// 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_… 😅

---

<div class="post-metadata">

**Author:** ![AhmedPan](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@AhmedPan](https://community.developer.atlassian.com/u/AhmedPan)\
**Post date:** [October 8, 2024, 5:40pm UTC](https://community.developer.atlassian.com/t/jira-dashboard-have-one-component-for-both-view-and-edit/85028/3 "2024-10-08T17:40:37Z")

</div>

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

```auto
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>
  );
};

```

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

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

```