<html> tag breaks jira format

Hi all,
When I add tag into velocity template it breaks the jira format I could not find where is the problem. Can anyone find this?

This is velocity template

<!DOCTYPE html>
<head>
    <title>Test Management</title>
    $webResourceManager.requireResourcesForContext("aresPlugin-resources") <!-- Include CSS and JS -->
</head>
<body>
<div class="mod-header">
    <table>
        <thead>
        <tr>
            <th>Case Name</th>
            <th>Created By</th>
            <th>Test Result</th>
        </tr>
        </thead>
        <tbody>
            #foreach( $item in $result )
                #foreach( $case in $item.cases )
                <tr>
                    <td>$case.name</td>
                    <td>$item.createdBy</td>
                    <td>$case.testResult</td>
                    <td><a href="https://ares.trendyol.com/test-management/sprints">See in ares</a></td>
                </tr>
                #end
            #end
        </tbody>
    </table>
</div>
</body>
</html>

And this my atlassian-plugin.xml

<?xml version="1.0" encoding="UTF-8"?>

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2"> 
  <plugin-info> 
    <description>${project.description}</description>  
    <version>${project.version}</version>  
    <vendor name="${project.organization.name}" url="${project.organization.url}"/>  
    <param name="plugin-icon">images/pluginIcon.png</param>  
    <param name="plugin-logo">images/pluginLogo.png</param> 
  </plugin-info>  
  <!-- add our i18n resource -->  
  <resource type="i18n" name="i18n" location="aresPlugin"/>  
  <!-- add our web resources -->  
  <web-resource key="aresPlugin-resources" name="aresPlugin Web Resources"> 
    <dependency>com.atlassian.auiplugin:ajs</dependency>  
    <resource type="download" name="aresPlugin.css" location="/css/aresPlugin.css"/>  
    <resource type="download" name="aresPlugin.js" location="/js/aresPlugin.js"/>  
    <resource type="download" name="images/" location="/images"/>  
    <context>aresPlugin</context>
  </web-resource>

  <web-panel name="TestManagement"
             i18n-name-key="test-management.name"
             key="test-management"
             location="atl.jira.view.issue.left.context"
             weight="1000">
    <description key="test-management.description">Ares Test Management Plugin</description>
    <context-provider class="com.trendyol.aresPlugin.impl.TestManagement"/>
    <resource type="download" name="aresPlugin.css" location="/css/aresPlugin.css"/>
    <resource name="view" type="velocity" location="templates/aresTestManagementPlugin.vm"/>
  </web-panel>

</atlassian-plugin>

You can see the image for what I want to tell about broken format.

And this is fixed code when I leave only


<div class="mod-header">
    <table>
        <thead>
        <tr>
            <th>Case Name</th>
            <th>Created By</th>
            <th>Test Result</th>
        </tr>
        </thead>
        <tbody>
            #foreach( $item in $result )
                #foreach( $case in $item.cases )
                <tr>
                    <td>$case.name</td>
                    <td>$item.createdBy</td>
                    <td>$case.testResult</td>
                    <td><a href="https://ares.trendyol.com/test-management/sprints">See in ares</a></td>
                </tr>
                #end
            #end
        </tbody>
    </table>
</div>

I would avoid the doctype. And only use <html>

This might help

1 Like

Even though I delete doctype, it still breaks the view. just adding tag is enough to break the view. I actually wonder why :slight_smile:

Do you know which decoration should I use ? I tried below separately without DOCTYPE and they did not work

   <meta name="decorator" content="atl.admin">
   <meta name="decorator" content="atl.jira">
   <meta name="decorator" content="atl.jira.view.issue">

I actually just add a “section” to issue page like below. Am I doing correctly?

You can probably try something like this:

$webResourceManager.requireResourcesForContext("aresPlugin-resources") 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test Management</title>
</head>
<body>
   ...

I never rendered a web panel myself, but as I can see from the docs you should not use <html> and <body> at all. Simply do your <div>foo</div> and that’s it. You also do not need a decorator. And if you need JS/CSS do it as Paolo mentioned :slight_smile:

https://developer.atlassian.com/server/framework/atlassian-sdk/web-panel-renderer-plugin-module/

https://developer.atlassian.com/server/framework/atlassian-sdk/web-panel-plugin-module/

What often helps me is:
(1) download jira source code from my.atlassian.com
(2) unpack it and grep the code for web-panel
(3) Look at templates of web-panel entries

I hope you get it solved.