How to use a single custom ui on multiple modules

I wanna use a single custom UI on multiple modules.

For example

modules:
  jira:adminPage:
    - key: hello-world-admin-page
      resource: main
      resolver:
        function: resolver
      title: Admin Page
  jira:projectPage:
    - key: hello-world-project-page
      resource: main
      resolver:
        function: project-resolver
      title: Project Page
resources:
  - key: main
    path: static/hello-world/build
    tunnel:
      port: 3000

Therefore, I want to render different screens depending on the module using one Custom UI. Is it possible? Or do I need to create a custom UI for each module if I need a screen?

I look forward to hearing from you.

Thank you.

Hi @DavidLee

Thanks for reaching out.

If your screen can be the same between modules, then you could just have a single Custom UI entry, shared between them.
But you will have to have a separate entry for each module if you want them to render differently.

However, you could maybe use a common codebase and during your build step, separate the build output between say:

  • static/hello-world/build/adminPage
  • static/hello-world/build/projectPage

Your manifest could then be:

resources:
  - key: main-admin
    path: static/hello-world/build/adminPage
  - key: main-project
    path: static/hello-world/build/projectPage

Hope this helps.

@XavierCaron Thank you for your quick response.

I’ll do it in the way you suggested.

Thank you.

I’ve been googling for a while.

My react directory structure is :

├─public
│      index.html
│      
└─src
      │ index.js
      │  
      ├─admin
      │      AdminPage01.css
      │      AdminPage01.js
      │      AdminPage02.js
      │      permission.json
      │      
      └─project
             project.js

Do you mean to build the admin folder and project folder separately and specify the path?
But when I searched it, it didn’t come out well, is there any place I can refer to?

I’m sorry to ask you again.