Custom Date Selection with HTML & JS

By 5.1.60 update our message server have a small web server and we can benefit from it to implement some custom stuff that helps us to build better operator workflows. Having a date picker on data editing screens is something requested a lot so I’ll show you how to implement a custom data entry screen with some customization. I’ll prepare a small Javascript app to select dates and operate it with Popup Browser action.

First of all we need to enable web server on message server service application. That explained under SambaPOS 5.1.60 Release - #5 by emre topic.

After enabling web server you can place your application files under SambaPOS installation folder. If you didn’t do it before create an apps folder under SambaPOS installation folder and place deliverydate application under that folder.

Please remember you’ll copy application under SambaPOS installation folder where message server service is actually runs. If it runs on same server with SQL server you should copy application to server machine.

This is the application I’ve created. I used pikaday.js datepicker. ( GitHub - Pikaday/Pikaday: A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS) Pikaday does all stuff we need so to create my date selector application I downloaded content of their demo and played with CSS a little bit to match it to SambaPOS look.

deliverydate.zip (21.1 KB)

When you unzip deliveydate folder under apps folder you can use your browser to test if it works fine or not.

Application flow.

  • When you click Delivery Date button on Ticket it reads Delivery Date tag and copies it as an URL parameter. So navigating to http://localhost:9000/apps/deliverydate/?1 1 2010 URL (you’ll normally see %20’s instead of spaces) the selected date becomes 1 January 2010.
  • When you select a date app saves selected data as a local program setting. Specifically this line does it.
window.external.SetLocalSettingValue('Delivery Date',this.getMoment().format('DD MM YYYY'))
  • Clicking OK button updates Ticket Tag with Delivery Date local setting.

So we can pass parameters to app by using URL parameters and app can update Local settings by using window.external.SetLocalSettingValue() function. We can read that setting in SambaPOS automation to read selected values.

Here are the Rules and Actions I added.

I created an action to update Ticket’s Delivery Date tag.

Another action to Display Popup browser. Please note how I added [:param] variable to pass selected date to JS Application. When OK button clicked it executes Update Delivery Date automation command.

This automation command displays Delivery Date button. Don’t forget to map it to Ticket Screen.

This rule works when Delivery Date button clicked and it Displays Date Selector. Current delivery date passed to param variable.

Finally this action works when OK button clicked on Date Selection screen.

I hope you liked it. I know this sample make you think about new automation possibilities so please feel free to share your ideas.

9 Likes

Wow this is awesome. I have been away for a while. A lot of thing to catch up with new app.

Ohhh that’s awesome! Gives me hope that we could also potentially create that color picker I found and wanted to implement in a new config task I was trying to build… I wonder if we could do this for config tasks also

I wanted to update this tutorial to document currently available automation functions to integrate JS Snippets to SambaPOS.

window.external.SetLocalSettingValue(name,value); //update a local setting
window.external.GetLocalSettingValue(name); // read a local setting
window.external.SetGlobalSettingValue(name,value); // update a global setting
window.external.GetGlobalSettingValue(name);  //read a global setting

window.external.GetExpression(templateContent); // evaluates printer template and returns result.
window.external.ExecuteGraphql(gql); //executes a graphql script and returns result.
window.external.ExecuteAutomationCommand(commandName,commandValue); //executes an automation command with given value.
window.external.ExecuteAction('Close'); //Closes browser popup dialog.
4 Likes

Hi emre!

This date picker was exactly what I was looking for and I’ve been trying to implement this, but I have run into a problem where the date picker pops-up, but the {:Delivery Date} does not seem to get a value from the date picker.

Here is my setup:
image

image

image

image

image

I put this Popup action here to see what {:Delivery Date} is, but it shows up as…nothing.(I’ll show that later on)


When Future Date is clicked the popup browser works fine.

image

and then the ticket tag is not updated…

Here is the popup:
image

Meaning, the {:Delivery Date} is null…
I am unsure of where to proceed from here…

Thank you in advance, any help is appreciated!

It’s null because you changed it. You used Pickup Date instead of Delivery Date. Try {:Pickup Date}

It’s very important not to change parts of a tutorial unless your sure what you are doing.

Hmm. I did try {:Pickup Date} as well.
(As well as:
{SETTING:Pickup Date}
{:Pickup Date}
{LOCAL SETTING:Pickup Date}
{SETTING:Delivery Date}
{:Delivery Date}
{LOCAL SETTING:Delivery Date})

I had assumed that because

window.external.SetLocalSettingValue('Delivery Date',this.getMoment().format('DD MM YYYY'))

in the deliverdate.zip was still set as Delivery Date, so I had kept it the same.

Does not work in version 5.3.0

Ok I had time to read the entire tutorial now I understand. I would have to test this on windows 10 with 5.3.0 to be sure its still possible. This is an older tutorial and a lot has changed specifically our libraries.

Ah, the answer that I had sort of thought was…but did not want to accept.

@Jesse Thank you for your help!

Also in continuation, is there something similar to this that I would be able to implement?

@ilyas how do you know for sure its 5.3.0 that does not work with it? What feature is not working?

I think I will build this now and see if I can make it work.

Local Setting and global setting

Those features work. Do you mean specifically the window.external.SetLocalSettingValue call?

{:Delivery Date} {GLOBAL SETTING:Delivery Date} {LOCAL SETTING:Delivery Date} not working

Those are powered by the jscript. Settings work in sambapos 5.3.0 Are you saying the javascript hook is not working? I am about to test this tutorial myself.

I select the date but it is not saved locally