Develop Reference

Calling a SAPUI5 control from a view works, embedded in a XMLComposite control does not (global external library)

I am trying to build a amCharts Container control, a UI5 control with a graph built via amCharts. Generally speaking it works but I am sure you can spot a lot of hacks that could be done better.
My biggest problem at the moment is that when I use the control from within another XMLComposite control I get the error
Uncaught ReferenceError: am4core is not defined at f.onAfterRendering
(AmChartContainer.js?eval:38)
Debugging the code proofs that the jQuery.sap.includeScript is executed before, still the global element am4core is not available. When I embed the control directly into the view, it works though.
The other thing I am not happy with is the event order. Would love to instantiate the amchart inside the render method but at that point in time there is no htmlelement, which the amchart instantiation needs. Agreed?
Would appreciate any pointers!
sap.ui.define([ 'sap/ui/core/Control', "jquery.sap.global" ], function(Control, jQuery) {
return Control.extend("io.rtdi.amChartContainer", {
metadata: {
properties: {
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
},
plugin: {
type: "string"
}
},
aggregations : {},
},
renderer : function(oRm, oControl) {
oRm.write("<div");
oRm.write(" style=\"width: " + oControl.getWidth() +
"; height: " + oControl.getHeight() + ";\" ");
oRm.writeControlData(oControl);
oRm.write(">");
oRm.write("</div>");
},
onBeforeRendering : function() {
jQuery.sap.includeScript("https://www.amcharts.com/lib/4/core.js",
"amCharts.core", null, null);
jQuery.sap.includeScript("https://www.amcharts.com/lib/4/charts.js",
"amCharts.charts", null, null);
if (!!this.getPlugin()) {
jQuery.sap.includeScript(
"https://www.amcharts.com/lib/4/" + this.getPlugin(),
"amCharts.plugin", null, null);
}
},
onAfterRendering : function() {
// if I need to do any post render actions, it will happen here
if (sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments);
}
this._chart = am4core.create(this.getId(), am4plugins_forceDirected.ForceDirectedTree);
},
getChart: function() {
return this._chart;
}
});
});

First of all, please use sap/ui/dom/includeScript since jQuery.sap.includeScript is considered deprecated.
You do not have any fnLoadCallback defined. Are you 100% sure, that the scripts are already loaded and am4core is defined, when onAfterRendering is called?

It seems the global keyword at the beginning was the missing piece:
/* global am4core:true */
/* global am4charts:true */
sap.ui.define([
"sap/ui/core/mvc/Controller",...

How to integrate mailchimp with nuxt js app?

I'd like to embed the following script into my component in nuxtjs app. But since nuxt has no solution for this. I'd like to ask the vue community to see if there was a better way of embedding external 3rd party js scripts?
Where should I be embedding this type of scipt? And what sort of external configurations do I need to add to enable this to work?
I tried adding directly into my template but it doesn't seem to be working.
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) })</script>
Thanks!

Open up your nuxt.config.js file, and search for the head object. You can add your third party scripts there like this:
// nuxt.config.js
module.exports = {
head: {
title: 'My title',
// etc.
script: [
{ src: "//downloads.mailchimp.com/js/signup-forms/popup/embed.js" },
// You can add multiple third-party scripts here
]
},
// Other stuff
}
Docs: How to use external resources?
I haven't tested it, but I think, since the other part is just javascript, you can add into your page you wan't to show it or a layout file (if you want to show it on multiple pages), like this:
// layout/default.vue
<template>
<!-- Your template -->
</template>
<script>
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) });
export default {
// etc...
}
</script>
Although the require part might mess things up...
Let me know if this works!

Insert the MailChimp code inside the <head>
head() {
return {
script: [
{
type: "text/javascript", // mailchimp universal script
src:
"//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js",
"data-dojo-config": "usePlainJson: true, isDebug: false"
},
{
type: "text/javascript", // mailchimp script for specific popup form
innerHTML: this.getMailchimp
}
],
__dangerouslyDisableSanitizers: ["script"]
};
},
computed: {
getMailchimp() {
if (process.client) {
return JSON.stringify(
window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
L.start({
baseUrl: "your base url",
uuid: "your uuid",
lid: "your lid",
uniqueMethods: true
});
})
);
}
}
}

Setting up dependencies with head.js

I just started using head.js for loading JS files asynchronously with dependencies.
Looking at the API documentation and examples, I see that you can apply labels to JS files, then run some conditions when they are loaded, heres an example in their documentation:
// same as above, but pass files in as an Array
head.load([
{ label1: "file1.js" },
{ label2: "file2.js" }],
function() {
// do something
});
// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
// do something
});
So basically, that will execute anything in the 2nd block of code (inside the closure), when the file1.js is loaded.
What I wanted to do, is load more files (asynchronously) when other files are loaded..
For example..
First, load the jquery file: jquery.min.ks
After thats successfully loaded, asynchronously load DataTables files: [ dataTables.searchHighlight.min.js, dataTables.conditionalPaging.js, jquery.dataTables.yadcf.js ]
After that, load the main application files: [ myapp_core.js, myapp_whatever.js ]
Heres the code I have now, using head.js, It seems to work ok, but it just doesn't seem right (Having to throw head.load() inside other functions)
// Step #1
head.load(
// First, load the main JS library
[
{ jquery_core: "/include/plugins/jquery-1.11.3/jquery-1.11.3.min.js" },
{ jquery_ui: "/include/plugins/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js" }
],
function() {
console.debug('Loaded jQuery library files, loading jQuery plugin files..');
jquery_plugins();
}
);
// Step #2
function jquery_plugins() {
head.load([
// Load all the jQuery plugin files
"/include/plugins/bootstrap-3.2.0/js/bootstrap.min.js",
"/include/plugins/select2/select2.js",
"/include/plugins/bootstrap3-editable/js/bootstrap-editable.min.js",
"/include/plugins/bootstrap3-editable/inputs-ext/address/address.js",
"/include/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/lib/typeahead.js",
"/include/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/typeaheadjs.js",
"/include/plugins/bootstrap3-editable/inputs-ext/wysihtml5/wysihtml5.js",
"/include/plugins/mustache/mustache.js",
"/include/plugins/slimscroll/jquery.slimscroll.min.js",
"/include/plugins/jquery-cookie/jquery.cookie.js",
"/include/plugins/gritter/js/jquery.gritter.js",
"/include/plugins/jquery-tooltipster-master/js/jquery.tooltipster.js",
"/include/plugins/bootstrap-wizard/js/bwizard.js",
"/include/js/apps.js",
"/include/js/enhanced-select.jquery.min.js",
"/include/js/jquery.multi-select.js",
"/include/plugins/intro/intro.js",
"/include/plugins/switchery/switchery.min.js",
"/include/js/jquery.multiselect.js",
"/include/plugins/parsley/src/parsley.js",
"/include/plugins/parsley/src/extra/validator/APPcustom.js",
"/include/plugins/parsley/src/extra/plugin/parsley.remote.js",
"/include/plugins/bootstrap3-timepicker2/js/bootstrap-timepicker.js",
"/include/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js",
"/include/plugins/SamWM/numeric/jquery.numeric.min.js",
"/include/plugins/moment/moment.min.js",
"/include/plugins/flot/jquery.flot.min.js",
"/include/plugins/flot/jquery.flot.time.min.js",
"/include/plugins/flot/jquery.flot.resize.min.js",
"/include/plugins/flot/jquery.flot.pie.min.js",
"/include/plugins/flot/jquery.flot.stack.min.js",
"/include/plugins/flot/jquery.flot.crosshair.min.js",
"/include/plugins/flot/jquery.flot.categories.js",
"/include/plugins/sparkline/jquery.sparkline.js",
"/include/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js",
"/include/plugins/bootstrap-tagsinput/bootstrap-tagsinput-typeahead.js",
"/include/plugins/jquery-tag-it/js/tag-it.min.js",
"/include/plugins/bootstrap-select/bootstrap-select.min.js",
"/include/plugins/contextMenu/src/jquery.ui.position.js",
"/include/plugins/contextMenu/src/jquery.contextMenu.js",
"/include/js/jquery.mask.min.js",
"/include/plugins/jquery-jstree/dist/jstree.min.js",
"/include/plugins/jquery.expander.js",
"/include/plugins/jquery-labelauty/source/jquery-labelauty.js",
"/include/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js",
"/include/plugins/jquery-jscroll/jquery.jscroll.js",
"/include/js/modernizr.js",
"/include/plugins/jquery-messi/dist/messi.js",
"/include/plugins/jquery-tmpl/jquery.tmpl.min.js",
{ jquery_highlight: "/include/plugins/jquery-searchhighlight/jquery.highlight.js" },
{ datatables_core: "/include/plugins/DataTables/minify/datatables.min.js" },
{ datatables_searchHighlight: "/include/plugins/DataTables-Plugins/features/searchHighlight/dataTables.searchHighlight.min.js" },
{ datatables_conditionalPaging: "/include/plugins/DataTables-Plugins/features/conditionalPaging/dataTables.conditionalPaging.js" },
{ datatables_ellipsis: "/include/plugins/DataTables-Plugins/dataRender/ellipsis.js" },
{ datatables_yadcf: "/include/plugins/yadcf-0.8.8/jquery.dataTables.yadcf.js" },
{ ckeditor: "/include/plugins/ckeditor/ckeditor.js" }
],
function() {
console.log('All jQuery plugins loaded, loading APP js files...');
APP_js_files();
});
}
// Step #3
function APP_js_files(){
head.load([
// Load the application JS files
{ APP_plugins: "/include/js/APP_plugin.js" },
{ APP_intro: "/include/js/APP_intro.js" },
{ APP_app: "/include/js/APP_app.js" },
{ APP_confirmation: "/include/js/APP_confirmation.js" }
],
function() {
"use strict";
console.log('Successfully loaded all APP js files!');
$.ajaxSetup({
cache:false
});
App.init();
template.init();
account.init();
admin.init();
assets.init();
forms.init();
});
}
The above code is inside init.js, which is loaded via..
<script type="text/javascript" src="/include/js/head.min.js" data-headjs-load="/include/js/init.js"></script>
Is this the right way to do it? The documentation on head.js is pretty limited.
Thanks

Current implementation don't support query or ordering of loading, as I can sas in source code, that's why your solution of the problem is one of the best.

Codemirror autocomplete and auto closing brackets doesnt trigger change event

I have the following problem. I've written a server and client scripts for node js that work as live collaboration code editing. 2 or more people can code in the same instance of CodeMirror editor. Until i have enabled autocomplete feature and auto closing brackets it was working perfect, but after i did it messed up the work. When you use autocomplete list or when bracket or tag will be closed by module not by you manually it will not be recognized as change. I have inspected an object that CodeMirror instance is returning and it doesnt contain change that have been done automatically. its not even strictly problem for node js beacuse if you want lets say, send changes to server via ajax and save in a file, it wont happen beacuse its not present in change object. Anyone had similiar problem and can help?
client code:
var appCM = CodeMirror.fromTextArea(document.getElementById('app-cm'), {
mode: 'text/html',
theme: "monokai",
styleActiveLine: true,
lineNumbers: true,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true,
autoCloseTags: true,
autoCloseBrackets: true,
matchTags: false,
extraKeys: {
"Ctrl-Space": "autocomplete",
"Ctrl-Q": function(appCM) {
appCM.foldCode(appCM.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
readOnly: access
});
appCM.on('change', function(i, op) {
socket.emit('change', op);
});
socket.on('change', function(data) {
appCM.replaceRange(data.text, data.from, data.to);
});
server code:
socket.on('change', function(op) {
if(op.origin === '+input' || op.origin === 'paste' || op.origin === '+delete') {
clients.forEach(function(client) {
if(client !== socket)
client.emit('change', op);
});
};
});

You are explicitly filtering out changes whose origin isn't one of input/paste/delete. Why are you doing that? You'll need to propagate all changes if you want peers to stay in sync.

Is there an example of setting and retrieving settings from a Rally SDK 2 app?

What does a settings object look like? I can't seem to updateSettings with anything and get something back interesting. I'm printing out this.settings and every time I refresh, it just logs a prototype object with no values.
This is what my test app looks like. I am putting it into a panel inside Rally, not running remotely.
<script type="text/javascript" src="/apps/2.0p2/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
/*global console, Ext */
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
console.log( "settings", this.settings );
this.updateSettings( { Name: 'test', Value: Ext.JSON.encode( { test: "blah" } ) } );
}
});
Rally.launchApp('CustomApp', {
name: 'test'
});
});
</script>

Turns out there is a bug in the preview version I was using. And I was trying to pass the wrong kind of preference. Note that preferences are scoped to the App ID and not to the project or workspace. Since it needs the app's ID, it doesn't work when run outside Rally.
The bug is that the updateSettings function is missing a line. You can easily override this by adding the same function to your app definition (isn't it neat that the source is included in the docs?) Just make a function like this:
updateSettings: function(options){
Rally.data.PreferenceManager.updateAppPreferences({
appID: this.getContext().get('appID'),
settings: options.settings,
success: function(updatedSettings){
Ext.apply(this.settings, updatedSettings);
if(options.success){
options.success.call(options.scope);
}
},
scope: this
});
}
So, then, the preference object should be passed like this:
this.updateSettings( {settings: { test: "blah" ) } } );
Then, when it comes back, the getSetting("test") will give me "blah". (It creates a preference with Name equal to "test", Value equal to "blah" and an AppId equal to the current app.