Help understanding Scripting in HTML Viewer Widget?

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.

I’m not sure if it is possible. I set up the Tutorial in a theoretical way, but it isn’t really working yet. For example, with the iChangeColor(elem,prop,color) function, I set the Invoke Action Parameter as follows:

iChangeColor([:elem], [:prop], [:color])

However, my Rule only shows a setting value for [:color], so I guess I have the Action Parameter set incorrectly, or it only accepts a single [:setting] value. And I can’t get that (1 setting) to work either. Maybe my function is borked. Still playing with it.

I had colors changing, did submit no problem, changed form values, did click methods… it was all working… then I split the Script into several Functions… now I’m not sure any of it works…

I am tyoing with it as well… I actually put that on hold and I am toying with passing values from TimeTrex into command values of SambaPOS.

1 Like

@emre, does the Action Parameter not accept quoted values? I can’t get it to pass the value to the function. Neither of these work:

iChangeColor('#FFFF00')
iChangeColor('Yellow')

Only this works (no quotes):

iChangeColor(Yellow)

And what about default values for a function in the Script, like this…

function iChangeColor(icolor='#000000') {
     document.body.style.backgroundColor=icolor;
}

The only time I’ve been successful at iChangeColor() is when I set the value directly in the script, or use a quote-less value passed in:

function iChangeColor(icolor) {
     document.body.style.backgroundColor='#FF0000';
}

I just successfully made the folowing behavior… I added a button called Clock Out on the same screen as my TimeTrex HTml viewer… when pressed it invoked the Clock out portion of TimeTrex which caused timetrex to record the punch and then send another value back to SambaPOS telling Samba to logout… lol it worked great… Not sure I would use that but it worked!

The really cool thing is… i was able to record a punch inside timetrex WITHOUT all the fancy API calls and .bat stuff I was using. Now thats not to say I would still need that stuff for automation at Login etc… because this only works with HTML widget on screen.

So right now its neat that I got it to work but its not really that functional of a feature because I could just press logout from Timetrex without having to use the extra step of clicking a samba button. This does tell me I can do some cool things that would definitely be functional though.

That unlocks protection against ghosts amulet + 100 experience.

Have fun :ghost:

1 Like

If you include quotes that will be a value with quotes. Just like a quote in a word. This is not a JS parsing. We only need a function name and parameters. It could be iChangeColor,blue or something else. I’ve just formatted it like F(x) to make it look like a function.

OK that’s not so important. Doesn’t it work when you do not include quotes?

@emre, Excluding quotes, this works:

iChangeColor(Yellow)

This does not:

iChangeColor(#FFFF00)

This also does not work:

// script with default value for icolor
function iChangeColor(icolor='#FF0000') {
    document.body.style.backgroundColor=icolor;
}

Subsequently, call the function via HTML Invoke Action:

iChangeColor(Yellow)

That is to say, as soon as I define a default value for the parameter in the function, no value is successfully passed through, quoted or not.

I’ve improved it a bit. I hope it works better on next update.

1 Like

I’ve just added {:SETTING} tag support for scripts.