Remove Brackets from Choice List Field in the Custom Invoice

Ask for Help
,
1

I copied your files over to create my own invoice for our company. One of the columns is a choice list. When I the content, there are brackets around the text. Do you know how to remove this?

Below is code I added to index.html file

<template v-else>
            <tr>
              <th>Date</th>
              <th>Service</th>
              <th>Description</th>
              <th class="money">Unit Price</th>
              <th class="number">Quantity</th>
              <th class="money">Total</th>
            </tr>
            <tr v-for="item in invoice.Items">
              <td>{{ item.Date | asDate }}</td>
              <td>{{ item.Service }}</td>
              <td>{{ item.Description }}</td>
              <td class="money">{{ item.Price | currency }}</td>
              <td class="number">{{ item.Quantity }}</td>
              <td class="money">{{ item.Total | currency }}</td>
            </tr>
          </template>

Below is the code I added to index.js file

if (!row.Items) {
    row.Items = [
      {
        Date: '.Date',
        Service: '.Service',
        Description: 'Items[0].Description',
        Quantity: '.Quantity',
        Total: '.Total',
        Price: '.Price',
      },
      {
         Date: '.Date',
        Service: '.Service', 
        Description: 'Items[1].Description',
        Quantity: '.Quantity',
        Total: '.Total',
        Price: '.Price',
      },
    ];
  }
  return row;
}

Below image is how it looks currently

image
image1517×833 64.4 KB

Thank you

2

Hi @Jennifer_Bledsoe. Try this snippet in your index.html file:

<template v-else>
            <tr>
              <th>Date</th>
              <th>Service</th>
              <th>Description</th>
              <th class="money">Unit Price</th>
              <th class="number">Quantity</th>
              <th class="money">Total</th>
            </tr>
            <tr v-for="item in invoice.Items">
              <td>{{ item.Date | asDate }}</td>
              <td>{{ item.Service.join(", ") }}</td>
              <td>{{ item.Description }}</td>
              <td class="money">{{ item.Price | currency }}</td>
              <td class="number">{{ item.Quantity }}</td>
              <td class="money">{{ item.Total | currency }}</td>
            </tr>
          </template>

The Service column is a (choice) list, so it’s displayed with brackets around it by default. Adding the .join(", ") formats it so that when you have 2 or more values, they are separated by a comma and space, and when you have no values, nothing is displayed.

Let me know if that works.

George

3

Okay great, I will give this a try, thank you :slight_smile:

1 Like