Getting Started

20 Nov 20173 minutes to read

This section explains you briefly on how to create one dimensional and two dimensional barcodes and customizing its appearance in your EmberJS application.

You can easily configure the barcode to any DOM element such as div or span. It takes text and symbologyType as input and renders the encoded text as barcode.

Copy the ej.web.all.min file into the vendor folder.

Adding a QR Code

Create an HTML file using the following code example for Ember JS Barcode creation.

  • HTML
    • <!DOCTYPE html>
<html>
   <head>
      <title>Getting Started Essential Ember JS</title>
      <!--scripts-->
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="http://cdn.syncfusion.com/21.1.35/js/ej.widgets.all.min.js"></script>
      <!--Add custom scripts here -->
   </head>
   <body>
      <!-- Add Barcode element here. -->
   </body>
</html>

    Add div container for barcode rendering.

  • HTML
    • <div id="barcode">
	
</div>

    Set the symbologyType and provide input URL to the text property to render the QR Code.

  • JAVASCRIPT
    • import Ember from 'ember';
export default Ember.Route.extend({
   model(){
    return {
            Text:"SYNCFUSION",
			xDimension: 10,
        }
    }
});

    Adding a Code128 Barcode

    Create an HTML file using the following code example for creating a Code128 barcode.

  • HTML
    • <!DOCTYPE html>
<html>
   <head>
      <title>Getting Started Essential Ember JS</title>
      <!--scripts-->
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="http://cdn.syncfusion.com/21.1.35/js/ej.widgets.all.min.js"></script>
      <!--Add custom scripts here -->
   </head>
   <body>
      <!-- Add Barcode element here. -->
   </body>
</html>

    Add div container for barcode rendering.

  • HTML
    • <div id="barcode">
	
</div>

    Set the symbologyType and provide input to the text property to render the Code128 barcode.

  • JAVASCRIPT
    • import Ember from 'ember';
export default Ember.Route.extend({
   model(){
    return {
            Text:"SYNCFUSION",
			quietZone: {all: 20},
        }
    }
});

    Customizing the Barcode appearance

    The height of the barcode can be changed using the barHeight property. The equivalent property to change the block size for two dimensional barcode is xDimension. You can also customize the barcode color by changing the darkBarColor and lightBarColor properties.

    NOTE

    This color customization is possible only for one dimensional barcodes and it is not supported for two dimensional barcodes.