Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

could not use stylesheet in atlassian-connect-express project

i recently started a confluence cloud project using atlassian connect express.
but i couldn't use any method to include a stylesheet into my macros
here is my index.js

module.exports = function (app, addon) {

    // Root route. This route will serve the `atlassian-connect.json` unless the
    // documentation url inside `atlassian-connect.json` is set
    app.get('/', function (req, res) {
        res.format({
            // If the request content-type is text-html, it will decide which to serve up
            'text/html': function () {
                res.redirect('/atlassian-connect.json');
            },
            // This logic is here to make sure that the `atlassian-connect.json` is always
            // served up when requested by the host
            'application/json': function () {
                res.redirect('/atlassian-connect.json');
            }
        });
    });

    // This is an example route that's used by the default "generalPage" module.
    // Verify that the incoming request is authenticated with Atlassian Connect
    app.get('/hello-world', addon.authenticate(), function (req, res) {
            // Rendering a template is easy; the `render()` method takes two params: name of template
            // and a json object to pass the context in
            res.render('hello-world', {
                title: 'Atlassian Connect'
                //issueId: req.query['issueId']
            });
        }
    );

    // Add any additional route handlers you need for views or REST resources here...

// Render the background-color macro.
app.get('/v1/backgroundColor',addon.authenticate(), function(req, res){

    //  Grab all input parameters - sent through to us as query params.
    var color       = req.query['color'],
        pageId      = req.query['pageId'],
        pageVersion = req.query['pageVersion'],
        macroHash   = req.query['macroHash'],
        userKey     = req.query['user_key'];
    var clientKey = req.context.clientKey;

    console.log(" ----- clientKey : ", clientKey);
        console.log(" ----- userKey : ", userKey);
        
        
    //  Execute API request to get the macro body.
    getHTTPClient(clientKey, userKey).get(
        '/rest/api/content/' + pageId +
        '/history/' + pageVersion +
        '/macro/hash/' + macroHash,

        
        function(err, response, contents){
            
            console.log(" ----- response status: ", response.statusCode);

            //  If we've encountered errors, render an error screen.
            if(err || (response.statusCode < 200 || response.statusCode > 299)) {
                console.log(err);
                res.render('<strong>An error has occurred :( '+ response.statusCode +'</strong>');
            }

            console.log(" ----- contents : ", contents);

                        //  Parse the response, and send the body through.
            contents = JSON.parse(contents);

            //  Render with required body.
            res.render('background-color', { body : contents.body, color: color });

        }
    );

});


app.get('/v1/progressbar',addon.authenticate(), function(req, res){

    //  Grab all input parameters - sent through to us as query params.
    var steps       = req.query['steps'],
        currentstep = req.query['currentstep'],
        pageId      = req.query['pageId'],
        pageVersion = req.query['pageVersion'],
        macroHash   = req.query['macroHash'],
        userKey     = req.query['user_key'];
    var clientKey = req.context.clientKey;

    console.log(" ----- clientKey : ", clientKey);
        console.log(" ----- userKey : ", userKey);
        
        
    //  Execute API request to get the macro body.
    getHTTPClient(clientKey, userKey).get(
        '/rest/api/content/' + pageId +
        '/history/' + pageVersion +
        '/macro/hash/' + macroHash,

        
        function(err, response, contents){
            
            console.log(" ----- response status: ", response.statusCode);

            //  If we've encountered errors, render an error screen.
            if(err || (response.statusCode < 200 || response.statusCode > 299)) {
                console.log(err);
                res.render('<strong>An error has occurred :( '+ response.statusCode +'</strong>');
            }else{

            console.log(" ----- contents : ", contents);

                        //  Parse the response, and send the body through.
            contents = JSON.parse(contents);

            //  Render with required body.
            res.render('progress-bar', { body : currentstep, color: steps });
            }
        }
    );

});

    // load any additional files you have in routes and apply those to the app
    {
        var fs = require('fs');
        var path = require('path');
        var files = fs.readdirSync("routes");
        for(var index in files) {
            var file = files[index];
            if (file === "index.js") continue;
            // skip non-javascript files
            if (path.extname(file) != ".js") continue;

            var routes = require("./" + path.basename(file));

            if (typeof routes === "function") {
                routes(app, addon);
            }
        }
    }

function getHTTPClient (clientKey, userKey){
    return addon.httpClient({
        clientKey : clientKey,
        userKey   : userKey,
        appKey    : addon.key
    });
}
};

 my macro handlebar file

{{!< layout}}
{{!--
    If we have received a macro body, render it.
    Otherwise, show a preview screen/message.
    
--}}
<div>
<ol class="aui-progress-tracker">
        <li class="aui-progress-tracker-step" style="width:25%"><span>Configure instance</span></li>
        <li class="aui-progress-tracker-step  aui-progress-tracker-step-current" style="width:25%"><span>Select plugins</span>
        </li>
        <li class="aui-progress-tracker-step" style="width:25%"><span>Invite users</span></li>
        <li class="aui-progress-tracker-step" style="width:25%"><span>Confirm</span></li>
    </ol>
</div>

 my layout.hbs

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="ap-local-base-url" content="{{localBaseUrl}}">
  <title>{{title}}</title>
 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.9/js/aui.min.js"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.9/css/aui.min.css" media="all">


<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.9/css/aui-experimental.min.css" media="all">
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.9/js/aui-experimental.min.js"></script>


<script src="//aui-cdn.atlassian.com/aui-adg/6.0.9/js/aui-datepicker.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.9/js/aui-soy.min.js"></script>
 
 
  <!--[if IE 9]><link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.21/css/aui-ie9.css" media="all"><![endif]-->
  <link rel="stylesheet" href="{{furl '/css/addon.css'}}" type="text/css" />
  <script src="{{hostScriptUrl}}" type="text/javascript"></script>

</head>
<body class="aui-page-hybrid">
  <section id="content" role="main">
    {{{body}}}
  </section>
  <script src="{{furl '/js/addon.js'}}"></script>
</body>
</html>

 and my css file which contains the defined classes

/* add-on styles */
.intro-header h1 {
  font-size: 48px;
  line-height: 60px;
  padding-top: 20px;
}
.intro-header p.subtitle {
  font-size: 24px;
  line-height: 30px;
  padding-bottom: 20px;
}
.main-panel .aui-page-panel-item {
  padding: 20px 40px 20px 0;
  height: 100px;
}
/* SFM styles */
/* Layout */
.aui-progress-tracker {
    display: table;
    font-size: 12px;
    margin: 10px 0 0;
    padding: 0;
    table-layout: fixed;
    word-wrap: break-word; /* doesn't work in IE */
}
.aui-progress-tracker:first-child {
    margin-top: 0;
}
.aui-progress-tracker-step {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    padding: 0 10px;
    max-width: 140px;
    min-width: 80px;
    text-align: center;
}

/* Progress Bar */
.aui-progress-tracker-step > span,
.aui-progress-tracker-step > a {
    display: block;
    font-weight: bold;
    outline: none;
    padding-top: 25px;
    position: relative;
}
.aui-progress-tracker-step > span:before,
.aui-progress-tracker-step > a:before {
    background: #3b73af;
    border-radius: 100%;
    box-shadow: 0 0 0 3px #f5f5f5; /* can't just use a 3px border as an IE9 bug causes it to draw a strange additional darker border on the outside in addition to the 3px border */
    content: "";
    height: 10px;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 3px;
    width: 10px;
}
.aui-progress-tracker-step + .aui-progress-tracker-step > span:after,
.aui-progress-tracker-step + .aui-progress-tracker-step > a:after {
    background: #3b73af;
    border: solid #f5f5f5;
    border-width: 2px 0;
    box-shadow: -5px 0 0 -2px #3b73af, 5px 0 0 -2px #3b73af;
    content: "";
    height: 4px;
    left: -50%;
    margin-left: -14px; /* almost touches right edge of previous dot (leaves 1px room for rounding widths like 33.3% in webkit) */
    margin-right: 6px; /* almost touches left edge of this dot (leaves 1px room for rounding widths like 33.3% in webkit) */
    position: absolute;
    right: 50%;
    top: 4px;
}
.aui-progress-tracker-step-current ~ .aui-progress-tracker-step {
    color: #707070;
}
.aui-progress-tracker-step-current ~ .aui-progress-tracker-step > span:before,
.aui-progress-tracker-step-current ~ .aui-progress-tracker-step > a:before {
    background-color: #ccc;
}
.aui-progress-tracker-step-current ~ .aui-progress-tracker-step > span:after,
.aui-progress-tracker-step-current ~ .aui-progress-tracker-step > a:after {
    background-color: #f5f5f5;
    box-shadow: none;
}

/* Inverted Colours */
.aui-progress-tracker-inverted .aui-progress-tracker-step > span:before,
.aui-progress-tracker-inverted .aui-progress-tracker-step > a:before {
    box-shadow: 0 0 0 3px #fff;
}
.aui-progress-tracker-inverted .aui-progress-tracker-step + .aui-progress-tracker-step > span:after,
.aui-progress-tracker-inverted .aui-progress-tracker-step + .aui-progress-tracker-step > a:after {
    border-color: #fff;
}
.aui-progress-tracker-inverted .aui-progress-tracker-step-current ~ .aui-progress-tracker-step > span:after,
.aui-progress-tracker-inverted .aui-progress-tracker-step-current ~ .aui-progress-tracker-step > a:after {
    background-color: #fff;
}

/* Interaction wih page layout */
.aui-page-header-actions .aui-progress-tracker {
    float: right;
}

0 answers

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence Cloud

What's New in Confluence Cloud – July 2020 Edition

Here’s another edition of “What’s New” this month in Confluence Cloud. Quickly (and more easily) adjust permission settings We know that sometimes the layers of space permissions and page restric...

18,612 views 22 80
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you