Newbie Question - Resizing Web Panel to fit content in JIRA Connect Static Add-on

Hi

I am just beginning with Atlassian Connect. I am developing an add-on that will display project information.

To get started I am setting up a mockup of my HTML page - and just to get started I have a large block of Lorem Ipsum content.

I took the basic Atlassian Connect static add-on https://developer.atlassian.com/static/connect/docs/latest/tutorials/connect-basics.html and modified this to display a page as a web-panel.

My descriptor is as follows

{
     "name": "Hello World",
     "description": "Atlassian Connect add-on",
     "key": "com.example.myaddon",
     "baseUrl": "***mylocalserverURL****",
     "vendor": {
         "name": "Example, Inc.",
         "url": "http://example.com"
     },
     "authentication": {
         "type": "none"
     },
     "apiVersion": 1,
     "modules": {         
        "webItems": [
            {
                "location": "jira.project.sidebar.plugins.navigation",
                "key": "connect-provided-link-to-panel",
                "url": "/projects/{project.key}?selectedItem=com.example.myaddon__connect-provided-link-to-panel",
                "context": "product",
                "name": {
                    "value": "My Web Item"
                }
            }
        ],
        "webPanels" : [
            {
                "key": "connect-provided-web-panel",
                "url": "/index.html?pkey={project.key}",
                "location": "com.example.myaddon__connect-provided-link-to-panel",                
                "name": {
                    "value": "My Web Panel"
                },
                "layout": {
                    "width": "100%",
                    "height": "100%"
                }
            }
        ]
     }
 }

The web-item and web-panel code for the descriptor was copied from this article.

My index.html code is basically the helloworld.html with additional

content. I tried various combinations of using the ac-content class with the sizeToParent attribute. But nothing has allowed the content to extend vertically. I always get a scrollbar.

type or paste code here<!DOCTYPE html>
<html lang="en">
 <head>
     <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.12/css/aui.min.css" media="all">
 </head>
 <body class="ac-content" data-options="sizeToParent:true;resize:true;">
     <div id="content" class="ac-content" data-options="sizeToParent:true;resize:true;">
         <div class="aui-page-header">
             <div class="aui-page-header-main">
                 <h1>Hello World</h1>
                 <p>Lorem ipsum dolor sit amet, at vel option pertinax, at mel iriure eligendi inciderint. Has solet lobortis gubergren et. Lorem suscipit ne vis, sint atqui dolorum eum ea. Ullum philosophia cum id. Latine blandit cu eos.

Vim in alii ignota quaestio, quo an suas assentior, no lorem eligendi mel. Vis ex graeci facete audire. No soleat docendi nam, aliquid albucius petentium nam no. Tantas dolore epicuri ei per, elitr nihil doming sea no. Laoreet liberavisse vix ad. Quo mucius maiorum ut, eos utamur inermis albucius ei.

Vel te tota ludus, at mei commune indoctum. Eu vim duis ferri reprimique. Admodum deseruisse at ius, rebum aperiri ne mei, mea nibh utamur eu. Vis ut oratio tempor, meis conceptam mea in, nec id odio possit. Et rebum repudiandae ius, tollit admodum adversarium eu ius, iusto saepe in pri. Eam malorum instructior concludaturque te, nam ad tale omittantur, at impetus nominavi sea.

Audire accusam probatus mea in, te paulo semper assueverit vix. Cu per offendit consulatu interpretaris, eum ea oratio petentium. Possit detracto intellegebat ius id, blandit invidunt deserunt ne pri. Meis docendi vim ne, sanctus mediocritatem et eam.
</p><p>
Modo platonem assueverit mei ex, mei ne utroque platonem. Te dicant veniam pro, eum meis putent contentiones ei. Id mei probo labitur. Nisl graece ut nec. Cetero indoctum maluisset cu mei, sit at quando nonumes assueverit. Consul feugiat adolescens eum at, ad nam duis possit persius. Alii lucilius an eos.
Lorem ipsum dolor sit amet, at vel option pertinax, at mel iriure eligendi inciderint. Has solet lobortis gubergren et. Lorem suscipit ne vis, sint atqui dolorum eum ea. Ullum philosophia cum id. Latine blandit cu eos.

Vim in alii ignota quaestio, quo an suas assentior, no lorem eligendi mel. Vis ex graeci facete audire. No soleat docendi nam, aliquid albucius petentium nam no. Tantas dolore epicuri ei per, elitr nihil doming sea no. Laoreet liberavisse vix ad. Quo mucius maiorum ut, eos utamur inermis albucius ei.

Vel te tota ludus, at mei commune indoctum. Eu vim duis ferri reprimique. Admodum deseruisse at ius, rebum aperiri ne mei, mea nibh utamur eu. Vis ut oratio tempor, meis conceptam mea in, nec id odio possit. Et rebum repudiandae ius, tollit admodum adversarium eu ius, iusto saepe in pri. Eam malorum instructior concludaturque te, nam ad tale omittantur, at impetus nominavi sea.

Audire accusam probatus mea in, te paulo semper assueverit vix. Cu per offendit consulatu interpretaris, eum ea oratio petentium. Possit detracto intellegebat ius id, blandit invidunt deserunt ne pri. Meis docendi vim ne, sanctus mediocritatem et eam.
</p><p>
Modo platonem assueverit mei ex, mei ne utroque platonem. Te dicant veniam pro, eum meis putent contentiones ei. Id mei probo labitur. Nisl graece ut nec. Cetero indoctum maluisset cu mei, sit at quando nonumes assueverit. Consul feugiat adolescens eum at, ad nam duis possit persius. Alii lucilius an eos.
Lorem ipsum dolor sit amet, at vel option pertinax, at mel iriure eligendi inciderint. Has solet lobortis gubergren et. Lorem suscipit ne vis, sint atqui dolorum eum ea. Ullum philosophia cum id. Latine blandit cu eos.

Vim in alii ignota quaestio, quo an suas assentior, no lorem eligendi mel. Vis ex graeci facete audire. No soleat docendi nam, aliquid albucius petentium nam no. Tantas dolore epicuri ei per, elitr nihil doming sea no. Laoreet liberavisse vix ad. Quo mucius maiorum ut, eos utamur inermis albucius ei.

Vel te tota ludus, at mei commune indoctum. Eu vim duis ferri reprimique. Admodum deseruisse at ius, rebum aperiri ne mei, mea nibh utamur eu. Vis ut oratio tempor, meis conceptam mea in, nec id odio possit. Et rebum repudiandae ius, tollit admodum adversarium eu ius, iusto saepe in pri. Eam malorum instructior concludaturque te, nam ad tale omittantur, at impetus nominavi sea.
</p><p>
Audire accusam probatus mea in, te paulo semper assueverit vix. Cu per offendit consulatu interpretaris, eum ea oratio petentium. Possit detracto intellegebat ius id, blandit invidunt deserunt ne pri. Meis docendi vim ne, sanctus mediocritatem et eam.

Modo platonem assueverit mei ex, mei ne utroque platonem. Te dicant veniam pro, eum meis putent contentiones ei. Id mei probo labitur. Nisl graece ut nec. Cetero indoctum maluisset cu mei, sit at quando nonumes assueverit. Consul feugiat adolescens eum at, ad nam duis possit persius. Alii lucilius an eos.
Lorem ipsum dolor sit amet, at vel option pertinax, at mel iriure eligendi inciderint. Has solet lobortis gubergren et. Lorem suscipit ne vis, sint atqui dolorum eum ea. Ullum philosophia cum id. Latine blandit cu eos.

Vim in alii ignota quaestio, quo an suas assentior, no lorem eligendi mel. Vis ex graeci facete audire. No soleat docendi nam, aliquid albucius petentium nam no. Tantas dolore epicuri ei per, elitr nihil doming sea no. Laoreet liberavisse vix ad. Quo mucius maiorum ut, eos utamur inermis albucius ei.
</p><p>
Vel te tota ludus, at mei commune indoctum. Eu vim duis ferri reprimique. Admodum deseruisse at ius, rebum aperiri ne mei, mea nibh utamur eu. Vis ut oratio tempor, meis conceptam mea in, nec id odio possit. Et rebum repudiandae ius, tollit admodum adversarium eu ius, iusto saepe in pri. Eam malorum instructior concludaturque te, nam ad tale omittantur, at impetus nominavi sea.

Audire accusam probatus mea in, te paulo semper assueverit vix. Cu per offendit consulatu interpretaris, eum ea oratio petentium. Possit detracto intellegebat ius id, blandit invidunt deserunt ne pri. Meis docendi vim ne, sanctus mediocritatem et eam.

Modo platonem assueverit mei ex, mei ne utroque platonem. Te dicant veniam pro, eum meis putent contentiones ei. Id mei probo labitur. Nisl graece ut nec. Cetero indoctum maluisset cu mei, sit at quando nonumes assueverit. Consul feugiat adolescens eum at, ad nam duis possit persius. Alii lucilius an eos.
Lorem ipsum dolor sit amet, at vel option pertinax, at mel iriure eligendi inciderint. Has solet lobortis gubergren et. Lorem suscipit ne vis, sint atqui dolorum eum ea. Ullum philosophia cum id. Latine blandit cu eos.

Vim in alii ignota quaestio, quo an suas assentior, no lorem eligendi mel. Vis ex graeci facete audire. No soleat docendi nam, aliquid albucius petentium nam no. Tantas dolore epicuri ei per, elitr nihil doming sea no. Laoreet liberavisse vix ad. Quo mucius maiorum ut, eos utamur inermis albucius ei.

Vel te tota ludus, at mei commune indoctum. Eu vim duis ferri reprimique. Admodum deseruisse at ius, rebum aperiri ne mei, mea nibh utamur eu. Vis ut oratio tempor, meis conceptam mea in, nec id odio possit. Et rebum repudiandae ius, tollit admodum adversarium eu ius, iusto saepe in pri. Eam malorum instructior concludaturque te, nam ad tale omittantur, at impetus nominavi sea.

Audire accusam probatus mea in, te paulo semper assueverit vix. Cu per offendit consulatu interpretaris, eum ea oratio petentium. Possit detracto intellegebat ius id, blandit invidunt deserunt ne pri. Meis docendi vim ne, sanctus mediocritatem et eam.

Modo platonem assueverit mei ex, mei ne utroque platonem. Te dicant veniam pro, eum meis putent contentiones ei. Id mei probo labitur. Nisl graece ut nec. Cetero indoctum maluisset cu mei, sit at quando nonumes assueverit. Consul feugiat adolescens eum at, ad nam duis possit persius. Alii lucilius an eos.
</p>
             </div>
         </div>
     </div>

     <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>

 </body>
</html>

I’ve also attached an image of how the web-panel looks.

So I have 2 questions

  1. Am I approaching this the right way? Should I be using web-items and web-panels?
  2. How do I get the panel to resize so that all the content is visible?

Thanks
Chris

I tried various ways of calling AP.resize and AP.sizeToParent, but it always seemed like I was calling these too soon as I got the javascript error “AP is undefined”. I tried putting the code at end of HTML, tried calling it on document ready using JQuery but nothing worked. Then I put a few alerts in different places, and after this it started working. I think the alerts were allowing all.js to load and by the time I had clicked through the alerts it was loaded and AP.resize worked.

So I modified the script loader to

      <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);
             }
             script.onload = function () {
                 AP.resize();
             }
             document.getElementsByTagName("head")[0].appendChild(script);
             
         })();
     </script>

So now when the script is finished loading I call AP.resize().

But this doesn’t feel right.

Anyone any thoughts on this?

Thanks
Chris

Hi

Can anyone help me with this please?

Thanks
Chris

Hi @chris2,

Just remove the data-options=“sizeToParent:true;resize:true;” in the last script and this should fit the content.

<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>

Thanks!

Cheers,
Anne Calantog

1 Like