# Display from Form/List

## From Form:

### **Formatter -** Embed a barcode label directly on any form:

1. Visit **System UI -> UI Macros** in the left nav.
   1. Locate & open the record titled 'barcode\_formatter'.
   2. Copy the UI Macro code
   3. Create a new UI Macro, paste the UI Macro code from the step above, and update values in the code according to your needs (see screenshot below). *Note: It is important to create a new UI Macro record. Insert & Stay will not work correctly.*
   4. Copy the 'API name' of your UI Macro (for use in step 2b below).
   5. Submit your new record.
2. Visit **System UI -> Formatters** in the left nav.
   1. Locate & open the record titled 'Barcode (Generator Form)'. Update the **Name** and **Table** fields to match the table where you wish to place the barcode label.
   2. Set the 'Formatter' field to the value you copied in step 1d above, adding '.xml' to the end of  the value (see screenshot below).
   3. Insert and Stay to create a new record.
3. Visit the form of the table where you wish to place the barcode label.
   1. Right click the form header and select Configure -> Form Layout.
   2. Find your new Formatter in the list and add it to your desired location on the form.
   3. Save the form.

<div><figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2FDekjRFtfWPQjbZa44zrp%2FScreenshot%202025-11-17%20at%2010.55.52%E2%80%AFAM.png?alt=media&#x26;token=74662caf-6ef5-4991-a1bd-c6e12784341b" alt=""><figcaption><p>Formatter on Form</p></figcaption></figure> <figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2F8noJy1mqhOOyg6r6QQB1%2FScreenshot%202025-11-17%20at%2010.27.08%E2%80%AFAM.png?alt=media&#x26;token=5a4d1fb5-470a-4ccc-b67b-0bb271563629" alt=""><figcaption><p>UI Macro Example</p></figcaption></figure> <figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2Fy5xVn1uTvxsKI37PSH00%2FScreenshot%202025-11-17%20at%2010.33.07%E2%80%AFAM.png?alt=media&#x26;token=5f8aed31-8892-437e-b546-d788a06a15f9" alt=""><figcaption><p>UI Formatter Example</p></figcaption></figure></div>

### **Dialog Box (Modal) from Form Button -** Display a barcode label in a pop-up window:

1. Visit **Barcode & QR Code Generator -> UI Actions** in the left nav. Locate and open the UI Action titled 'Test Barcode (Dialog)'.
2. Update the **Name** and **Table** fields to match the table where you wish to place the button that will open the Dialog box. Following the instructions in the commented code, update code values to accommodate your needs. Insert and Stay to create a new record.
3. Visit the form view for a record on the specified table. Click the button to open the barcode label in a Dialog box (modal).

<figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2FeMQRKQfFDIukslkwW1f3%2F056.jpg?alt=media&#x26;token=e480c817-568f-49fb-9569-9e1512debfe9" alt=""><figcaption><p>Dialog Box from Form</p></figcaption></figure>

### **UI Page from Form Button -** Display a barcode label in a separate window:

1. Visit **Barcode & QR Code Generator -> UI Actions** in the left nav. Locate and open the UI Action titled 'Test Barcode (Page)'.
2. Update the **Name** and **Table** fields to match the table where you wish to place the button that will open the page. Following the instructions in the commented code, update code values to accommodate your needs. Insert and Stay to create a new record.
3. Visit the form view for a record on the specified table. Click the button to open the barcode label on a new page.

<div><figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2FU4cozpYM4rE0Ci7mUTup%2F065.jpg?alt=media&#x26;token=a958f3dc-da35-4d53-8ce7-8a241da961af" alt=""><figcaption><p>Display from Form</p></figcaption></figure> <figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2FFJ1Ia1alqyCmMzqlt3Lf%2F057.jpg?alt=media&#x26;token=2f9d4da1-dc95-41ec-bd02-b93ae6cb6aca" alt=""><figcaption><p>UI Page</p></figcaption></figure></div>

{% hint style="info" %}
All options to display barcode labels on/from form utilize client-side barcode generation.
{% endhint %}

## From List:

### **UI Page from List Choice -** Display barcode labels in a separate window:

1. Visit **Barcode & QR Code Generator -> UI Actions** in the left nav. Locate and open the UI Action titled 'Test Show/Print Multiple Barcodes (List)'.
2. Update the **Name** and **Table** fields to match the table where you wish to place the list choice. Following the instructions in the commented code, update code values to accommodate your needs. Insert and Stay to create a new record.
3. Visit the list view of the specified table, check as many options as desired from the list, and then click the specified UI Action from the drop-down menu. The barcodes will be displayed on a new page.
4. If you wish to print multiple barcode labels from this view, it is recommended to click the *Open in new Window* link at the bottom of the rendered barcodes. This will open the view in a new window without the ServiceNow left nav, enabling a cleaner print.

<div><figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2FPN9u81RPdrCwBMTGYGpX%2FScreenshot%202024-05-21%20at%204.10.59%E2%80%AFPM.png?alt=media&#x26;token=d11e6d62-5e6d-4fe1-9c44-e0638d1d0724" alt=""><figcaption><p>Display from List</p></figcaption></figure> <figure><img src="https://1867719272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF2SazJJWf6DjyEIJAtF4%2Fuploads%2FBHLcXPdccYPPXnJU8goq%2F064.jpg?alt=media&#x26;token=46bdf600-1b0f-4301-b342-a9810cff5121" alt=""><figcaption><p>Multiple Barcode Display</p></figcaption></figure></div>

{% hint style="info" %}
All options to print barcode labels from list utilize client-side barcode generation.
{% endhint %}