Custom UI multiple entry points with same resource

Forge
1

Hi,
When trying to move our connect app to forge with custom UI, we see some challenges. We have a use case wherein:

  1. The connect descriptor has multiple pages (admin pages/dashboard gadgets/issue panels/general pages) being served by the same code base. That too we have multiple of them. The routing happens based on the url path that is configured in the descriptor.
  2. The url also has query params to be able to make some logic based decisions. We referred to the below link when creating the connect app:

Moving to forge, I see that the path to the resource ends at the build folder which is essentially good for serving only one module. I saw a suggestion to use context but that would only help me serving one page per module (e.g. one dashboard gadget, one general page etc..)

Here is a smaller version of the descriptor which we would like to support in forge:

{
“modules”: {
“webSections”: [
{
“key”: “custom-web-section”,
“location”: “admin_plugins_menu”,
“name”: {
“value”: “Admin Section for app”
}
}
],
“adminPages”: [
{
“url”: “/admin1”,
“name”: {
“value”: “Admin 1”
},
“key”: “admin1-settings”,
“location”: “admin_plugins_menu/custom-web-section”
},
{
“url”: “/admin2”,
“name”: {
“value”: “Admin 2”
},
“key”: “admin2-settings”,
“location”: “admin_plugins_menu/custom-web-section”
}
],
“jiraIssueTabPanels”: [
{
“url”: “/panel1”,
“weight”: 101,
“name”: {
“value”: “Panel 1”
},
“key”: “panel1”
},
{
“url”: “/panel2”,
“weight”: 101,
“name”: {
“value”: “Panel 2”
},
“key”: “panel2”
}
],
“jiraDashboardItems”: [
{
“description”: {
“value”: “Module1”
},
“url”: “/module1?dashboardItemId={dashboardItem.id}&dashboardId={dashboard.id}&view={dashboardItem.viewType}”,
“configurable”: true,
“name”: {
“value”: “Module 1”
},
“key”: “module1-dashboard-item-key”
},
{
“description”: {
“value”: “Module2”
},
“url”: “/module2?dashboardItemId={dashboardItem.id}&dashboardId={dashboard.id}&view={dashboardItem.viewType}”,
“configurable”: true,
“name”: {
“value”: “Module 2”
},
“key”: “module2-dashboard-item-key”
}
],
“generalPages”: [
{
“key”: “page1”,
“location”: “system.top.navigation.bar”,
“name”: {
“value”: “Page1”
},
“url”: “/page1/?atReportId={ac.atReportId}&fields={ac.fields}&viewType={ac.viewType}”,
“conditions”: [
{
“condition”: “user_is_logged_in”
}
]
},
{
“key”: “page2”,
“location”: “system.top.navigation.bar”,
“name”: {
“value”: “Page2”
},
“url”: “/page2/?atReportId={ac.atReportId}&fields={ac.fields}&viewType={ac.viewType}”,
“conditions”: [
{
“condition”: “user_is_logged_in”
}
]
}
]
}
}

Has anyone faced similar challenges and happened to solve them?

2

Hi!
I’ve used the context and module key, in order to have the same app load different parts.

Here is a snippet of what I mean (this is vue.js code, but the idea works on any framework):

<script setup>
import { ref, onMounted } from 'vue'
import { view } from '@forge/bridge'

const app = ref('Spinner')

onMounted(async () => {
    const context = await view.getContext()
    if (context.moduleKey === 'foo') {
        return (app.value = 'Foo')
    }
    if (context.moduleKey === 'bar') {
        return (app.value = 'Bar')
    }
    if (context.moduleKey === 'Baz') {
        return (app.value = 'Baz')
    }
})
</script>

<template>
    <component :is="app"></component>
</template>

The context.moduleKey value comes from your manifest.yml and the module.key that is being loaded.

Hope it helps!
Martín.