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.
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.
#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
[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.
