How to combine UI kit and Custom UI togather?

Forge Forge UI Kit and Custom UI
1

Hi everyone! Hope you guys are doing great.

I’m new to Forge, so sorry if my question is nooby. I tried to find my answer through docs and QA here but I didn’t find my answer.

right now I got the grasp of how to create a Forge app with different templates. but my question is how can I build app that uses both templates in one repo with different Modules?

I want to build a Issue-Panel with Custom UI ( because it needs a rich UI ) and also for this app I need some Issue-Custom-Field to display some sort of data, so I need to build a Jira-Issue-Panel with UI Kit

is there way to put all of this in single repo with single CRA ? or if there isn’t any way, what solution do you suggest? what is the best way to achieve this architecture?

2 Likes
2

Hi @Shahryar ,
You can definitely do this in a single repo. The easiest way I found is to start with the basic CustomUI template and then add the UI Kit extension.

The reason this approach is simpler is that the basic example sets up most of the parts you’ll need (example CustomUI React app and the server index.js file where you can install your UI Kit components. Starting from the basic CustomUI example you can then simply add the UI Kit elements to your manifest just as you would if you followed the UI Kit getting started.

Here’s an example manifest that includes a CustomUI issuePanel and a couple UI Kit custom fields. Note, I have reorganized the name and path to the CustomUI components from what was autogenerated to something that makes more sense in my app.

modules:
  jira:issuePanel:
    - key: my-issue-panel
      resource: issuePanelUIbundle
      resolver:
        function: issuePanelResolver
      viewportSize: large
      title: proof of concept demo
      icon: https://developer.atlassian.com/platform/forge/images/issue-panel-icon.svg
  jira:customField:
    - key: issue-progress
      name: Issue progress
      description: The progress of the issue, on a scale from 0 to 100.
      type: string
      issueProperty:
        key: issueProgressField
       validation:
         expression: value == null || (value >= 0 && value <= 100)
         errorMessage: The value must be a number between 0 and 100.
      readOnly: false
      function: renderIssueProgress
      edit:
        function: editIssueProgress      
    - key: custom-issue-tags
      name: Custom issue tags
      description: Special custom issue tags
      type: string
      collection: list
      issueProperty:
        key: issueTagsField
      readOnly: false
  function:
    - key: issuePanelResolver
      handler: index.issuePanelHandler
    - key: renderIssueProgress
      handler: index.renderIssueProgress
    - key: editIssueProgress
      handler: index.editIssueProgress
    - key: renderIssueTags
      handler: index.renderIssueTags
    - key: editIssueTags
      handler: index.editIssueTags
resources:
  - key: issuePanelUIbundle
    path: static/poc/build
app:
  id: <your autogenerated app id here>
  name:poc
permissions:
  scopes:
    - read:me
    - storage:app
    - read:jira-work
    - write:jira-work
  content:
    styles:
      - 'unsafe-inline'
  external:
    images:
      - 'https://www.w3schools.com'

Good luck!

6 Likes