Home

ASpanel

To integrate the ASpanel into your Website follow the steps below

Link Stylesheets

Link these two stylesheets into your site:

<link href="css/normalize.css" rel="stylesheet" />	
<link href="css/aspanel.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
<link rel="stylesheet" href="css/pictofy.css">

Creating Panel Container

Create a "div" container for the panel at the top of the body:

<div id="panel-container">
    <iframe id="myASpanel-iFrame" frameborder="0" src="toolbar/toolbar.html" height="100%" width="100%"></iframe>
</div>

Loading scripts and starting the panel

Loading JavaScript and start the panel at the bottom of your page:

<script type="text/javascript" src="js/libs/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/libs/jquery.mypanel.js"></script>
<script type="text/javascript" src="js/libs/jquery.tableofcontents.js"></script>
<script type="text/javascript" src="js/libs/jquery.res.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.pictofy.min.js"></script>
<script type="text/javascript" src="js/functions/ASfunctions.js"></script>

<script type="text/javascript">
    var defaultTextStyle = null;
    $(document).ready(function() {
        $('#panel-container').mypanel({
	    tabText : 'Open/Close Toolbar',
	    openByDefault : true
	    });
	$('#panel-container').css({"border": "none"});
		//defaultTextStyle = getDefaultTextStyle();
	});
</script>

Setup default UI and simplified UI

To use the common or application-specific term 'simplifiedUiEnabled' you have to set up the path to the UIs in 'gpii.js'

 module.loadUI = function(simplified) {

        currentURL = parent.document.URL;
        
        if(simplified) {
            // If current website is NOT simplified UI then load it.
            
             if (currentURL.indexOf("http://mario-ui.gpii.eu") == -1) {
                 parent.window.location.href = "http://mario-ui.gpii.eu";
             }
  
        } else {
            // If current website is NOT default UI then load it.       
    
             if (currentURL.indexOf("http://olb.gpii.eu") == -1){
                 parent.window.location.href = "http://olb.gpii.eu";
             }           
    };

Testing your application

You can test your application in Google Chrome using the following commands to login and logout users.

Attention:

• A user has to be logged out before another user can log in!
• GPII Local Flow Manager with universal review 4 branch is required!

Login

http://localhost:8081/user/olb_Carla/login

Logout

http://localhost:8081/user/olb_Carla/logout

Check for current user

http://localhost:8081/userToken

Users

• olb_Carla
• olb_Alicia_app
• olb_Lara
• olb_KimCallahan
• olb_Alicia_cmn

Notes

Note that dynamic ui frameworks like Angular or React may not play well with things like the pictogram support. This panel was tested with static websites.