Display a barcode in a table cell with cell render views

A results table that prints part numbers as plain text makes every operator cross-check rows by eye. If the part-number cell also draws the barcode for its own value, one sweep of a handheld reader confirms the row, and the screen doubles as the label. You do not need a report to get this: a table column can render each cell as a small view instead of a text string, and that view receives the row's value as a parameter. This guide builds the barcode cell view, points the column at it, lists the parameters that arrive in every cell, sizes the symbol so it still scans, and covers the mistakes that leave every row showing the same barcode — or nothing at all.

How a cell render view works

A table column has a render mode. Left at its default, each cell draws its value as text. Set the column's render mode to view and give the column a view path, and each cell in that column displays the view found at that path instead of the text — that is the whole trick.

The table places that view inside every cell of the column, and each cell's data reaches the view as parameters. Six of them arrive by default when you declare them on the view:

• value — the cell's own value; for this column, the part-number string
• row — the data of the row the cell sits in
• rowData — the full set of rows behind the table
• rowIndex and columnIndex — the position of the cell
• column — the column the cell belongs to

Declare a param named value on the view and the table fills it with the cell's value; declare rowIndex too and the view can number its row. The column configuration can also pass params of your own — a symbology or a scale, say — as long as the view declares matching params.

What you need

• An HMI project with a table whose rows come from your scan results. A query binding, tag history or a script-built dataset all feed it the same way; the running example uses a query.
• One column whose values are barcode strings. In the example, the query returns a field the database calls material and the header shows as Part Number.
• The barcode component from the HMI palette, and rights to add a view to the project.
• A handheld reader, if operators will cross-check rows by scanning the screen.
• A source for the strings: a fixed code reader at the line, or an operator with a USB handheld — USB barcode scanner on a PLC HMI covers that path.

Build the barcode cell view

1. Create a view sized for one cell. Set its canvas to the column width and row height you plan to use — the worked example below uses 180 × 64 px. Give it a short name; this example calls it barcode-cell.
2. Add a param named value (string) to the view. On the view it lives at view.params.value, and it is the only channel the row value needs.
3. Drop the barcode component into the view, stretch it across the canvas with padding, and bind its value property to view.params.value. Pick the symbology your printed labels use; the example assumes Code 128, which suits the alphanumeric part numbers in the sample data. To draw the part number above the symbol, stack a label over the barcode and leave row height for both.

Point the column at the view

4. In the table's column configuration, select the part-number column and set its render mode to view.
5. Set that column's view path to the view you built — barcode-cell here. Every cell in the column now draws the view instead of the text.
6. Check the parameter wiring. The table injects value, row, rowData, rowIndex, columnIndex and column on its own, but only into params that exist on the view. A blank cell, or a symbol that ignores its row, almost always traces to a missing or misspelled param.

Size the symbol so it still scans

An on-screen barcode earns its keep only if a handheld reads it off the panel. Two geometry rules decide that: the quiet zone and the module width. Code 128 builds each character from 11 modules, so the symbol length is start + data + check + stop:

The 55 adds the two 10-module quiet zones to the 35. Now the worked example: part number 8712345-02, ten characters, rendered at 1 px per module.

• Symbol: 11 + (10 × 11) + 11 + 13 = 145 modules
• Width with quiet zones: (11 × 10 + 55) × 1 = 165 px, which a 180 px column holds with 15 px to spare
• Module width on the panel: a 24-inch 16:9 display is about 20.9 in wide, so 1920 px ÷ 20.9 in ≈ 92 px/in, and 25.4 mm ÷ 92 ≈ 0.28 mm per px. The module is about 0.28 mm — roughly 11 mil — a size mainstream handheld imagers read from a screen
• Row height 64 px: 40 px of bars, 16 px of label, 8 px of padding

Decision: budget 11 px of column width per character plus 55 px at 1 px per module, sized to the longest part number in the table. An 18-character code needs 11 × 18 + 55 = 253 px, so give that column 260 px or shorten what the code carries.

Verify it works

1. Reload the page and scroll: every row draws a symbol, not only the first screenful.
2. Scan two different rows with the handheld. Each must decode to its own row's text — this catches the shared binding that paints one barcode on every row.
3. Scan a row whose text you know, and read the decoded string back against the cell before trusting the screen on the floor.
4. Force a row with an empty part number and look at what draws. Decide the behavior now; the guard in the next section makes the choice explicit.
5. If cells flash placeholder content when the page first loads, there is a documented fix for that embedded-view flicker — resolving initial render flicker in embedded views.

Common mistakes and their fixes

1. Every row shows the same barcode. The component is bound to a fixed string, a tag or any property outside the view. Bind it to view.params.value so each cell receives its own row.
2. Blank cells. The table fills only params that exist on the view. Declare value — and anything else you bind — spelled exactly as the bindings use it.
3. Null cells pulling the wrong column's value. Some table setups hand a null cell a neighboring column's data; there is a documented workaround for null cells returning the wrong column value.
4. Empty rows drawing junk. Guard the display: hide the symbol when the string is empty or null. The pattern in hide a barcode display when no read: guard empty values applies as is, and conditionally displaying table cell values covers the cell-level version.
5. A symbol that will not scan. Usually a clipped quiet zone or a column under 11 px per character plus 55 px. Re-run the sizing math with the longest code in the table.
6. Expecting the cell to decode. The view only draws; nothing on the screen reads a code. Decoding happens at the reader, and checking a decode against a parts list is its own pattern — see verify scanned barcodes against a PLC lookup table.

Where the scanned values come from

The table is only as good as the strings in it. On a line, a fixed code reader over each lane or at the check station triggers on the part, decodes the label and writes the string to your PLC or database, and the HMI query picks it up. Getting every scan through without drops is its own wiring job — PLC to HMI barcode data handshake shows the queue — and turning a scanned part number into job settings is barcode part number parameter lookup.

Any reader that writes decoded strings to a database feeds a table like this. Three from the catalog, for a station at a conveyor or a bench:

The MV-ID3013PM-12M-WBN is a compact code reader with a 12 mm focal length and 1.3 MP resolution for labels at a fixed stand. The LS-CRD-0028 decodes 60 codes/s from 2560 x 2048 frames, which suits faster lanes. The LS-CRD-0047 reads at a 60-120 mm reading distance over USB 2.0, a good fit for a bench or kiosk. Glossy and curved labels read better with matched illumination: the code reader accessories range includes light boards and protective covers built for these readers.

Ship checklist

• Render mode set to view on the part-number column only — drawn cells cost more than text cells, so leave the rest as text.
• View path matching the view's location — a wrong path leaves every cell empty.
• value declared on the view and the barcode bound to view.params.value — otherwise every row shows the same symbol or none.
• Quiet zones intact — at least 10 px of clear space on each side of the symbol.
• Column width at or above 11 px per character plus 55 px for the longest code in the table.
• Empty-value guard in place — blank rows draw nothing instead of a partial symbol.
• Handheld proof on the floor panel — two different rows scanned, both decoding to their own row's text.

If the scan strings already reach your table, the whole change is one small view and two column settings — an hour on a test page including the handheld check. If the station itself is still on the bench, start with the code reader finder, then the parts below:

More display, decode and data-handling patterns sit on the code-reading guides page, and we answer matching questions through the contact page.