LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • Overview
  • The JourneyApps Print app
  • How to print from JourneyApps
  • Understanding ZPL
  • ZPL Quick Tips
  • Commonly used commands
  • Example ZPL
  • Special characters
  • Size Units
  • Generating ZPL in JavaScript
  1. Build your App
  2. Integrate your App

JourneyApps Print (Android)

PreviousHTTP requests (Fetch API)NextOpening external links/apps

Last updated 2 years ago

Overview

Not recommended

JourneyApps Print is no longer recommended and support for it may be removed in the future. Use the API instead to communicate with Zebra Bluetooth printers.

Platform compatibility

  • The JourneyApps Print app is only available for Android devices and can be downloaded from the .

  • This feature is currently only available for customers on the plan.

The JourneyApps container can print receipts and other documents using a Zebra ZQ500 series mobile Bluetooth printer. This page describes how to create a basic template that can be printed, with the fundamental concepts that need to be understood to print using the JourneyApps Print app.

The JourneyApps Print app

How to print from JourneyApps

The Zebra printer series uses a language called ZPL (Zebra Programming Language) to construct a document. We construct the template for the document in the JourneyApps app using JavaScript/TypeScript, and then we pass the constructed string to the JourneyApps Print app using deep-linking. We use external.uri in JourneyApps to open the JourneyApps Print app as follows:

return external.uri('journeyprint://print?payload='+ generateZPL());

where generateZPL() is any function that generates your ZPL string.

Understanding ZPL

ZPL Quick Tips

  • ZPL is plain text

  • All ZPL commands are uppercase

  • All ZPL commands begin with a caret ("^")

  • A ZPL string begins with ^XA

  • A ZPL string ends with ^XZ

Commonly used commands

ZPL Command
Variables
Example
Explanation
Note

^PWa

a = width

^PW800

Printing Width

Must be used before output is printed.

^LHx,y

x = horizontal y = vertical position

^LH20,100

Label Home

^LLy

y = vertical length

^LL1500

Label Length

Must be used before output is printed.

^POa

a = orientation I: inverted, N: normal

^POI

Print Orientation

Must be used before output is printed.

^FOx,y

x = horizontal y = vertical position

^FO50,100

Field Origin

Sets the position of an individual field.

^FD and ^FS

^FDHello^FS

Field Data and Field Stop

Used to print text. The example will print: Hello.

^CFt,s

t = type s = size

^CF0, 28

Change Font

Will change the font for all following text until another ^CF is used.

^FH

^FO10,50^FH^FDSpecial characters _23 and _3E ^FS

Field Hex

Uses ASCII hex codes to print special characters using an underscore. This will print Special characters: # and >.

Example ZPL

Here's a quick example of a ZPL document:

^XA
^POI
^PW875
^LH0,0
^LL150
^CF0,28
^FO10,50^FH^FDThese are special characters: _23 and _3E ^FS
^XZ

Special characters

Since ZPL uses some characters for certain commands, like ^ and #, we must escape certain characters using the Field Hex (^FH) command. If a field has ^FH command in front like the example above, anything following an underscore ("_") will be escaped. The two characters after the underscore are the hex ASCII values for the corresponding character. For example, 3E is the hex value for the ">" sign.

For dynamic text, you can use this function to automatically escape all special characters:

function escapeZPL(toEscape) {
var returnString = "";
    for (var i = 0; i < toEscape.length; i++) {
        var tempCode = toEscape.charCodeAt(i);
        if ((tempCode < 32) || (tempCode > 32 && tempCode < 48) || (tempCode > 57 && tempCode < 65) || (tempCode > 90 && tempCode < 97) || (tempCode > 122)) {
            returnString = returnString + "_"+tempCode.toString(16).toUpperCase();
        } else {
            returnString = returnString + toEscape.charAt(i);
        }
    }
    return returnString;
}

Size Units

The unit of size when printing is dots. The default printing resolution is 8dpmm (dots / mm). If your page is 4.3inch (109mm) wide, the total dots is 8dpmm x 109mm = 872 dots.

Generating ZPL in JavaScript

ZPL uses absolute positioning for layout. Therefore, you must keep track of the position where you want to print, as well as the total length of your document. A good idea is to have a variable called currentHeight and use print lines relative to this. After each line is added, add the height of the line to currentHeight. You can define certain constants to only change one value to change the whole document:

var zplStartString = "^XA\n^PW610\n";
var zplMainString = "";
var zplBottomString = "^XZ";
var currentHeight = 100; //these units are in dots. 100 dots is 12.5mm
var leftMargin = 20;
var lineHeight = 30;
var bottomMargin = 80;

zplMainString += "^FO"+leftMargin+","+currentHeight+"^FH^FDSome text^FS";
currentHeight += lineHeight; // this moves currentHeight on by the specified lineHeight

At the end of our document, we must add the ^LL command to the total string. It must be between zplStartString and zplMainString:

zplStartString += "^LL" + (currentHeight + bottomMargin);
return (zplStartString + zplMainString + zplBottomString);

The Zebra Bluetooth printers have a permanent memory that stores certain values even if the device is turned off. Many of the commands are persistent and should be explicitly defined every time you print. For example, if the previous print had a ^LL100 (label length) command, and you don't specify a new ^LL, it will print the document also with a length of 100.

The JourneyApps Print app is a separate application that handles the printing with the Zebra printer. It is currently only available on Android and can be downloaded from the .

ZPL is a page description language that uses plain text to build the desired document. It uses special characters and commands to distinguish between instructions and text to print. The official documentation of ZPL can be found .

For static text you can escape manually by using the hex .

💻
Play Store
here
ASCII table
SerialPort
Play Store
Enterprise