SBT javascript library - xpages

the tutorial from IBM connections playground is not working for me
https://greenhouse.lotus.com/sbt/SBTPlayground.nsf/JavaScriptSnippets.xsp#snippet=Social_ActivityStreams_Controls_Simple_Stream_All_Extensions
this works
require(["sbt/dom", "sbt/config", "sbt/connections/controls/astream/ActivityStreamWrapper"], function(dom, config, ActivityStreamWrapper) {
var activityStreamWrapper = new ActivityStreamWrapper({
feedUrl: "/basic/rest/activitystreams/#public/#all/#all?rollup=true"
});
dom.byId("activityStreamDiv").appendChild(activityStreamWrapper.domNode);
activityStreamWrapper.startup();
});
efter adding the extension property in configuration, it stops working, nothing displays and no script error can be seen from developer tool,
require(["sbt/dom", "sbt/config", "sbt/connections/controls/astream/ActivityStreamWrapper"], function(dom, config, ActivityStreamWrapper) {
var activityStreamWrapper = new ActivityStreamWrapper({
feedUrl: "/basic/rest/activitystreams/#public/#all/#all?rollup=true",
extensions: {
refreshButton: true
}
});
dom.byId("activityStreamDiv").appendChild(activityStreamWrapper.domNode);
activityStreamWrapper.startup();
});
I am using Xpages to render the activity stream, the component in use to render all the JS and CSS files is named xe:sbtClient, xpages is using dojo 1.8.6, the rendered sbt js file is dojo 1.4.3. don't know if that is the problem. Here is the complete soucre code in my applicatoin.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex" dojoParseOnLoad="true"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xe:sbtClient id="sbtClient1" loadDojo="true" loadCSS="true">
</xe:sbtClient>
<div id="activityStreamDiv" style="height:100%;"></div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
require(["sbt/dom", "sbt/config", "sbt/connections/controls/astream /ActivityStreamWrapper"], function(dom, config, ActivityStreamWrapper) {
var activityStreamWrapper = new ActivityStreamWrapper({
feedUrl: "/basic/rest/activitystreams/#public/#all/#all?rollup=true",
extensions: {
refreshButton: true
}
});
dom.byId("activityStreamDiv").appendChild(activityStreamWrapper.domNode);
activityStreamWrapper.startup();
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>

So the only difference between the two is the extensions property? There was an issue with extensions in an older version of the toolkit, I think updating to the latest version will solve your issue.
If you have the latest version already then I'll need more information on this problem. I have tried what you suggested in the playground and it works there (select dojo1.8.6 in the JavaScript libraries dropdown)

I have updated the SDK, all the extensions properties can be seen
extensions: {
   commenting: true,
   saving: true,
   refreshButton: true,
   deleteButton: true
},
refresh works, but saving, commenting, delete do not work
error from commenting, it asks me to log in again
error from delete, notauthorized even my identity in connections is global administrator
error from save

Related

How do I show ads in Phonegap Build using the Phonegap-admob plugin?

I've been trying to make an app using HTML, CSS, and JS using Phonegap Build, but admob ads will not show up. My JS code for showing ads is:
<script src="code.js"></script>
<script type="text/javascript">
function onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
// Set AdMobAds options:
admob.setOptions({
publisherId: "ca-app-pub-3940256099942544/6300978111", // Required
interstitialAdId: "ca-app-pub-3940256099942544/1033173712", // Optional
autoShowBanner: true, // Optional
autoShowRInterstitial: false, // Optional
});
// Start showing banners (atomatic when autoShowBanner is set to true)
admob.createBannerView();
// Request interstitial ad (will present automatically when autoShowInterstitial is set to true)
function showad(){
admob.requestInterstitialAd();
}
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
I also have the Phonegap Build plugin inside my config.xml file along with support for the gap tag, but ads just won't show, when everything else is working fine. Please help.
Here the author of phonegap-admob plugin.
Your config.xml should look like this:
<gap:plugin name="phonegap-admob" source="npm"/>
Normally it takes some days until you can start to see ads. Some things you could verify:
Seen a typo on admob.setOptions: autoShowRInterstitial --> autoShowInterstitial ('R' is incorrect)
publisherId is deprecated in the latest version, please use bannerAdId instead (even though it should work anyway)
Have you tried with test ads? What does it show? (https://admob-phonegap.com/set-options#baseoptions)
admob.setOptions({
bannerAdId: "ca-app-pub-3940256099942544/6300978111", // Required
interstitialAdId: "ca-app-pub-3940256099942544/1033173712", // Optional
autoShowBanner: true, // Optional
autoShowInterstitial: false, // Optional
isTesting: true, // Optional
});
You can find complete documentation in https://admob-phonegap.com

Azure Media Services Player invoked via Javascript fails with URL.createObjectURL is not a function

I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.

loading a javascript library and not getting an object returned

I am trying to load a javascript library in XPages.
Normally in HTML the reference looks as followed:
<html>
<head>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
</head>
<body>
</body>
</html>
which gives me a Hammer object in the DOM which I can work further with.
In XPages I have made the following setup:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" disableTheme="true"
dojoForm="false" dojoTheme="false" dojoParseOnLoad="false"
createForm="false">
<xp:this.resources>
<xp:script src="https://hammerjs.github.io/dist/hammer.js"
clientSide="true">
</xp:script>
</xp:this.resources>
</xp:view>
alternatively:
<?xml version="1.0" encoding="UTF-8" ?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" disableTheme="true" dojoForm="false" dojoTheme="false" dojoParseOnLoad="false" createForm="false">
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="script" value="text/javascript" />
<xp:parameter name="src" value="https://hammerjs.github.io/dist/hammer.js" />
</xp:this.attributes>
</xp:headTag>
</xp:this.resources>
</xp:view>
But the Hammer object is not present in the DOM!
What am I doing wrong?
hammer.js uses AMD. Here's a snippet from the hammer.js source code where AMD is used:
if (typeof define == TYPE_FUNCTION && define.amd) {
define(function() {
return Hammer;
});
} else if (typeof module != 'undefined' && module.exports) {
module.exports = Hammer;
} else {
window[exportName] = Hammer;
}
Unfortunately AMD loading conflicts with Dojo in XPages. See this answer on how to remove AMD loading.
In your case you need to download hammer.js, change the AMD loading part, add it to your nsf and then load the script from your nsf instead.
You remove the AMD loading part by changing the code in hammer.js to for instance this:
//if (typeof define == TYPE_FUNCTION && define.amd) {
// define(function() {
// return Hammer;
// });
//} else if (typeof module != 'undefined' && module.exports) {
if (typeof module != 'undefined' && module.exports) {
module.exports = Hammer;
} else {
window[exportName] = Hammer;
}
Another way to handle this is to use the AMD loader which is a part of Dojo on newer versions of Domino.
This code implements the basic example from the hammer.js documentation (I'm only using jQuery for the ready function):
require({
async: true,
aliases: [['jquery', '//code.jquery.com/jquery-1.11.3.min.js'],
['Hammer', '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js']]
}, ['jquery', 'Hammer'], function(jq, Hammer){
$(function() {
var myElement = document.getElementById('myElement');
// create a simple instance
// by default, it only adds horizontal recognizers
var mc = new Hammer(myElement);
// listen to events...
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});
});
});
Then just add the code to your xpage in a script tag:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="./css/basicImpl.css"></xp:styleSheet>
<xp:script src="./js/basicImpl.js" clientSide="true"></xp:script>
</xp:this.resources>
<div id="myElement"></div>
</xp:view>
I'm also using the stylesheet from the example:
#myElement {
background: silver;
height: 300px;
text-align: center;
font: 30px/300px Helvetica, Arial, sans-serif;
}
A few things in no particular order:
You can test that the script is loaded by using Chrome Dev Tools, and go to console. You can then put script in to call the hammer code. If the script isn't loaded then you will get an error. Your script might already be loaded.
Verify with the Hammer js site that you are loading the script properly
Try putting your code in the onClientLoad event which just loads client code.
Put the Hammer.js code into your NSF, to make sure you do not have connection issues to github. Use Package Explorer and put the files in the WebContent/js folder. Put any CSS in the WebContent/CSS folder

Domino 9 / Dojo 1.8 - Date Time Picker without default value

I want a Date Time Picker control WITHOUT a default value. Doesn't seem to be possible anymore :-(
To reproduce, create a blank XPage and place a Date Time Picker control. Open the XPage in the browser and you will see that it defaults to today.
I didn't found any way to set the default to an empty value. I tried setting all properties/data/default to 0, null, empty string and so on - no luck.
I tried the data-dojo-probs attribute with value:'', this sets the default to 1970-1-1, but not to blank.
Any ideas?
This is a known issue in ND9, reported as SPR DEGN966F5V.
A work around for the issue (from SPR) is to modify the widget prototype in the postCreate function to prevent the value from being reset.
require([
"dojo/_base/lang",
"ibm/xsp/widget/layout/DateTextBox",
"ibm/xsp/widget/layout/TimeTextBox",
"ibm/xsp/widget/layout/DateTimeTextBox"
], function(lang, DateTextBox, TimeTextBox, DateTimeTextBox){
var a = {};
lang.mixin(a, {
postCreate: function(){
this.inherited(arguments);
}
});
DateTextBox.extend(a);
TimeTextBox.extend(a);
DateTimeTextBox.extend(a);
});
Here is an example of it working.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:script clientSide="true">
<xp:this.contents><![CDATA[
require([
"dojo/_base/lang",
"ibm/xsp/widget/layout/DateTextBox"
], function(lang, DateTextBox){
var a = {};
lang.mixin(a, {
startup: function(){
this.inherited(arguments);
this.set("value", null);
}
});
DateTextBox.extend(a);
});
]]></xp:this.contents>
</xp:script>
</xp:this.resources>
<xp:inputText id="inputText1" value="#{sessionScope.inputText1}">
<xp:this.converter>
<xp:convertDateTime type="date" />
</xp:this.converter>
<xp:dateTimeHelper />
</xp:inputText>
</xp:view>
i dont know how it works in notes 9 but you could remove it with a CSJS like:
var field= dojo.byId('#{id:field}')
field.value ="";
hope it helps..
In applications I've previously applied a dojoType on the dateTimeHelper with this code:
<xp:dateTimeHelper id="dateTimeHelper1" dojoType="dijit.form.DateTextBox">
</xp:dateTimeHelper>
That was to address a problem in previous Domino versions where the page refreshed as soon as the picker was selected in certain flavours of IE.
This code seems to work fine on R9 without needing the workaround.

xe:restService not loading data after page is rendered

I have a xPage with following content:
<xe:restService id="restService" preventDojoStore="false">
<xe:this.service>
<xe:viewJsonService viewName="vwChartData"
contentType="text/json">
<xe:this.columns>
<xe:restViewColumn columnName="x" name="valuex"></xe:restViewColumn>
<xe:restViewColumn columnName="y" name="valuey"></xe:restViewColumn>
</xe:this.columns>
</xe:viewJsonService>
</xe:this.service>
</xe:restService>
How to fetch the data after page load? From what I understand it should create a Dojo store, although it never loads the data.
When I add to the page a xe:djxDataGrid, hide it from user, I can easily access the data from created Dojo Store, either by referring directly the restService variable, or through djxDataGrid.
Solution:
<xp:scriptBlock>
<xp:this.value><![CDATA[XSP.addOnLoad( function() {
var ds = eval('restService');
ds.fetch({
onComplete : function(items, request) {
console.log(items);
}
});
});]]></xp:this.value>
</xp:scriptBlock>
When you look at the source code when using a data grid you would see all the source code necessary to link your Dojo store. Watch the XSP.onLoad for trigger code.

Resources