How to combine UI kit and Custom UI togather?

Forge Forge UI Kit and Custom UI
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