Print Material Code
Suppose you need to create an item label that includes number, customer, specification, inventory, and storage location, all from the data table.
Define Data Structure
| Field Name | Identifier | Type |
|---|---|---|
| Number | no | Single-line Text |
| Customer | customerRel | Related Record |
| Specification | spec | Single-line Text |
| Inventory | quantity | Number |
| Storage Location | storageLocation | Single-line Text |
Sample Data
json
{
"id": "mih4am4rz1laz",
"storageLocation": "L2-01-01-01",
"quantity": 50,
"customerRel_name": "XXX Automotive Co., Ltd.",
"customerRel": "34.006",
"no": "2127380-CD01XXX",
"spec": "total"
}Page Design
Page Design Rich Text Component Code
html
<table style="border-collapse: collapse; width: 100.505%; height: 152.094px; border-width: 1px; border-spacing: 0px; margin-left: auto; margin-right: auto;" border="1" data-id="">
<colgroup data-id="">
<col style="width: 19.5732%;" data-id="" />
<col style="width: 48.46%;" data-id="" />
<col style="width: 31.9554%;" />
</colgroup>
<thead>
<tr style="height: 31.375px; line-height: 1;" data-id="">
<td style="text-align: center; height: 31.375px; border-width: 1px; padding: 0px;" colspan="3" scope="colgroup" data-id="">
<span style="font-family: hei;"
><strong><span style="font-size: 15px;">Material label</span></strong></span
>
</td>
</tr>
<tr style="height: 19px;">
<td style="text-align: center; border-width: 1px; height: 19px; padding: 0px;">
<span style="font-size: 16px;"
><strong><span style="font-family: hei;" data-id="">No.</span></strong></span
>
</td>
<th style="text-align: left; border-width: 1px; height: 19px; padding: 0px;" colspan="2" scope="colgroup">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: center;" data-id="">
<span style="font-family: hei;" font-size: 18px;"
><strong><span data-id="">${data.no}</span></strong></span
>
</div>
</th>
</tr>
<tr style="height: 25.3125px; line-height: 1;" data-id="">
<td style="text-align: center; height: 25.3125px; border-width: 1px; padding: 0px;" data-id="">
<span style="font-size: 16px;"
><strong><span style="font-family: hei;" data-id="">Customer</span></strong></span
>
</td>
<th style="text-align: left; height: 25.3125px; border-width: 1px; padding: 0px;" scope="col" data-id="">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: left;" data-id="">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: center;" data-id="">
<span style="font-family: hei;"
><strong><span style="font-size: 20px;" data-id="">${data.customerRel}</span></strong></span
>
</div>
</div>
</th>
<th style="text-align: left; border-width: 1px; padding: 0px; height: 101.719px;" rowspan="4" scope="colgroup">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: left;" data-id=""><span style="font-size: 15px;" data-id=""> </span></div>
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: left;" data-id=""><span style="font-size: 15px;" data-id=""> </span></div>
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: left;" data-id=""><span style="font-size: 15px;" data-id=""> </span></div>
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: left;" data-id=""><span style="font-size: 15px;" data-id=""> </span></div>
</th>
</tr>
<tr style="height: 26.4844px; line-height: 1;" data-id="">
<td style="text-align: center; height: 26.4844px; border-width: 1px; padding: 0px;" data-id="">
<span style="font-size: 16px;"
><strong><span style="font-family: hei;" data-id="">Specification</span></strong></span
>
</td>
<th style="text-align: left; height: 26.4844px; border-width: 1px; padding: 0px;" scope="col" data-id="">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: center;" data-id="">
<span style="font-family: hei;"
><strong><span style="font-size: 20px;" data-id="">${data.spec}</span></strong></span
>
</div>
</th>
</tr>
<tr style="height: 24.6094px; line-height: 1;" data-id="">
<td style="text-align: center; height: 24.6094px; border-width: 1px; padding: 0px;" data-id="">
<span style="font-size: 16px;"
><strong><span style="font-family: hei;" data-id="">Quantity</span></strong></span
>
</td>
<th style="text-align: left; height: 24.6094px; border-width: 1px; padding: 0px;" scope="col" data-id="">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: left;" data-id="">
<div style="color: #000000; background-color: #fffffe; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="text-align: center;">
<span style="font-family: hei;"
><strong><span style="color: rgb(0, 0, 0); font-size: 20px; background-color: rgb(255, 255, 255);">${data.quantity}</span></strong></span
>
</div>
</div>
</div>
</th>
</tr>
<tr style="height: 25.3125px; line-height: 1;" data-id="">
<td style="text-align: center; height: 25.3125px; border-width: 1px; padding: 0px;" data-id="">
<span style="font-size: 16px;"
><strong><span style="font-family: hei;" data-id="">Storage Location</span></strong></span
>
</td>
<th style="text-align: left; height: 25.3125px; border-width: 1px; padding: 0px;" scope="col" data-id="">
<div style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; text-align: center;" data-id="">
<span style="font-family: hei;"
><strong><span style="font-size: 20px;" data-id="">${data.storageLocation}</span></strong></span
>
</div>
</th>
</tr>
</thead>
</table>