What's the best way to embed a rally app inside a confluence document?
I tried pasting my code between {html} macros but it doesn't work
{html}
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p4/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
...
...
}
});
Rally.launchApp('CustomApp', {
name: 'Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
{html}
The above code works fine when opened directly, but doesn't display anything when pasted inside confluence's {html} macro. (I am logged into rally in another tab)
A work around is to host the html page on a server and include it in an {iframe} macro in confluence. However some browsers might have cross-domain related security issues.
Finally I decided not to render the content inside my confluence page. I just hosted the html page on a server and added a link to it in my confluence page.
Related
Downloaded the default setup using the CKeditor v5 online builder.
When using it all works. But when using the to load the local (and downloaded online builder version) all the buttons are gone, why?
Help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="/ckeditor5/build/ckeditor.js"></script>
<!-- <script src="https://cdn.ckeditor.com/ckeditor5/20.0.0/classic/ckeditor.js"></script> -->
<body>
<div id="editor">Test Text (buttons missing)</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Check the source code of the sample attached to a CKEditor 5 build (samples/index.html). You will notice that there is a toolbar configuration provided that you need to pass when initializing the CKEditor instance.
For Angular users:
Even though default ckeditor build (#ckeditor/ckeditor5-build-classic/build/ckeditor) brings it's own toolbar buttons,
you'll have to add it yourself for custom builds (https://ckeditor.com/ckeditor-5/online-builder/ for instance)
Copy the toolbar array generated from theCustomBuild/sample/index.html to your config:
html:
<ckeditor [editor]="Editor" [config]="config"></ckeditor>
in your component:
public config = {
toolbar: [
'exportPdf',
'heading',
'|',
'bold',
...
]
};
I wrote html page with simplest graph. It contain only one node.
In FireFox it's showed well, but Safari (5.1.7 fo Windows) does not show it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
</head>
<body>
<div id="cy" style="height:100%;width:100%;position:absolute;left:0;top:0;"></div>
</body>
</html>
<script>
$(function(){ // on dom ready
$("#cy").cytoscape({
elements: [ { group: 'nodes', data: { id: 'a', name: 'Adam' } } ],
ready: function(){
}
});
alert('END');
}); // on dom ready
</script>
Moreover I use function alert('END') to check that everything is ok.
And FireFox shows message 'END', but Safari does not.
Only if I remove line 'elements: [ ... ]', then Safari shows message 'END'.
Any idea?
Cytoscape.js uses HTML5 technologies such that only A-grade autoupdated browsers are supported. Safari 5 is very old, and I don't think it's supported on Windows anymore.
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
I have simplest implementation of CardBoard:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Very annoying issue occurs after each drag and drop action: page refreshes.
Also I've noticed some bug that prevents page from reloading. Steps to reproduce:
Open page with code above;
Change project scope;
Drag and drop card;
You will see javascript error in browser console that prevent page from refreshing.
How can I prevent page refreshing after Card drag and drop action in case when there are no javascript Rally SDK errors?
It's caused by a poor handling of the objectUpdate message by the parent window. When the card is dropped, the objectUpdate message is fired (correctly), but the Custom HTML panel handles it by refreshing the app. I've filed a bug with Rally to fix it.
To overwrite this behavior, add this after Rally.onReady:
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
So the entire code looks like:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Here is a similar question with a slightly different answer that should work for you as well:
App works as desired in debug mode but crashes in Rally environment
I am not a jQuery person, wish I was. I have fiddled with no conflict, but it still lets only one of the scripts work at a time, not both. I am using a scroll to jquery script and colorbox (like lightbox) Here is my code. Any help is awesome.
<!--jquery scroll-->
<script src="js_scroll/jquery.js"></script>
<script src="js_scroll/jquery.scrollTo.js"></script>
<script src="js_scroll/jquery.nav.js"></script>
<script>
$(document).ready(function() {$('#nav').onePageNav();});
</script>
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</body>
If you want to load multiple jQuery libraries, this is the way.
<script src='jquery-1.3.2.js'></script>
<script>
var $j132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var $j142 = jQuery.noConflict();
</script>
now use $j132() for jQuery 1.3.2 operations and $j142() for jQuery 1.4.2
I had the same problem with ColorBox and ScrollBar I solved by using the
<script>var $jQuery171 = $.noConflict(true);</script> after my scroll bar java
the final results was
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
and then come the scroll bar java
<!--Scroll Plans-->
<link rel="stylesheet" type="text/css" href="../../../siteroots/aboutScroll/general.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>var $jQuery171 = $.noConflict(true);</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
})
</script>
<!--End Scroll Plans-->
I used the <script>var $jQuery171 = $.noConflict(true);</script> in the scroll Java only and it's working fine now.