Help understanding Scripting in HTML Viewer Widget?

Continuing the discussion from Help is needed with Set Widget Value action:

I must be missing something here, or my code isn’t right, because I can’t get this to work.

When I click on the Automation Command Widget shown below, nothing happens to the page. At the very least, I should get an Alert Box showing “You got me!”

Wouldnt you need to inject the script first and then invoke it?

That just occurred to me as well @Jesse. Still not working, but I don’t know how the flow goes…

I have struggled getting mine to work as well. I am not sure if its my Script or my action use. I know my script is probably wrong… but maybe we both are missing something. Maybe inject the script on the new HTML Widget Loaded rule… and invoke it with the command?

Still no go…

Inject script parameter should be the handler name of the script (H_ChangeColor). It will add script to the header section of the html.

Execute script parameter will be the function name (ChangeColor()) of the script. If web page already contains a function you can execute it too. Test it without parameters first and when you make it work start adding parameters.

You can handle HTML Widget Document Completed rule for testing. It will be better to inject script after page loads.

When you make it work for the first time it becomes great fun.

I have had success with executing a script that is already in the Page, but I cannot get the Inject to work…

What am I missing here?

Can you try setting ChangeColor function name parameter without parenthesis for the action?

Yup, that worked! My alert shows up… BUT over and over again it shows… I can’t get it to go away!

Multiple handlers might be created during you enter, exit design mode. Can you try restarting SambaPOS?

I exited SambaPOS and the Alert was still there. Had to Kill SambaPOS process. Now worries - I don’t think I’ll be using Alert.

Happy to report that this also works:

ChangeColor('')

Very cool! Off to the races… now, what to do with this powerful feature? Hmm…

If you see multiple alerts that means function executes multiple times. One reason is entering, exiting design mode will create additional function handlers inside SambaPOS but it should go away after restart. Also in this case it should not force you to restart sambapos. If there are two handlers alert should display twice and it should stop. (It happened me while implementing the feature)

If it doesn’t go away there might be an issue with one of the rule constraints.

Edit: I’ve quickly setup something similar to yours. It works fine (displays once) if I don’t enter design mode :slight_smile:

2 Likes

That would explain it… I must have gone in/out of Design mode 50 times…

Great now I just need to get my scripts right lol.

Just to give people a head-start to doing things with Javascript…

When it comes to Javascript in a Webpage, we basically have 3 layers:

  • Window (the HTML portion of the page)
  • Document (DOM - Document Object Model)
  • Javascript

It’s important to know which layer (or Object) you are trying to affect, because different types of Objects have different Methods and Properties. Take the following code for example:

window.location.href = 'http://localhost/?screen=PURCHASE';

document.body.style.backgroundColor='#FF0000';

document.getElementById('sinventoryitemtypefilter').value='Coffee';
document.requests_FORM.igroupcodefilter.value='Coffee';

document.getElementById("requests_FORM").submit();
document.requests_FORM.submit();

var acollection = document.getElementsByTagName('a');
acollection[4].click();
var divcollection = document.getElementsByTagName('div');
divcollection[7].click();

This causes the window to navigate to the given href, in this case, a full URL is provided:

window.location.href = 'http://localhost/?screen=PURCHASE';

This causes the Document Tag Element called body to set the value ‘#FF0000’ (red) into it’s backgroundColor style Property, effectively setting the page background color to Red:

document.body.style.backgroundColor='#FF0000';

This causes the Document Element whose ID is defined as sinventoryitemtypefilter to set the value ‘Coffee’ into it’s value Property. This is a simple way to set a Form Input value programmatically:

document.getElementById('sinventoryitemtypefilter').value='Coffee';

This causes the Document Element whose FORM Name is defined as requests_FORM to set the Form Input element whose name is igroupcodefilter to have ‘Coffee’ in it’s value Property. This is another simple way to set a Form Input value programmatically:

document.requests_FORM.igroupcodefilter.value='Coffee';

This causes the Document Element whose FORM ID is defined as requests_FORM to invoke the submit() method, effectively sending the form data to the server to be processed.

document.getElementById("requests_FORM").submit();

This does the same thing as above, but in this case we are referencing the FORM Name defined as requests_FORM to invoke the submit() method.

document.requests_FORM.submit();

This code searches the Document for all HTML Tag Elements of type ‘a’ and stores them into an array object called acollection. It then invokes the click() method on the 5th member of the acollection array. HTML Tags which go by the Name of a are Hyperlink tags, so this is like clicking on a hyperlink.

var acollection = document.getElementsByTagName('a');
acollection[4].click();

This code searches the Document for all HTML Tag Elements of type ‘div’ and stores them into an array object called divcollection. It then invokes the click() method on the 6th member of the divcollection object. HTML Tags which go by the Name of div can be thought of as formatting blocks or boxes in the page, so this is like clicking on one of those blocks. This may or may not have any effect on the div in question, but if the div element has an onClick() handler, something will happen.

var divcollection = document.getElementsByTagName('div');
divcollection[7].click();
1 Like

Anyone, please let me know if…

  • there are any errors in my explanations above
  • incorrect terminology has been used
  • something can be re-worded to make it more clear

I have one small problem I am using just a basic script to test a login to TimeTrex.

function LogIn() {

document.getElementById('user_name').value='Admin';

document.getElementById('password').value='password';

document.login_btn.click()

}

It is working half the time… half the time it does not fill in the values… Any ideas?

I am using Inject and Invoke in same rule… I wonder if its not having enough time?

Hmm oddly now its working every time… I had to change

document.login_btn.click() TO document.getElementById(‘login_btn’).click()

This makes sense to me. The cool thing is every time I logout of TImeTrex from within the widget it automatically logs it back in haha. This is actually good as I do not want people able to login under different names.

I added Time Clock command button on my POS screen. Its really just set to change entity so it switches to HTML Enttity Screen… When you press it, it automatically loads timetrex and logs in with username/password… now I just need to develop a system for it to read Entity name so it can inject the right login for the current Entity.

If only I could pass {ENTITY NAME} directly into the script. Or is this possible already?

1 Like

I think you just answered my last part of the post above with your new tutorial :stuck_out_tongue:

Boy make it automated like mine where it does the inject and invoke in same HTML loaded rule… then try to enter design mode… hahahahaha that was a disaster…it was running the script so much and reloading the site so much that I almost had to ctrl alt delete… it finally went to main menu but even main menu slowed to a crawl.