Skip to main content

How can we help?

Frequently searched: Android devices, cloning, ADC Gallery, Glossary,...

Askiavista (5&6)

Askiavista is the cross tabulation engine that could be installed on stand alone.

In this article

    Customising AskiaVista Reader web reports

    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.


    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:



    Create a new theme


    You can customize 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 you will need to 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 abstaining from modifying the 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;
}

    Related articles