Using App Connect with JavaScript Functions

<script>
  dmx.app.set('appName', dmx.app.name);
</script>
<div is="dmx-browser" id="browser"> </div>
<dmx-json-datasource id="trans" is="dmx-serverconnect" dmx-bind:url="../../assets/locales/{{browser.language}}/{{appName}}.json"></dmx-json-datasource>

That was one of the ways I tried :smiley:

I get this error TypeError: dmx.app is undefined

Although If I query it via console just after I can see itā€™s not undefined.

Is the dmxAppConnect.js included before the script block with the dmx.app code?

Iā€™ve tried at the end of head, at the beginning of body and at the end of body. App Connect is at the beginnning of head. Always the same error.

Waiting for document ready seemed to do the trick. However I donā€™t know if this is a good approach.

<script src="../../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script>
$( document ).ready(function() {    
	dmx.app.set('appName', dmx.app.name);
});		
</script>
<div is="dmx-browser" id="browser"> </div>
<dmx-json-datasource id="trans" is="dmx-serverconnect" dmx-bind:url="../../assets/locales/{{browser.language}}/{{appName}}.json"></dmx-json-datasource>

Edit: Not too happy about this solution as itā€™s calling twice the file I want to retrieve. First without the variable being set.

image

Ah yes, the page must be parsed first. Waiting for document ready is good.

Any way you can think of to avoid the duplicate call while waiting? Check my previous edit.

I ended up changing to a vanilla js dom ready function and I no longer have the duplicate request. I got rid of the 404 error.

<script src="../../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>

<div is="dmx-browser" id="browser"> </div>

<script>
	var callback = function(){
	dmx.app.set('appName', dmx.app.name);
	};

	if (
		document.readyState === "complete" ||
		(document.readyState !== "loading" && !document.documentElement.doScroll)
	) {
	callback();
	} else {
	document.addEventListener("DOMContentLoaded", callback);
	}
</script>

<dmx-json-datasource id="trans" is="dmx-serverconnect" dmx-bind:url="../../assets/locales/{{browser.language}}/{{appName}}.json"></dmx-json-datasource>

All peachy now.

1 Like

Hi @patrick,

Can you nest dmx.parse inside a dmx.parse? Iā€™m using the zxcvbn library to check the password strength of an input. But Iā€™m not able to nest two of them.

Maybe you can try the new App Connect Flows for that?

And also the new App Connect global data to inject data straight in App connect root.

1 Like
dmx.parse("register.passStrength.setValue(" + zxcvbn(dmx.parse("register.inputpassword.value")).score + ")");
4 Likes

That did the trick!
Thanks!

I also got a good look at flow but wasnā€™t able to run console.log(). Can you call js directly from a flow run?

It is not possible to run js directly in a flow. We will be adding more functionality to it, but 3rd party support will be difficult. I could post some instructions in the future on how to extend flows with your own actions like I did with formatters and the usage of the parse method.

4 Likes

That will be gold, waiting for it, thanks @patrick!

Hi @JonL,

Do you have an implantation example/guide that I can follow for Wappler.

I would like to have a password strength chack.

Thanks,
Ray

I knew I had something pending. I remember reading the notification but forgot to answer.

Unfortunately I donā€™t have one and I donā€™t have the time right now for that. Also it was done before flow was released so I think it doesnā€™t follow an optimal wappler approach as it has a lot of hardcoded js.

I can however help you with doubts whenever you start the implementation. I used the following library by Dropbox.

Hi @patrick, are you able to share the tricks on how we can extend the flows with our own actions, it will be invaluable.

For now, I want to call object functions like console.log() and pass some variables as args to print on console to testā€¦ Is there a way? Thanks in advance!

At the moment, this works (@JonL)

function:'alert',args:['hello']

but this doesnā€™t:

function:'console.log',args:['hello']

TypeError: window[e] is undefined

As a workaround if you just need to output static text to the console you can use eval().

image

If you need to pass Wappler bindings to console log I havenā€™t managed to get the right syntax.

Ideally calling object functions is something that is added to the RunJS action in flows as itā€™s limiting severely the capacity of extending Wappler to use js libraries.

3 Likes

I am trying to figure out if integrating i18next library is worth the time or if I should go the custom route

I canā€™t manage to parse an AC variable into a JS object.

<!DOCTYPE html>
<html lang="en">

<head>
	<base href="/">
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
	<script>
		i18next.init({
		interpolation: {
			prefix : '**',
			suffix : '**'
		},
		lng: 'en',
		debug: true,
		resources: {
			en: {
				translation: {
					"key": "**what** has **count** oranges"
				}
			}
		}
	}).then(dmx.Formatter('string', 't', function (key, temp) {
		return i18next.t(key, temp);
	}));
	</script>
</head>

<body is="dmx-app" id="i18ntest">

	<dmx-value id="count" dmx-bind:value="20"></dmx-value>
	<dmx-value id="name" dmx-bind:value="'Lisa Smith'"></dmx-value>

	<p>{{ "key".t({ what: "Lisa"+" Smith", count: 10+10}) }}</p>
	<p>{{ "key".t({ what: dmx.parse('name.value'), count: dmx.parse('count.value')}) }}</p>

	<script>
		var callback = function(){
		console.log(dmx.parse("name.value")+" and "+dmx.parse('count.value'));
		};

		if (
			document.readyState === "complete" ||
			(document.readyState !== "loading" && !document.documentElement.doScroll)
		) {
		callback();
		} 
		else {
			document.addEventListener("DOMContentLoaded", callback);
		}		
	</script>

	<script>
		console.log(dmx.parse("name.value")+" and "+dmx.parse('count.value'));
	</script>

</body>
</html>

Will render on page:

image

Will output to console:

Clearly dmx.parse needs to wait for the page to be ready to be useful.

Any solution so I can send AC bindings to the i18next library as parameters?

i18ntest.php.zip (1.2 KB)

@JonL, will patrickā€™s suggestion help from this thread?