Passing data from native app to Outsystems Web App via Web View

Passing data from native app to Outsystems Web App via Web View

  

I created a custom webpage, hosting it as a local webpage and manged to pass data from my native app to it through the webview using JavaScript and display it as text.

This is the JavaScript code on the webpage side: 

var x = location.search;
document.getElementById("p2").innerHTML = x;

and I am passing the value of it within the url of the webpage. I would like to do the same with the Outsystems Web App but I am unable to assign the value to a widget. Is there a way to do so?

Hi Jerome,

If you want to add some text to an element with javascript you can add an xy Expression to your screen with the following value:

"<script>
document.getElementById('" + <Name of element>.Id + "').innerHTML = x;
</script>"

and set its Escape content property to No.

Is this what you want?

Cheers,

José

José Costa wrote:

Hi Jerome,

If you want to add some text to an element with javascript you can add an xy Expression to your screen with the following value:

"<script>
document.getElementById('" + <Name of element>.Id + "').innerHTML = x;
</script>"

and set its Escape content property to No.

Is this what you want?

Cheers,

José

Yes it is! Thank you, guess I didn't think of using it in that way and include the id. Is there a way to pass this value to an input parameter or local variable?


Hi Jerome,

You want for the x to come from an input parameter or local variable? If that is the case, you can do like this:

"<script>
document.getElementById('" + Elemento.Id + "').innerHTML = " + InputVar + ";
</script>"

Is that ii?

Cheers,

José

José Costa wrote:

Hi Jerome,

You want for the x to come from an input parameter or local variable? If that is the case, you can do like this:

"<script>
document.getElementById('" + Elemento.Id + "').innerHTML = " + InputVar + ";
</script>"

Is that ii?

Cheers,

José

Hi Jose, I meant I would like to pass the x to an input parameter or local variable. If so is it just as simple as doing,

"<script>
document.getElementById('" + InputVar/LocalVar.Id + "').innerHTML = x;
</script>"


Hi Jerome,

Returning then to your original post, how were you "passing the value of it within the url of the webpage"? Because you can pass the value to an OutSystems page in the same way.

Cheers,

José

Hi Jerome,

I realized now that you are working on a mobile app. Right?

Check the attached oml where you can go to another screen whose input parameter is the innerHtml of an element.

Is that what you want?

Cheers,

José

Yes I am using a native app as a shell with a webview showing the outsystems web app. While I can take the end value of the url in javascript and pass it to an expression, I am unable to pass it to the local variable Var1 in javascript. 

Hi Jerome,

I'm starting to get what you want... :)

To get a value from javascript to an OutSystems variable you can do this (maybe there is another way but I do not know):

  • Have your variable bound to an input and give the input a Name
  • Have a button with a Name
  • Hide both
  • Have a submit action to update the variable value
  • Call the following javascript:
document.getElementById('" + Input.Id + "').value = 'Some text';
document.getElementById('" + Button.Id + "').click();
  • This will get the value in the input, and call the action where the value of the variable will be updated.

I've attached a oml with a simple example.

Cheers,

José

José Costa wrote:

Hi Jerome,

I'm starting to get what you want... :)

To get a value from javascript to an OutSystems variable you can do this (maybe there is another way but I do not know):

  • Have your variable bound to an input and give the input a Name
  • Have a button with a Name
  • Hide both
  • Have a submit action to update the variable value
  • Call the following javascript:
document.getElementById('" + Input.Id + "').value = 'Some text';
document.getElementById('" + Button.Id + "').click();
  • This will get the value in the input, and call the action where the value of the variable will be updated.

I've attached a oml with a simple example.

Cheers,

José

I see, I saw previous answers that stated what you are mentioning but yours is a more comprehensive answer. Thank you I will try it later on tonight. 


Hi,

Sorry for disappearing, I fell ill so I took a break. 

The example you gave shows how to use javascript to transfer data to the variable through the input but I would like to transfer data to the variable through expressions.

This is the code I use to grab data from the url, and I would like to send x to a variable which I am unable to do:

"<script>
var x = location.search;
document.getElementById('" + HelloWorldExpression.Id + "').innerHTML = x;
</script>"

Any ideas on how to put the data into the variable?

Hi Jerome,

When you say "put the data into the variable", the variable is an OutSystems variable? Or a javascript variable? If it's an OutSystems variable you can use the method I presented in the sample oml.

What do you mean by "transfer data to the variable through expressions"?... After having the value in an OutSystems variable you can use it in expressions...

Could you be a little more clear?

Cheers,

José

Hi Jose,

What I mean is I captured a value in the url through expressions using this code

"<script>
var x = location.search;
document.getElementById('" + HelloWorldExpression.Id + "').innerHTML = x;
</script>"

For example if my url is "http://example.outsystems.com/Example/Home.asp?Name=Value"

My Expression will then display "Name=Value"

I would like to then place "Name=Value" as a string into an Outsystems Variable but I am unable to. I have tried inserting the Outsystems variable into the javascript but there is always an error. 

Solution

Hi Jerome,

If you know the name of the parameter (Name in your example), this should work:

  • Have in your screen an Input parameter with the name "Name"
  • Then, your expression in your screen could be: "Name=" + Name

If not, this should also work as it is a more generic solution:

  • Use the GetRawURL from HTTPRequestHandler module
  • Split its resulting string (from the previous step) by the '?' character
  • Split the second resulting string (from the previous step) by the '&'
  • This will give the expressions that you want.

Is this what you want?

Cheers,

José

PS: Maybe there is a better method than using the GetRawURL to get the input parameters, but I do not know.

Solution

Hi Jose,

Yes that is exactly what I was looking for. Totally forgot about modules! Thank you.