Velocity templates: actions vs customized custom-fields

Hi everybody.
Maybe my question could be very silly but I’d like to know if the samevelocity template can be used both for an action and to create a my own customfield with no differences.
iI’m asking this because I did a mytemplate.vm file into wich I inserted a part where vuetify stuffs are defined (I’m using CDN directives) and the related javascript part; then I’m using this template for an action (it’s working).
Then I tried to create a my own customfield using the same template file but I get the “Uncaught ReferenceError: Vue is not defined”:
Surely I’m missing something about how Velocity works.

Thanks in advance

Are you requiring the web resources for your Javascript and it’s dependencies in your action (probabaly using pageBuilderSerivice) or are you requiring them in the velocity template itself?

Could you add some details about how you are loading the resources?

Hello,
thanks for your reply.
I’m not using web resources and I’m including them in the template.
I did some tests to better define where the problem is, and it’s not easy to describe here but I’ll try.

Phase #1
I created a testvue.vm file where I wrote exactly the source code of the “Vuetify chips closable” example here Chip component — Vuetify
My file was:

#disable_html_escaping()
#controlHeader ($action $issueKey $customField.id $customField.name $fieldLayoutItem.required $noHeader)
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

        <title>Test Vuetify</title>
        <meta name="decorator" content="atl.admin">
    </head>
<body>
<br />

// write here exactly the HTML source code of closable chips in codepen

</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
// note that I should use only the first two of all these includes but I put all those I nead in my real case

<script>
// write here exactly the JS source code of closable chips in codepen
</script>
#controlFooter ($action $fieldLayoutItem.fieldDescription $displayParameters.noHeader)

Using the same file both for the action and for the customfield template, it works like a charm.
But this happens in an ideal world :slight_smile:

Phase #2
I put my real .vm template: it has a Treeview component with draggable elements and its structure is the same before but with different elements.
After having fixed the error:
Uncaught Unable to find either an issueId or projectId to submit the attachment to.
related to https://jira.atlassian.com/browse/JRASERVER-42108 ,
the action was working with no errors on browser console, but the rendering of the customfield issued:

[Vue warn]: Unknown custom element: <draggable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

SO I fixed it and now it’s working even if with the error
Uncaught TypeError: Failed to execute 'setDragImage' on 'DataTransfer': parameter 1 is not of type 'Element'.
when I drag a component.

So it’s clear that the vm file is not managed at the same way since the actions doesn’t give to me any error.
Anyway, are there any tutorials on how better integrate Vue components with Jira interface maybe usind .vue files ?

I am not aware of a tutorial specific to Vue, but if you have access to Jira source code - you can find some example in a plugin called jira-quicksearch-plugin.
Although I doubt it will help with this specific error which seems to be related to your drag and drop implementation.

Oh yes, thanks. I noticed there is this plugin in source code and I’ve in accout to study it.