Hi, I’m working on my first plugin and creating a new web item and panel on a project view. Everything is functioning fine but the styling of the header is off from the Jira provided pages like Summary and Reports. Inspecting the HTML of the page shows that the main element that renders my web panel’s velocity template is missing the CSS class name the other pages have contains-header. I can’t figure out how this is being applied.
I’ve seen some information saying that it should get applied automatically when an element with the CSS class of aui-page-header is detected in the velocity template HTML, but that doesn’t seem to work. I’ve tried including various decorators like general, atl.general, and panel-general, but none of them achieved the desired effect.
The only difference between these two is the existence of the contains-header CSS class on the main element in the page where my panel template is rendered.
Hello @JoshuaPhillips,
Looking at
Do you have
$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")
at the top of your .vm file, for example
<html lang="en">
<head>
<title>My Page</title>
<meta name="decorator" content="atl.general">
$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")
</head>
<body>
<p>This is the page.</p>
</body>
</html>
The line
<meta name="decorator" content="atl.general">
is detailed in
James.
I tried your suggestion, but it did not have the desired result. The page still looks as it does in the image on my post. This is what the rendered HTML looks like with the change.
Hi @JoshuaPhillips,
How are you loading the page? What does the src/main/resources/atlassian-plugin.xml have?
For the example I provided, I have it loaded with a servlet
<servlet key="page-servlet" class="com.mycompany.servlet.PageServlet">
<url-pattern>/${atlassian.plugin.key}/mypage.page</url-pattern>
</servlet>
and (and an example)
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
Map<String, Object> context = new HashMap<>();
response.setContentType("text/html;charset=utf-8");
renderer.render("templates/mypage.vm", context, response.getWriter());
}
James.
I am using a Web Panel module as documented here
<web-item name="Taxonomy Web Item" i18n-name-key="taxonomy-web-item.name" key="taxonomy-web-item" section="jira.project.sidebar.plugins.navigation" weight="1000">
<description key="taxonomy-web-item.description">Taxonomy Web Item</description>
<label key="Taxonomy"/>
<link linkId="taxonomy-web-item-link">/projects/$pathEncodedProjectKey?selectedItem=com.atlassian.jira.jira-projects-plugin:taxonomy-page</link>
<tooltip key="taxonomy-web-item.tooltip"/>
<param name="iconClass" value="aui-icon aui-icon-large aui-iconfont-location"/>
</web-item>
<web-panel name="Taxonomy Web Panel" i18n-name-key="taxonomy-web-panel.name" key="taxonomy-web-panel" location="com.atlassian.jira.jira-projects-plugin:taxonomy-page" weight="1000">
<resource type="velocity" name="view" location="/templates/taxonomy/project-panel.vm"/>
<description key="taxonomy-web-panel.description">The Taxonomy Web Panel Plugin</description>
<context-provider class="com.web.contextProviders.TaxonomyContextProvider"/>
</web-panel>
Hi @JoshuaPhillips,
I don’t think this is going to work. You’re using a .vm Velocity Page, which needs to go though a parser to be rendered. The example uses a .soy page.
It does say in the documentation
To implement full control of rendering for your app’s page content:
-
Render the entire page, including the sitemesh decorator using an existing plugin mechanism (most likely a servlet or webwork action).
-
In this servlet or webwork action, get the SidebarPlaceholderRenderer component injected and render the sidebar HTML using an appropriate AUI page structure. The jira-projects plugin provides a Jira.Projects.Templates.page soy template to make this easier
-
Before Jira 9, make sure to require all web-resources in the jira.project.sidebar web-resource context. This step is not necessary in Jira 9.
Yet it doesn’t say how. This seems to be more about rendering a page, as I wrote and then injecting SidebarPlaceholderRenderer to generate the side bar code.
Whereas what you’ve done is rely on the default method where Jira handles the page rendering using a .soy template.
James.
While it may not be official Jira documentation, the book “Jira Development Cookbook” by Jobin Kuruvilla shows adding a web panel to the Project centric view using a velocity template and the screenshot of the page in the browser shows it looking the desired way. Whether that is because of the contains-header CSS class or something else I do not know since the rendered HTML is not included in the book.
It is in Chapter 8 “Customizing the UI” under section “Adding new panels in the project-centric view”
And while, yes, it does say those things you posted in your reply about full rendering, it also says this about it…
You should only use this option for advanced apps where you need full control of the URL state. An example of this is Jira’s agile board, where the sidebar allows users to switch between Backlog, Active Sprints and Reports via sidebar links on the client side.
This approach lets you implement advanced navigation, like sub-navigation within the page. However, in many cases, it is better to implement the basic web-panel (described above) instead
It would be nice to find out how to achieve this via native functionality in the product, but for now as a work-around, I have applied custom CSS using a negative margin and removing padding to get the desired effect.
.aui-page-header-fixed.header-with-border.header-fixup {
margin: -20px -20px 0 !important;
}
.projects-panel-inner-content.remove-padding {
padding: 20px 0 0 0 !important;
}
<div class="aui-page-header aui-page-header-fixed header-with-border header-fixup">
<div class="aui-page-header-inner">
<h1>
<span title="Panel Title">Panel Title</span>
</h1>
</div>
</div>
<section class="projects-panel-inner-content remove-padding">
...
</section>
1 Like
