I'd like to use something that automatically labels images into an sap Fiori app. I found that Cloudinary has an add-on called Google Auto Tagging which should suit well for this purpose. So I followed this guide to use Cloudinary javascript SDK in my controller files of the webapp, and I installed in my PC the javascript SDK but then I'm not able to import Cloudinary library into my project.
I tried to create a zip with the "cloudinary-core" folder, imported it into my project and include "cloudinary-core.js", but I got the error Cannot read property 'Cloudinary' of undefined.
I also tried to include "cloudinary-core.min.js" which should be, from what I understood, the standalone minified version of the library, but had same error.
This is how I'm trying to import the library:
/* global cloudinary:true */
sap.ui.define([
"sap/ui/core/mvc/Controller",
"mdonamcve/libs/cloudinary-core/cloudinary"
], function(Controller, cloudinary) {
"use strict";
return Controller.extend("mdonamcve.controller.MainTable", {
onInit: function() {
var cd = new cloudinary.Cloudinary({cloud_name: "demo", secure: true});
},
...
};
}
I checked the path and it's correct, but "cloudinary" remains undefined.
Cloudinary SDK can be used for sap Fiori apps, right? Am I doing something wrong? Are there any alternatives to Cloudinary in case the latter doesn't work?
If Cloudinary doesn't use UI5's way of defining modules there is a high change that undefined is passed to cloudinary.
The global name of Cloudinary seems to be cloudinary. To not overshadow that just pass a slightly different name when defining your controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"mdonamcve/libs/cloudinary-core/cloudinary"
], function(Controller, Cloudinary /* now with a capital C */) {
This way the globally available window.cloudinary (or just cloudinary) should also be available in your controller. Cloudinary (with a capital C) will still be undefined and can be ignored.
Reference: This blog.
Since you need to use a Cloudinary add-on which requires signing the request, this is to protect you from others abusing that add-on. The easiest solution might be to use the Upload Widget. You will need to also have an endpoint to one of your servers that signs the request before uploading. Everything should be documented here:
(https://cloudinary.com/documentation/upload_widget#signed_uploads)
Related
I downloaded conversejs 9.1.1 and I am trying to learn the plugin architecture by making my own custom plugin. I looked at the http-auth plugin here to see how to add a plugin.
https://github.com/conversejs/community-plugins/tree/master/packages/http-auth
To install the plugin it directs me to the instructions here:
https://m.conversejs.org/docs/html/plugin_development.html
I understand I have to modify my webpage to whitelist the plugin, but for some reason I can't grok a few things. Here is my awesome plugin which resides in a file called Hello-World.js
import { converse } from "#converse/headless/core";
const plugin = {
initialize() {
console.error("Hello World!")
}
}
if (typeof converse === "undefined") {
window.addEventListener(
'converse-loaded',
() => converse.plugins.add("Hello-World", plugin)
);
} else {
converse.plugins.add("Hello-World", plugin);
}
The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.
If it matters I am testing my plugin by running make serve in the conversejs directory and directing my web-browser (Chrome) to localhost:8000/fullscreen.html
Thanks, Wray
The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
converse is available as a global once converse.js has been loaded via the <script> tag.
That's why there's the if (typeof converse === "undefined") { check at the end of the plugin. It waits for converse.js to be loaded if converse isn't yet defined.
I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
Most community plugins are developed in such a way that they're loaded separately via <script> tags. If you do it like that, it doesn't matter where they live.
Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.
You can do it like that if you want to include your plugin inside a custom build of Converse, then you can also import stuff from converse.
The alternative is to load your plugin separately via a <script> tag, but then you can't import stuff and have to use the converse global and the closured _converse object that is passed to your plugin's initialize function.
I am developing a List Report app, using FIORI Elements. It should be capable of exporting the listed data to excel. For this reason, I have added the "useExportToExcel": true in the manifest. While testing it from the VS Code, since it is using latest SAPUI5 version, it is working fine. Yet, once app was deployed, the button is not present. I am assuming the issue is related version in the FES (currently running 1.52.18).
I understand that a button could be added and then do this but still I would like to leave it within the FE framework
Thanks and regards!
You could also add an extension to your project on the ListReport.
Under webapp folder it should create a subfolder ext/controller and the file "ListReportExt.controller.js" in it. You can verify in the manifest.json for the extension configuration.
Then in the lifecycle method "onInit" of the js file, access your SmartTable object by ID.
Use the method setUseExportToExcel(true) of the SmartTable. This should do the trick!
onInit: function() {
const oSmartTable = this.getView().byId(this.getView().getId() + "--table");
oSmartTable.setUseExportToExcel(true);
}
I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);
I am importing the Wizcorp phonegap-facebook-plugin using the intelxdk.config.additions.xml file with this code:
<intelxdk:plugin intelxdk:name="com.phonegap.plugins.facebookconnect" intelxdk:value="https://github.com/Wizcorp/phonegap-facebook-plugin/">
<intelxdk:param intelxdk:name="APP_ID" intelxdk:value="MyActualAppID" />
<intelxdk:param intelxdk:name="APP_NAME" intelxdk:value="fizz points" />
</intelxdk:plugin>
I've read and understand that I will not be able to test this 3rd party plugin in the emulator, or via the test or debug tabs, so I've created a test build for Android.
Based on the documentation, I believe I am supposed to reference this API via calls to the facebookConnectPlugin, such as:
facebookConnectPlugin.login(["publish_stream", "publish_actions", "offline_access"],
fbLoginSuccess,
function (error) { alert("There was an error: " + error) });
However, I know that in the built app, as in the emulator, the facebookConnectPlugin is not defined, because I get an alert based on the following block:
if (typeof facebookConnectPlugin != 'undefined'){
// do stuff
} else {
alert("FacebookConnectPlugin Not Defined");
}
I assume this is because I need to include the 3rd party library in my code in addition to including it in my project where suggested by the helpful comments, something like:
<!-- Most third-party libraries should go here. References (below) are just examples to give you the general idea... -->
<!-- <script src="lib/mc/hammer.js"></script> -->
Initially, I didn't know the path where the 3rd party library is ultimately located in the package after the build tool retrieves it. But I was told that I could change the .apk extension to .zip extract and explore the contents.
I did this, and found that the library was stored in:
www/plugins/com.phonegap.plugins.facebookconnect/www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js
So I added the following to my index.html file:
<script src="plugins/com.phonegap.plugins.facebookconnect/www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js"></script>
However, when built, my test to see if the FacebookConnectPlugin is defined still fails.
Thanks!
Noah
[I've essentially asked the same question on the Intel forums here: https://software.intel.com/en-us/forums/topic/536743 . No solution yet, but if I get one I will post it here.]
You need to build your app and install it on your device to test the WizCorp Facebook plugin. Please make sure you follow the instructions for configuring your app on Facebook.
note the Emulator (simulator) does not support third party plugins as you have noted. Same for using App Preview to test. You must build your app in the cloud.
thanks,
Ian
Are you accessing the facebookConnectPlugin object from inside device ready event?
document.addEventListener("intel.xdk.device.ready",function() {
// try in here
}, false);
It could be undefined if you are accessing it from outside as the plugin is not ready to be used yet.
I need to embed an ember app made with ember-cli into an existing website.
Without ember-cli i would do this:
App = Ember.Application.create({
rootElement: '#app-container'
});
I am basically looking to include the generated assets into my page and not use the index.html file at all.. (The app needs to bind to a div not the body element..)
Wow. Cant believe I didn't try this already..
var App = Ember.Application.extend({
modulePrefix: 'kontrollpanel', // TODO: loaded via config
Resolver: Resolver,
rootElement: '#myapp'
});
I guess i was confused with the use of Application.extend() instead of the Application.create().
As to why ember-cli uses extend i found an answer here: SO: Why ember cli uses extend instead of create