Hi community!
I am developping an Atlassian Connect add-on for JIRA, and I would like to add a view from the Project view, using jiraProjectTabPanels entry in atlassian-connect.json file.
But what should be the HTML structure of my view? When I say structure: it’s about classes to use inside my view (aui*, header, content, …?): is there a structure to follow?
Thank you and best regards,
Fred
The only real requirement is the pesky all.js.
Now that said - there are design guidelines at Page panels - AUI Documentation for page content which is probably what you want. 
Just a note, we recommend following the instructions here instead of using the jiraProjectTabPanel module. https://developer.atlassian.com/jiradev/jira-platform/guides/projects/design-guide-jira-project-centric-view/development-guide-jira-project-centric-view
Hi Daniel,
Thank you for information! Actually, this is what I get when I try the example from the design guidelines:
<section id="content" role="main">
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<div class="aui-page-panel-nav">
<!-- content such as a vertical nav -->
</div>
<section class="aui-page-panel-content">
<!-- main area for content -->
</section>
</div>
</div>
</section>
The rendering I get is:
Displayed page does not take full available vertical height, and there is a strange grey color… Is my HTML correct (taken from the guideline page)…
Thanks a lot
@dmeyer, when you recommend not to use jiraProjectTabPanel, are you referring to JIRA Server development, or JIRA Cloud development, or both?
I am aware that the Project Tab Panel plugin module is deprecated in favour of the project-centric view approach; but I understood that Tab Panels are the recommended way to get content embedded in project view in JIRA Cloud. Am I right?
@frederictardieu, I don’t know of a published convention for the structure of a project tab panel, but I can share with you what I’ve done:
<div class="ac-content">
<header class="aui-page-header">
<div class="aui-page-header-inner">
<div class="aui-page-header-main">
...
</div>
</div>
</header>
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content">
...
</section>
</div>
</div>
</div>
I have an outer div with class="ac-content" so that everything gets resized automatically. Inside that, I’ve gone for an aui-page-header and an aui-page-panel. I did not start with the higher-level structure of a ‘page’ because that layout is:
“intended for use with the full set of application header, navigation, page header, footer, etc.”
Now, the grey background you can get rid of by applying a little css to the body of your HTML page:
<body style="background-color: transparent; margin: 0 !important;">
What annoys the stuffing out of me is that the heading at the top of the panel - “Deeper” in your case - cannot be removed; it is rendered outside of the iframe itself. I would rather be given the freedom to render my own title for the panel.
Hi David,
Thanks a lot, here’s the result on my side with your piece of code:
Content is not sized vertically… Any Javascript code to invoke?!
Cheers,
Fred
Fred, do you need to fill up the entire page? For me, I’m OK with the iframe expanding to cater for the content inside itself. The other thing you could possibly try is the JavaScript API options, sizeToParent in particular.
Also did you put set the background to transparent on the body tag?
Hey David,
It’s getting better, here it is:
But resizing missing still, although I pass the resizeToParent parameter/value:
<script id="connect-loader" data-options="sizeToParent:true;">
(function() {
var getUrlParam = function (param) {
var codedParam = (new RegExp(param + '=([^&]*)')).exec(window.location.search)[1];
return decodeURIComponent(codedParam);
};
var baseUrl = getUrlParam('xdm_e') + getUrlParam('cp');
var options = document.getElementById('connect-loader').getAttribute('data-options');
var script = document.createElement("script");
script.src = baseUrl + '/atlassian-connect/all.js';
if(options) {
script.setAttribute('data-options', options);
}
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
<div class="ac-content" data-options="sizeToParent:true;">
<header class="aui-page-header">
<div class="aui-page-header-inner">
<div class="aui-page-header-main">
...
</div>
</div>
</header>
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content">
...
</section>
</div>
</div>
</div>
Clutching at straws here a bit, but you might try this in JavaScript:
AJS.toInit(function($) {
$(window).resize(function() {
AP.sizeToParent(true);
});
})(AJS.$);Did you get any further with this, Fred?
Hey David,
Nope, but I am pretty sure your Javascript piece of code will do the job, as I am using the AP.sizeToParent() to resize a page content on JIRA main screen and that’s working.
I thought this resizing feature would be OK with only a HTML structure to follow…
Keep you posted, cheers, Fred
Hey @david.pinn, @frederictardieu,
I’m still can’t get my webpanel fully sized to page. My goal is to have project-centric page that will have really long content. I’d like it to have “floating header”, so I’d like to have scrollbar in my iframe.
What I have:
"webPanels": [
{
"key": "some-key",
"url": "/my-page?projectId={project.id}&boardId={board.id}",
"location": "my-addon__my-web-item", // pointing to webitem in jira.project.sidebar.plugins.navigation
"weight": 1,
"name": {
"value": "Some name"
},
"layout": {
"width": "100%",
"height": "100%"
}
}
]
and this is part of my in webpanel: (I’m using Atlassian Connect Spring Boot)
<script src="{{atlassian-connect-all-js-url}}" type="text/javascript"
data-options="sizeToParent:true;hideFooter:true"></script>
<script>
AJS.toInit(function($) {
$(window).resize(function() {
AP.sizeToParent(true);
});
})(AJS.$)
</script>
and my whole webpanel content is wrapped in:
<div class="ac-content">
<!-- my whole content is here -->
</div>
Am I missing something?
sizeToParent does not currently work at all on Project-specific web panels. @dmeyer says it will be slated for a fix soon. [ACJIRA-1207] - Ecosystem Jira