Add more than 1 Module in a Custom UI app

Forge
#1

Hi,
I was able to create an administrate page with the Custom UI. Amazing work by the Forge Team, I was able to create an app that store data from an interface in few hours.
However, I’ve some trouble when i want to add another module in the same app.
I’m not very keen in node.js environment (Forge is my first experience in this framework) so I don’t know what I’m doing wrong.
I tried to follow the suggested GitHub - facebook/create-react-app: Set up a modern web app by running one command. in the documentation, but I’m not able to run the new app after Its installation. In addiction to this, the skeleton of the new custom app has different structure then the one created by forge.
Could you suggest a simple way to add a new module in the same app for CustomUI projects?

Thank you very much,
Simone

#2

Hello @Folino,

Please, have a look at this: How to build several Custom UI components with one react app in static folder

Maybe it helps.

Regards,
Onuche

2 Likes
#3

Thank you very much, I will look at your solution :slight_smile:

1 Like
#4

As of today (02/04/2021), with the newest version of @forge/bridge, we can easily archive this.
Short description: Just define the same resource for your modules. And render the content of React app based on where the app is running.

Here is my manifest.yml which shared just one resource and resolver for multi modules:

modules:
  jira:adminPage:
    - key: admin-page
      resource: custom-ui-resource
      resolver:
        function: custom-ui-resolver
      title: Admin Page Jira Cloud
  jira:issuePanel:
    - key: issue-panel
      resource: custom-ui-resource
      resolver:
        function: custom-ui-resolver
      title: Issue Panel

This is my top App.js in my React app:

import React, { useEffect, useState } from 'react';
import { view } from '@forge/bridge';

function App() {
  const [context, setContext] = useState({});
  const [isDetectingContext, setDetectingContext] = useState(true);

  useEffect(() => {
    setDetectingContext(true);

    // Use the "view" from Forge Bridge to get the context
    // where this React app is running
    view.getContext()
      .then(setContext)
      .finally(() => setDetectingContext(false));
  }, []);

  if (isDetectingContext) {
    return <div>Detecting context...</div>;
  }

  // Detect the module which calling this React app,
  // and render the content for that
  switch (context.moduleKey) {
    case 'admin-page':
      // Render and "AdminPage" if we are in module "admin-page"
      return <AdminPage />;
    case 'issue-panel':
      // Render and "IssuePanel" if we are in module "issue-panel"
      return <IssuePanel />;
    default:
      return <div>Cannot Detect Context</div>;
  }
}

export default App;

The code and comments tell everything. I hope it help.

1 Like