Scroll

Customising AskiaVista Reader web reports

Customising AskiaVista Reader web reports

Follow
Summary This article describes how to customize askiavista reader web reports.
Applies to askiavista
Written for Data processor
Keywords reader; web report; vista; askiavista 

Table of contents:


AskiaVista Reader is askiavista's rendering engine for published Portfolios.

It allows for custom layouts, and much improves the speed & response times compared to askiavista's legacy Portfolio engine.

I. Choose a theme & publish

When publishing a Portfolio, a Theme picker displays, listing themes that are available on the askiavista server:



Once specified, the Portfolio can be viewed via its URL with its selected Theme:



II. Create a new theme

You can customise and/or create AskiaVista Reader themes.

To do so you need direct access to the askiavista server, so as to browse to the AskiaVistaReader application folder, by default:

C:\Inetpub\wwwroot\AskiaVistaReader\Themes\

We deliver three themes by default:

  • AskiaBlue
  • AskiaLight
  • Default

To create a new theme we will copy & paste one of these folders, and give it a new name.

Inside the new theme folder, you can now customise your new theme's files - this requires a working understanding of HTML & CSS , if you don't have such knowledge, we recommend you send the files to a web designer/developer.

  Customisable Required
ajax-loader.gif
background-welcome.png
Chart.png
complogo.png
gradient.png
Preview.png
Styles.css
Table.png
Template.htm
Thumbnail.png


Template.html

You can modify this page so as to implement your own layout, style & greeting message.

We recommend abstain from modifying code between lines 3 to 46.

Also, you will notice ## ## flags for pulling dynamic information, we also recommend you abstain from modifying these.

<head>
    <title>AskiaVista - Portfolio Reader</title>
    <link rel="Stylesheet" href="##Themes##/Styles.css" />
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //Manage the flash message
            if (!isStringEmpty($('.flash').html()))
                $('.flash').css({display:'block'});
            if (!isStringEmpty($('.root').html()))
                $('.download').css({display:'block'});
            //Resize the some elements
            var hfsz=$('#header').height() + $('#footer').height() + 20;
            var mh=$(window).height() - hfsz;
            $('.result, .sidebar').height(mh);            
            //Manage the light-box window (use the blockUI http://jquery.malsup.com/block)
            $('.portfolioitemlink').click(function() { 
                $.blockUI({
                    message: $('#loading'),
                     css: { 
                        backgroundColor : 'black',
                        border: 'none', 
                        padding: '15px', 
                        '-webkit-border-radius': '10px', 
                        '-moz-border-radius': '10px'
                    }
                }); 
            });            
        });
        function isStringEmpty(text){
            if (text ==null || text==undefined )return true;
            var strText=text + "";
            strText= strText.replace(/\s/gi,'');
            return (strText.length ==0);
        }
        function d(id){
            return document.getElementById(id);
        }
        function display(url){
           $('#explanation').hide();
           $('#result').show();
           $('#result').height($('.result').height());
           d('result').src=url;
        }
    </script>
</head>
<body>
    <div id="header">
        <a href="http://www.askia.com">
            <img src="##Themes##/CompLogo.png" alt="Askia" border="0" />
        </a>
        <span id="title">##PortfolioName##</span>
    </div>
    <div class="flash">##FlashMessage##</div>
    <div class="sidebar">
        <h3>List of portfolio elements</h3>
        <div class="download">
            <a href="#" onclick="window.open('##PortfolioDownload##');">Download</a>
        </div>
        <div class="nav">
            <ul class="root">
                ##PortfolioItems##
            </ul>
        </div>
    </div>
    <div class="result">
        <div id="explanation">
            <h1>Welcome to the AskiaVista portfolio reader</h1>
            <h2>##PortfolioName##</h2>
            <p>This page was generated by AskiaVista to allow to view survey results.</p>
            <p>Use the left-hand side navigation to display the contents of the portfolio (tables & charts)</p>
            <p>Use the 'Download' link, located in the left sidebar, to export the entire portfolio to a MS Excel file.</p>
            <p>Have a nice day,</p>
            <p>The askia team.</p>
        </div>
        <iframe id="result" style="display:none" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
    </div>
    <div id="loading" style="display:none">
        <h1><img src="##Themes##/ajax-loader.gif" /> Please wait during the process ...</h1>
    </div>
    <div id="footer">
        <span id="copyright">Copyright &copy; Askia SAS - All rights reserved, 2013</span>
    </div>
</body>

Styles.css

Modify this file as you see fit, i.e. in accordance with classes used, added and/or removed from the Template.htm file.

body {
    margin:0;
    font-family:arial, sans-serif;
}
ul, ul li {
    margin:0;
    padding:0;
}
#header {
    background:url('gradient.png');
    height:50px;
}
#header a img {
    margin-left:5px;
    margin-top:3px;
}
#title {
    font-size:22pt;
    font-weight:bold;
    color: #ffffff;
    vertical-align:top;
    position:relative;
    left:15px;
    top:10px;
}
#footer {
    position:fixed;
    height:30px;
    bottom:0;
    left:0;
    width:100%;
    background-color:#24508e;
}
#explanation {
    height:100%;
    background-image:url('background-welcome.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}
#copyright {
    margin-right:20px;
    float:right;
    font-size:10pt;
    color:white;
    position:relative;
    top:7px;
}
#loading{
    background:black;
    color:white;
}
#loading h1 {
    font-size:15pt;
    font-weight:normal;
}
.flash{
    background:pink;
    color:red;
    border: 2px solid red;
    width:80%;
    padding:5px;
    margin:5px;
    display:none;
}
.sidebar {
    margin:15px 0 0 5px;
    float:left;
    width:23%;
    border:1px solid #24508e;
    overflow:auto;
}
.sidebar h3 {
    float:left;
    margin-top:8px;
    margin-left:10px;
}
.sidebar .download {
    margin:5px;
    padding:5px;
    float:right;
    font-style:italic;
    font-size:10pt;
    display:none;
}
.sidebar .nav {
    clear:both;
}
.sidebar .root {
    font-size:10pt;
    list-style-type:none;
    margin-left:5px;
}
li img {
    padding-right:8px;
    cursor:pointer;
}
.pages  {
    list-style-type:none;
    padding:0;
    margin-left:10px;
}
.pages li {
    margin-top:2px;
    white-space: nowrap;
}
.portfolioitem {
    margin-top:5px;
}
.result{
    margin:15px 5px;
    float:left;
    width: 74%;
    padding-left:2px;
    border:1px solid #24508e;
    overflow:hidden;
}

Have more questions? Submit a request

Comments