Is it possible to pass a value back from an Atlassian Forge resolver to a Vue custom UI component?

I have a custom Atlassian Forge resolver and Vue Custom UI setup

import Resolver from '@forge/resolver'

const resolver = new Resolver()

resolver.define('getIssueKey', ({context}) => {
    const jiraKey = context.extension.issue.key
    console.info(`Returning jira key ${jiraKey}`)
    return jiraKey
})

export const handler = resolver.getDefinitions()

My Vue Custom UI is calling the resolver

<script lang='ts'>
import { defineComponent } from 'vue'
import { invoke } from '@forge/bridge'    

export default defineComponent({
    mounted() {
        var jiraKey = 'Retrieving jira key' as any
        invoke('getIssueKey').then((data) => {
            console.info('Success')
            jiraKey = data
        }).catch(() => jiraKey = 'Error retrieving jira key')
    }
})

Although the resolver log shows "Returning jira key ESP-343", the promise callbacks are not triggered. No further logs are seen.

Is there a coding error I'm missing, or does a Forge custom UI have to be written in React?

Answer №1

Thanks to some guidance from Atlassian, I was able to identify the issue. It turns out that the custom UI logs are not displayed in the tunnel and need to be viewed in the browser. By gaining visibility into the logs, I successfully debugged my code (not the code provided above, which is functioning correctly).

For more information, visit the Atlassian discussion thread here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding or removing items from the reactive source in a v-list with Vuetify causes the list to collapse

I'm experiencing an issue with reactivity in my Vuetify and Meteor.js setup. Whenever the number of items in a sub-group changes, the entire list collapses, which is quite frustrating since I have to navigate back through multiple levels to get to the ...

What is the best way to showcase information from an external API in react js?

As I develop my new app, I am integrating API data from . This feature will enable users to search for their favorite cocktail drinks and display the drink name fetched from the API on the page. However, I am encountering an error that says "Uncaught TypeE ...

pure-react-carousel: every slide is in view

Issue I am encountering a problem where the non-active slides in my container are not being hidden properly. This results in all of the slides being visible when only one should be displayed. Additionally, some slides are rendering outside of the designate ...

Using TypeScript to Verify the Existence of Words in a String

Is there a way in typescript to find specific words within a given string? For example: If we have a list: ['Mr', 'Mrs', 'FM.', 'Sir'] and a string named 'Sir FM. Sam Manekshaw'. The words 'Sir' ...

Instructions for sketching a square at predetermined coordinates

Looking for a simple function to draw a box at specific coordinates x and y. I've searched for guides, but they all seem to provide excessive or insufficient information. Thanks in advance! ...

JQuery horizontal navbar hover animations

Looking to design a simple navigation bar that displays a submenu when hovering over a link. The issue I'm facing is that the submenu disappears when moving from the link to the submenu itself, which is not the desired behavior. How can this be fixed ...

The function $(...) does not recognize tablesorter

Currently, I am encountering issues with the tablesorter plugin as my system is unable to recognize the existing function. It is unclear whether there might be a conflict with other JavaScript files, especially since I am implementing changes within a Word ...

AJAX Form Submission for CommentingAJAX allows for seamless form submission

Currently facing an issue with a form submission that is not displaying comments without refreshing the page. When the submit button is clicked, it redirects to the top of the page without executing any actions - no insertion into the database and subseque ...

Displaying content using asynchronous JavaScript and XML (AJAX

I'm currently working on implementing an infinite scroll feature, where more content is loaded as the user reaches the bottom of the page. I am making an ajax call and attempting to render a new view on the backend before sending it back to the fronte ...

Customize your Material-UI theme with a unique hover effect for contained buttons

Currently, I am in the process of setting up a theme for Material-Ui on my React application. Within the app, there are two types of buttons that I utilize - contained and outlined. The issue lies with the hover effect on the contained button (while the ou ...

How can we efficiently load and display all images from a directory using Node.js and JavaScript?

My strategy involves reading all image file names from a specific directory and passing them as an array to the front-end JavaScript. The front-end script then iterates through the array to dynamically create image elements. Step 1: node const path = requ ...

Leveraging Vue.js's capabilities with an external setup file

Is it feasible for a Vue App to access an external configuration file? I envision a setup where I deploy the application along with the config file; then, I should be able to modify the configuration in the external file without needing to rebuild the enti ...

Issue arises when the value becomes nonexistent following the execution of a

Having an issue with my code where I have one class with a function in it, and another class that imports the first class to use that function. However, after the function is executed, I am not getting the expected value. First class: export class MoveE ...

Guide on implementing a personalized 'editComponent' feature in material-table

I'm currently integrating 'material-table' into my project. In the 'icon' column, I have icon names that I want to be able to change by selecting them from an external dialog. However, I am encountering issues when trying to update ...

Determine if the browser displays <select multiple> as a modal dialog

Is it possible to use JavaScript to detect whether a specific browser displays a focused <select multiple> element as a popup or strictly as an inline box? On certain platforms, like the Android Browser and iOS Safari, the appearance of a popup can ...

Unable to obtain return value in AngularJS controller or view

I have been working on a geolocation and reverse geocoding application. I have a function that is triggered by a button click to call a function in my controller which then calls my service. While the service is able to retrieve values, I am unable to get ...

What steps are involved in setting up a project using Vue 3 alongside Storybook and PrimeVue?

I am trying to utilize primevue components in my stories, but I am facing some challenges. Currently, I am working with the latest versions of storybook, primevue, vite, and vue, all while incorporating Typescript. Below is an example of a component I am ...

What is the best way to determine if a JSON response value contains a hyphen '-' in Java Script?

When I receive a JSON response, I sometimes encounter values with hyphens. In JavaScript, the hyphen '-' is treated as a subtraction operator. JSON books": { "red": "2008-17801", "blue": "TERTERIAN-HAYK" } After obtaining these values, I store ...

Encountering an issue while attempting to access a JSON file using the fetch method

When attempting to read a json file locally, I encountered an error that looks like this: Fetch API cannot load file:///var/www/desktop-electron//dashboard/bnb.json. URL scheme "file" is not supported Below is the code snippet being used: fetch(`${drr}/ ...

Dropzone ceased functioning following the transition from version "4.2.0" to "5.7.0" while utilizing jquery version "3.3.1"

Currently, I am loading my libraries in the following way: <link href="~/lib/dropzone/dropzone.min.css" rel="stylesheet" /> <script src="~/lib/dropzone/dropzone.min.js"></script> <script src="~/Scripts/jquery-3.3.1.min.js"></sc ...