Print Genie: JavaScript Scripts Help You Design Complex and Flexible Labels

Today, I'd like to talk about a common problem in software development – designing flexible printing functionalities.

A few years ago, when our team designed "Print Genie," we adhered to a core principle: separation of printing from the application program. Based on this principle, we provided a complete set of label editors and printing APIs. This significantly simplified the development of printing functions in application software, providing excellent services to numerous factories, retailers, warehouse managers, and software developers.

Imagine a scenario like this:

  • The backend program only needs to prepare data: {Order_Number: "2023001", Amount: 1580.50, Customer: "Zhang San"}
  • The layout and style are defined using the Print Genie editor, deployed online or on an intranet.
  • Calling the API automatically matches and fills the print, as simple as magic.

What's the biggest benefit? When the business department says, "The print format needs to be adjusted," developers can smile slightly and say, "Just modify the label template, no need to touch the code."

Challenges from Reality

However, we soon encountered complex real-world requirements.

The most typical example: Amount Printing.

The finance department requested: "For the same order, the invoice needs '壹仟伍佰捌拾元伍角' (Chinese capital letters for 1580.50), while the internal retention copy only needs '1580.50' (numeric)."

According to the initial design, we could only send an additional field from the backend, such as "Amount in Capitals." While simple, this still required modifying the backend program, violating the principle of separating program and printing.

If we consider more situations: amount in lowercase, Chinese capital letters, English capital letters; printing dates and times in different formats; GS-1 compliant barcode printing for international trade, medical, and other industries, this would greatly increase the workload of program maintenance.

A Flash of Insightful Solution

To pursue maximum flexibility, after careful consideration, we ultimately chose JavaScript scripts as our solution.

The backend program still only provides raw data, but the label printing engine gained data processing capabilities.

With JavaScript's powerful processing capabilities, it can perform conditional judgments, loops, string formatting, date retrieval, function calls, and almost any JS-supported functionality. You can write it however you want, with the only requirement being that the final result must be returned using return.

Implementation Plan

For single-line text, multi-line text, barcodes, and QR codes, the editing interface now includes a JS Script tab where JS scripts can be maintained. The scripts support the ECMAScript 5.1 standard.

Simple Example

1return `${订单日期} ${订单金额}` // return `${OrderDate} ${OrderAmount}`

Using Built-in Library Functions

This example uses the GS1 encoding library function, which can conveniently generate compliant standard GS-1 barcode data, automatically generate check digits based on AI, and insert separators.

1let code = new GS1()
2code.add(GS1.AI.GTIN, "1234567890123")
3code.add(GS1.AI.SSCC, "123456789012345675")
4
5//...add other barcode AI fields
6
7return code.fullcode()

Defining Array Variables and Summation Calculation

1//set 订单明细=[{name:1, price:100}] //set OrderDetails=[{name:1, price:100}]
2
3return 订单明细.reduce((acc, cur) => acc + cur.price, 0); // return OrderDetails.reduce((acc, cur) => acc + cur.price, 0);

Note: Any variables can be used in JS scripts and passed during printing via API calls. However, these variables do not exist during label design, so they need to be predefined, otherwise, a "variable not defined" error will occur.

Solution 1: Define them through the Variable Management interface. The advantage is that it's intuitive.

Solution 2: Define variables using //set var=xxxx at the beginning of the script. The advantage is that it can achieve complex data structures identical to runtime, which is convenient for testing. There should be no space between // and set.

Built-in Common Function Library

We have pre-configured the most commonly used conversion functions:

  • GS1 encoding library functions.
  • Text processing functions.
  • Date processing functions.
  • Number processing functions.
    • toChinese (for Chinese capital letters).

Functions are constantly being updated... For more functions, refer to the Template Built-in JS Script Manual.

Support for Custom Library Functions

When the business department proposes special requirements, such as "the amount should be displayed with thousands separators," we can achieve this through custom functions. Custom functions are effective for the entire label and can be directly called in text, barcode, and other fields.

Actual Results

After implementing this solution, the changes have been significant:

For Third-Party Application Development Teams:

  • 90% of print-related change requests no longer require developer intervention.
  • A large amount of repetitive data formatting code has been reduced.
  • The system is more stable because the core logic is not affected by printing requirements.

For Business Departments:

  • Response time for print format adjustments reduced from "days" to "minutes."
  • Can independently experiment with different print styles.
  • Special printing requirements (e.g., dedicated formats for promotional activities) can be implemented quickly.

Printing functionality may seem simple, but its design approach impacts the scalability and maintenance costs of the entire system. Our Print Genie, by introducing JS scripts, allows us to maintain a clean architecture while meeting increasingly complex business demands.

How does your team handle these kinds of problems? Feel free to share your experiences and thoughts in the comment section!

If you find this article helpful, feel free to share it with anyone who might need it. See you next time!

Leave Your Message

login