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

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,560,642
Community Members
 
Community Events
185
Community Groups

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

Atlassian Community Events