Developers



  • Specials Board
    • Introduction
    • Implementation
    • Source Code
  • Dashboard Widgets
    • Introduction
    • How to Create Widgets
Developers
  • Home
  • Setup
  • Documentation
    • V2
    • V4
  • Examples
  • Support
  • Search


Example applications - Digital Specials Board

In this example we have chosen to create a dynamic specials board, that could be displayed on screens throughout a restaurant or similar business that sells products with limited stock.

The specification for this application is as follows:
  • Uses data accessed through the Eposnow API V1 only.
  • Allows for the selection of products from an entire product range to be displayed.
  • Shows these product names on a digital chalkboard with their price and representation of availability.
  • Automatically updates stock representation to accurately show current stock levels.
  • Visually strike out any products that are sold out.


Implementation

To develop our application we begin by creating the main page skeleton:

                    
            <!DOCTYPE html>
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <title>Specials Board</title>
                <link href="css/bootstrap.min.css" rel="stylesheet" />
                <link href="css/SepecialBoard.css" rel="stylesheet" />
                <script src="js/jquery-1.10.2.min.js"></script>
                <script src="js/bootstrap.min.js"></script>
                <script src="js/bootstrap.js"></script>
                <script src="js/SpecialScreen.js"></script>
                <script src="js/Product.js"></script>
            </head>
            <body class="frame">
                <div class="row text-center">
                    <span class="chalk_100">Today's Specials</span>
                </div>
                <div class="row text-right" style="margin-right:100px;margin-bottom:50px;" id="selectButton">
                    <a href="javascript:product.select()" class="chalk_btn">Apply Selection</a>
                </div>
                <div id="products" class="row chalk_10">
                </div>
            </body>
            </html>  
             
            

This is a standard HTML5< document which uses twitter Bootstrap to manage styling. The div with the id products will be used as a container for our product list.
The next step is to create a simple REST API client to communicate with the EposnowHQ API.
The self.ajax function is used to send requests to the EposnowHQ API.

In this app, we will be using the following function to retrieve a list of products and stock values.

                    
      self.ajax = function (uri, method, data) {
        var request = {
            url: uri,
            type: method,
            contentType: "application/json",
            accepts: "application/json",
            dataType: 'json',
            data: JSON.stringify(data),
            crossDomain: true,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", "Basic " + self.API_KEY);
            },
            error: function (jqXHR) {
                console.log("ajax error " + jqXHR.status);
            }
        };
        return $.ajax(request);
    }
                    
                    
self.getAllProducts is a function which uses AJAX to send a GET request to the API. This returns a list of all products.

                    
     self.getAllProducts = function () {
        // Request all products from API
        var req = self.ajax(self.productURI, "GET");
        req.done(function (data) {
            // Store all products
            self.products = data;
            // Display products on-screen
            screen.displayProductList(data);
        });
        req.fail(function (jqXHR, textStatus) {
            console.log("Request failed: " + textStatus);
        });
    }
                    
                    
The next step is to implement the SpecialsScreen function which will be used in conjunction with our HTML5 document to display our list of products.
The code sample below shows how to display this list on the screen.

Full source code for SpecialsScreen.js can be accessed from our Github account (link at the bottom of this page).

                    
    self.displayProductList = function (products) {
       var pDiv = "";
        products.forEach(function (prod) {
          pDiv += ' <div class="row" >';
          pDiv += '<div class="col-md-1"></div>';
          pDiv += '<div class="col-md-1">' + prod.ProductID + '</div>';
          pDiv += '<div class="col-md-1"><input type="checkbox" class="squaredTwo" name="" value="' + prod.ProductID + '"/></div>';
          pDiv += '<div class="col-md-3">' + prod.Name + '</div>';
          pDiv += '<div class="col-md-5">' + prod.Description + '</div>';
          pDiv += '<div class="col-md-1">' + prod.SalePrice + '</div>';
          pDiv += '</div>';
       });
     $(self.productsDiv).html(pDiv);
    }
                    
                    
Once we have a list of products from the API, the user is able to make a selection of the products they wish to be displayed.
When the user has made this selection we need to get the stock values for each of these selected products and display them on the board.

To retrieve the stock values for each selected product we use the code:

                    
    self.getStockForProduct = function () {
        // For all selected products
        self.specialProducts.forEach(function (prod) {
            // Request stock level from API
            self.ajax(self.stockUIR + "?ProductID=" + prod.ProductID, "GET").done(function (data) {
                if (data != null) {
                    data.forEach(function (st) {
                        // Update stock level from response
                        prod.Stock = st.CurrentStock;
                    });
                }
            });
        });
    }
                    
                    
We also need a function to dynamically update our board with the new stock values:

                    
    // Method to refresh stock levels and display on screen
    self.refreshScreen = function () {
        setInterval(function () {
            // Get stock for each selected product
            self.getStockForProduct();
            // Display products on screen
            screen.displaySpecialProducts(self.specialProducts);        
        }, self.screenRefreshRate * 1000); // screenRefreshRate defined in seconds, times by 1000 as milliseconds required.
    }
                    
                    


To initialise the app upon load of the Index page, we need to add a <script> tag to our HTML5 document, which we can use to call our getAllProducts function.


                    
       <script type="text/javascript">
           var product = new Product();
           product.getAllProducts();
       </script>  
                    
                    


Source Code

If you wish to view the complete source code you can do so by visiting our EposnowHQ Github.

All of our Github source code is available for free and can be used to see our example applications from a developers perspective.
You are free to use, modify or extend all of our example applications to suit your needs.

EposNow
About Us
Contact Us
Documentation
API V2
API V4
Example Apps
Specials Board






© 2025 - Epos Now Ltd, Developers