Custom Date Selection with HTML & JS


#1

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 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. ( https://github.com/dbushell/Pikaday) 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.


Prompting for date insert
Open date picker in custom report in entity screen
#2

#3

#4

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


#5

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


#6

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.