Flutter - How to get a Javascript callback in WebView? - javascript

I am using a WebView to load a local HTML file that contains the callback -
function onReward(data){
console.log("onReward: " + data.earnedThisSession);
Survey.postMessage(data.earnedThisSession);
}
This callback gets triggered when a user completes an action, I am currently facing two problems
The data.earnedThisSession returned by the function differs from every user and I want to get this as a variable in my dart code to reward my user
My WebView dependency is not printing console messages in my debug console
This is my JavascriptChannel -
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'Survey',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
}),
].toSet();
This is my WebviewScaffold -
FutureBuilder<String>(
future: _loadLocalHTML(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Scaffold(
appBar: AppBar(),
body: WebView(
initialUrl: Uri.dataFromString(
snapshot.data,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString(),
javascriptChannels: jsChannels,
javascriptMode: JavascriptMode.unrestricted,
),
);
}
How do I use evalJavascript in this to fetch my reward data?

Changing Survey.postMessage() to window.Survey.postMessage() may work. Im not sure how to use evalJavascipt with WebviewScaffold, i'm using like this:
final _webView = new FlutterWebviewPlugin();
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'Survey',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
}),
].toSet();
_webView.launch(url, jsChannels);
_webView.onStateChanged.listen((event) {
if (event.type == WebViewState.finishLoad) {
_webView.evalJavascript('Your Js Code' +
'window.Survey.postMessage("Your Return Mes.")');
}
});

Related

Trigger a JavaScript function on a WebView in Flutter

I have a webpage that I load on a WebViw in flutter and that webpage has a javascript function that I want to run with a parameter from flutter.
I wrote this uderneath, and it looks like it is running the alert function fine, but when I try to run the function that is defined on the webpage javascript it says it is undefined. Why could this be? Also, do you see any other mistakes on my code that I may be missing, despite it working?
class WebViewPageState extends State<WebViewPage> {
final String url;
final String title;
WebViewPageState(this.url, this.title);
final Completer<WebViewController> _controller = Completer<WebViewController>();
late WebViewController _mycontroller;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Column(children: [
Expanded(
child: WebView(
initialUrl: this.url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webviewcontroller) {
_controller.complete(_mycontroller = webviewcontroller);
},
onPageFinished: (url){
print("Ok we loaded page");
setState(() {
_mycontroller.runJavascriptReturningResult('alert("Hello, World!")');
});
},
))
]));
}
}
runJavascriptReturningResult is trying to get a return value from your javascript and since it's an alert it can't find it. try using _mycontroller.runJavascript('alert("Hello, World!")');

Getting values from my web chat call in my website using backchannel

I'm trying to integrate the backchannel and getting the values.
https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/15.d.backchannel-send-welcome-event
I also tried this. Get URL Referer and Origin header from Microsoft Bot Framework
I also tried deserializing the values still not able to get the data.
how can i get the language values?
here's my sample code:
var userinfo = {
id: 'user-id',
name: 'user name',
locale: 'es'
};
var botConnection = new BotChat.DirectLine({
token: 'mytoken',
user: userinfo,
locale: 'es'
});
BotChat.App({
botConnection : botConnection,
user: userinfo,
bot: { id: 'bot-id', name: 'bot name' },
}, document.getElementById('botDiv'));
botConnection
.postActivity({
from: userinfo,
name: 'ConversationUpdate',
type: 'event',
value: '',
})
.subscribe(function (id) {
console.log('"trigger ConversationUpdate" sent');
});
The purpose of this I want to pass the locale to my bot from my website.
just like in the emulator.
Thanks!
I would recommend adding the locale to the back channel event's channel data. That way on the bot side you can simply access the locale in the incoming activity without having to deserialize any JSON objects when you receive the event. Note, you can also use text or value in place of channelData. See the code snippets below.
BotChat Back Channel Event
// Send back channel event
botConnection.postActivity({
from: userinfo,
name: 'setLocale',
type: 'event',
channelData: "es"
}).subscribe(id => console.log(id));
Bot - C#
public async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
{
if (turnContext.Activity.Type == ActivityTypes.Message)
{
...
} else if (turnContext.Activity.Type == "event") {
// Check for `setLocale` events
if (turnContext.Activity.Name == "setLocale") {
await turnContext.SendActivityAsync($"Your locale is set to {turnContext.Activity.ChannelData}");
}
}
else
{
await turnContext.SendActivityAsync($"{turnContext.Activity.Type} event detected");
}
}
Hope this helps!

How to execute `Rollup` request using `Xrm.WebApi.execute` method in MS CRM using JS

There is a nice example how Rollup function could be called via MS CRM WebApi here.
But it covers general access to CRM WebApi. Although in most recent versions new JS namespace Xrm.WebApi was introduced. Which provides more straightforward way to access that endpoint.
Method Xrm.WebApi.execute should be able to execute Rollup request, as it is able to execute WhoAmI. But I'm struggling to figure out correct values of parameters to make this execution happen.
Here is my code:
var RollupRequest = function(entityType, id, query) {
this.Target = { entityType: entityType, id: id };
this.RollupType = "Related";
this.Query = {
Query: query
};
};
RollupRequest.prototype.getMetadata = function() {
return {
boundParameter: null,
parameterTypes: {
Target: {
typeName: "Microsoft.Xrm.Sdk.EntityReference",
structuralProperty: 5
},
RollupType: {
typeName: "Microsoft.Dynamics.CRM.RollupType",
structuralProperty: 3
},
Query: {
typeName: "Microsoft.Xrm.Sdk.Query.FetchExpression",
structuralProperty: 5
}
},
operationType: 1, // This is a function. Use '0' for actions and '2' for CRUD
operationName: "Rollup"
};
};
var request = new RollupRequest(
"contact",
"0473FD41-C744-E911-A822-000D3A2AA2C5",
"<fetch><entity name='activitypointer'></entity></fetch>"
);
Xrm.WebApi.execute(request).then(
function(data) {
console.log("Success: ", data);
},
function(error) {
console.log("Failure: ", error);
}
);
The code generates following URL:
/api/data/v9.0/Rollup(Target=#Target,RollupType=#RollupType,Query=#Query)?#Target={"#odata.id":"contacts(0473FD41-C744-E911-A822-000D3A2AA2C5)"}&#RollupType=&#Query={"Query":"<fetch><entity name='activitypointer'></entity></fetch>"}
and the error: "Expression expected at position 0 in ''."
Which, seems to be, indicates that RollupType was not set correctly, because indeed in URL RollupType is missing.
I assume there are more than one potential error, because I'm using FetchXML as query expression. But meanwhile is it possible indicate what should be changed to generate proper URL at least for RollupType property?

Mock different api response based on input with Axios

I'm building some e2e test for my Vuejs application.
The framework I'm using is Nightwatch along with the http library Axios (and the relative plugin for mocking: Axios-mock-adapter) and my current process is to have a file that intercepts all the api, and a file that return the reponse object:
So for example, if I want to mock /api/sources:
mock.onGet(/my.url\/api\/sources/).reply(() =>
[200, ResponseObject.getSources],
);
And in the reponse object file I have:
const getSources = {
files: [
{
id: 'bogus',
fileName: 'bogus',
fileUrl: 'http://bogus.com/1',
size: 400,
uploadedTime: '2018-05-24 10:56:27',
sourceContact: 'boguscontact',
isFolder: false,
}, {
id: 'bogus2',
fileName: 'bogus 2',
fileUrl: 'http://bogus.com/2',
size: 500,
uploadedTime: '2018-05-24 10:56:27',
sourceContact: 'boguscontact',
isFolder: false,
}, {
id: 'bogus3',
fileName: 'bogus 3',
fileUrl: 'http://bogus.com/3',
size: 600,
uploadedTime: '2018-05-24 10:56:27',
sourceContact: 'boguscontact',
isFolder: false,
},
],
};
With this set up I have a very annoying problem:
Sometimes I have to return different object through the same api call, for example, if the file has a property ready and I want to test the user-flow to prepare a file to be ready I need to return the file with ready: false the first time, then I add some parameters, and then I have to return the file with ready: true. How can I do that?
Another example would be getting a single source file. I have the same api call api/source/:sourceId but when the source has ready: true it needs to have more parameters compare if the source has ready: false, but I don't know how to simulate that behaviour without a backend.
Right now the only thing I can do is to have a different response based on the query parameters:
mock.onGet(/dmd\.mocked\/api\/files/).reply((config) => {
if (typeof config.params !== 'undefined') {
switch (config.params.status) {
case 'queued':
return [200, ResponseObject.queuedFilesList];
case 'processing':
return [200, ResponseObject.processingFilesList];
default:
return [506];
}
} else {
return [200, ResponseObject.queuedFilesList];
}
});
but this approach works only if I make the call with different parameters. If I make the call without any parameters I don't know how to diversify the response.

Ionic Cordova can not share video on social sites

I am trying to use the cordova social sharing plugin for sharing video on social sites. So far what I have achieved is, I have successfully captured video using following code -
var options = {
limit: 1,
duration: 15
};
$cordovaCapture.captureVideo(options).then(function (videoData) {
$scope.videoUrl = videoData[0].fullPath;
}, function (err) {
// An error occurred. Show a message to the user
//alert("video error : "+err);
});
I can successfully find the captured video files url but unfortunately I can not share them to the social media sites. I have tried both of the following methods -
$cordovaSocialSharing
.share(message, subject, file, link)
and
$cordovaSocialSharing
.shareViaTwitter(message, image, link)
Now my question is -
Is there any way to share video through this approach?
If not, please let me know if there is any possible way for this.
N.B. : I have already bothered the Google a lot.
Thanks in advance.
my problem was passing a bad filePath, so i found a solution like below :
import {CaptureError, MediaFile, MediaCapture, CaptureImageOptions, Transfer} from "ionic-native";`
declare let cordova: any;
private static options = {
message: '', // not supported on some apps (Facebook, Instagram)
subject: '', // for email
files: [''], // an array of filenames either locally or remotely
url: ''
};
videoOptions: CaptureImageOptions = {limit: 1};
videoData: any;
captureVideo() {
MediaCapture.captureVideo(this.videoOptions)
.then(
(data: MediaFile[]) => {
this.videoData = data[0];
const fileTransfer = new Transfer();
fileTransfer.download(this.videoData.fullPath, cordova.file.applicationStorageDirectory + 'fileDir/filename.mp4').then((entry) => {
this.options.message = " Your message";
this.options.subject = "Your Subject";
this.options.files = [entry.toURL()];
this.options.url = "https://www.google.com.tr/";
SocialSharing.shareWithOptions(this.options);
}, (error) => {
});
},
(err: CaptureError) => {
}
);
}
As you see above, i just copy my video file to applicationStorageDirectory

Categories