Using variables in a web page

#1 · October 13, 2019, 5:07 am

I have searched the forum for anything like this for VisualNeo Win (lots for VisualNeo Web) and after I got about 5 pages deep I thought it might be quicker to just ask. I want to embed a web page in my application. In the web page I want to display some variables I have collected from the user inside that web page. Is this possible?

Thanks Guys

#2 · October 13, 2019, 6:59 am

Hello,

What is a "....the user inside that web page." ?

Anyway, you may have a look the help file and the web object's doc.

There is a JavaScript command "nbGetvar" which does transfer Content of a neobook variable into a JavaScript-variable or html object.

Regards

Hans-Peter

#3 · October 13, 2019, 7:40 am

Hi Hans-Peter

Yeah so I guess I could have used a comma there.

So I have an html file on my local computer and I want the users name put into that web page. In my application the user enters their name at the start of the application. At the end I want to show the web page but with their name in it. I have looked at the help file. Specifically BrowserSetElement as this seemed to be in the right direction. In the help file it states:

BrowserSetElement

Purpose: Set the contents of an HTML-based element. This action can be used to fill in web-based forms.

However I don't want the users name to go into a form element. I tried making an ambiguous element as so:

<html>
<body>
<nameElement>[username]</nameElement>
</body>
</html>

But this is not working. I am beginning to think that this will only work text input elements in a form in a web page?

#4 · October 13, 2019, 8:17 am

#5 · October 13, 2019, 1:35 pm

Not sure if this helps,

https://archive.visualneo.com/viewtopic.php?f=24&t=21904

#6 · October 13, 2019, 3:39 pm

@mazzu001

However I don't want the users name to go into a form element. I tried making an ambiguous element as so:
<html>
<body>
<nameElement>[username]</nameElement>
</body>
</html>
But this is not working. I am beginning to think that this will only work text input elements in a form in a web page?

Try this ...

<html>
<body>
<div id="userNameElement">Blah Blah Blah</div>
</body>
</html>

... should work the same for other text elements like p, span etc.

In the Navigate Complete event action section of the WebBrowser object ...

BrowserSetElement "WebBrowser1" "userNameElement" "[username]"

You said ...

I have an html file on my local computer

... I am assuming that this file will also be (at run time) in the user's local computer ... if so, you could ...

- make that file a 'template' for your html i.e. where you want the user's name to appear, store some unique content like $$$userNameHere$$$
- use FileRead and StrReplace to replace the unique string with the user's name
- use FileWrite to write the file back; if you want to keep the template file in its original form, write to [TempDir]
- load the updated html file in the WebBrowser object

#7 · October 13, 2019, 6:49 pm

Hi Gaev,

I will give the html code a try and see if it works.

As for StrReplace. I posted a video (above) where I am getting very strange results using the StrReplace action. It seems to change much more than just the string.

#8 · October 13, 2019, 7:00 pm

Hi Gaev,

When I use the first method you mentioned I still get this error

Error
"userNameElement"
This element does not exist

I've tried a number of different ways of coding my html and it appears as though BrowserSetElement isn't working t all. Is anyone able to get this action to work at all?

#9 · October 13, 2019, 7:14 pm

Update:

So I have found that BrowserSetElement will work on an input type element in a form. The html code below

<testelement name="test">zzHellozz</testelement>
</form>
</body>
</html

I can change the input type to whatever I want. But the testelement I can not change. is this how it was meant to work? If so it may be a good idea to change the name of the action to BrowserSetInputElement and perhaps make the help file a little more clear on its limits.

#10 · October 13, 2019, 8:31 pm

@mazzu001

As for StrReplace. I posted a video (above) where I am getting very strange results using the StrReplace action. It seems to change much more than just the string.

I waythed your video ... it is NOT what I suggested ... perhaps it is your use of the BrowserExport and BrowserLoadFromString that are messing up the remainder of your rendering ... so try again using ...

- FileRead (to load the html file from your local disk) ... say you call the receiving variable [templateHTML]
- StrReplace to change the text string in [templateHTML] from zzHellozzt to what is in your variable [xusername]
- FileWrite to create a new file in [TempDir] from the contents of variable [templateHTML] ... note: if your html depends on other files (images, css, javascript) that are located in the same folder as the html file, then save the changed content in the same folder as the original html file (just use another name).

- then, load the changed file to your WebBrowser object

Follow these exact steps ... if it did not work as anticipated ... post (or show in video) ...

- the commands (including the one deployed to load the changed file) for the Button (make sure entire command lines are visible)
- the parts of the html file around the dummy name

Regarding the solution that deploys BrowserSetElement, did you follow the exact steps I posted ? ... specifically, please post ...

- the parts of the html around the dummy name
- the commands associated with the loading of this file and the code in the Navigate Complete event section

#11 · October 14, 2019, 5:49 am

FileRead StrReplace then FileWrite works.

As for the BrowserSetElement I tried exactly what you posted. I put this in my html file

<html>
<body>
<div id="userNameElement">Blah Blah Blah</div>
</body>
</html>

and I put this in my browser objects Navigate Complete Action

BrowserSetElement "WebBrowser1" "userNameElement" "[xusername]"

I had to change the variable to [xusername] because [username] is a pre defined variable that can not be modified. And I still get the same error

"userNameElement"
This element does not exist

It seems as though SetBrowserObject only effects text input elements. For instance this WILL work:

HTML File with:

<html>
<body>
<input type="text" name="useme">
</body>
</html>

A button Object with:

BrowserSetElement "WebBrowser3" "useme" "Hello World"

This works, but I cant get it to work with any other element types so far. So I am guessing the purpose of BrowserSetElement is to edit <input type="text"> elements only. Good to know. But the ability to change any element in a web page would be a great thing for a wish list though. That would be awesome to see :)

#12 · October 14, 2019, 5:55 am

BrowserSetElement also works with <TextArea> Element. Just in case anyone needs to know.

#13 · October 14, 2019, 4:43 pm

@mazzu001

FileRead StrReplace then FileWrite works.

That would seem to be the simplest solution to your requirement.

It seems as though SetBrowserObject only effects text input elements

I could have sworn I used it with text elements in the (distant) past ... but upon doing some new tests, you are right, it only works with elements where the user can "input' text ... the Help file is a bit misleading in calling them Text Elements.

While there are other solutions, that involve embedding of javascript functions within your html file that ...

- run whenever a page is loaded
- fetch the content of the VisualNEOWeb variable
- replace the content of (html) text type elements (tags like div, p, span etc.)

... a simpler solution might be to code your web page (where the user name needs to be rendered) as an input tag (no need for it to be part of a Form) ... this worked for me ...

<html>
<body>
<input type="text" name="userNameElement" style="border-style: none;">
</body>
</html>

... note the style property is set to NOT show a border ... just make sure your [xusername] variable is populated BEFORE asking for the html page to be rendered in the WebBrowser box.

If this work around is not acceptable (because a user can click on the input box containing the name and then change it), let me know and I will try and come up with a solution (javascript code) that changes the content of a text element (like div, p or span).

Using variables in a web page - Forum

Using variables in a web page