# Formatting a list in SendGrid

**URL:** <https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574>\
**Category:** Plugins\
**Created:** [August 5, 2019, 5:48am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574 "2019-08-05T05:48:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mccjon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mccjon/32/12720_2.png) [@mccjon](https://forum.bubble.io/u/mccjon)\
**Post date:** [August 5, 2019, 5:48am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/1 "2019-08-05T05:48:20Z")

</div>

Hi Bubblers 🙂

I’m always quite amazed by what you can do with Bubble, a well-designed plugin and some luck! I’m almost there, just need some help for the last bit.

I’ve been able to send a list of things using the @copilot SendGrid plugin through to SendGrid. The Bubble Plugin details are ‘questionnumber’ and ‘questiontext’

![SendGrid](https://us1.discourse-cdn.com/bubble/original/3X/c/d/cda160b7f9ce43a2441ac33925e9ea2a0306f730.png)

In SendGrid, I have a Legacy template set up with the below code, which would bring in the Bubble Question Number and Question Text.

![Code](https://us1.discourse-cdn.com/bubble/original/3X/9/4/94c4e34c1718bf0f284589e22d505b3f980cc3ff.png)

It comes through as:

 ![Bubble%20Query](https://us1.discourse-cdn.com/bubble/original/3X/a/5/a5009a7156a29039f59bb0c9fbe6a6f590a118ae.png)

**Don’t worry about it saying ‘Image 1’ etc - that’s just any text.** What I need it to look like is the below formatted list, (Ideally without the bulletpoints as the list has numbers already), and it must be _able to handle an unlimited number of entries in the list_

{questionnumber}. {questiontext}

{questionnumber}. {questiontext}

{questionnumber}. {questiontext}

Anyone got any ideas?

Thanks so much!!!

---

<div class="post-metadata">

**Author:** ![simon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/simon/32/8895_2.png) [@simon](https://forum.bubble.io/u/simon)\
**Post date:** [August 5, 2019, 7:51am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/2 "2019-08-05T07:51:49Z")

</div>

Hi,

Been looking at a similar problem, I don’t think it is possible because you have an unknown length list (I guess). If you knew the list length you could use :firstitem, item2 etc to pull each question out 1 by 1 with it’s text. Even this method is very long winded but does work.

What you really want is to be able to send a repeating group output to email but other than capture it as an image I haven’t found a way.

I experimented with :joinwith and :mergewith but couldn’t get that to work either

Anyone else found a solution to this issue?

Simon

---

<div class="post-metadata">

**Author:** ![mccjon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mccjon/32/12720_2.png) [@mccjon](https://forum.bubble.io/u/mccjon)\
**Post date:** [August 9, 2019, 5:42am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/3 "2019-08-09T05:42:50Z")

</div>

Thanks so much, Simon!

I wrestled with it for a while, but in the end I went with your ‘long-winded’ approach: set a max list length of 35 and just went Item by Item. Slow, but it did work 🙂

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 9, 2019, 8:27am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/4 "2019-08-09T08:27:00Z")

</div>

Not that it’s necessarily useful for your situation, but if you _weren’t_ using the legacy template in Sendgrid then you can iterate through a list of JSON items. In my case I created the [JSONest](http://forum.bubble.io/t/new-plugin-generate-deep-nested-json-from-thing-s/57525) plugin to allow both lists and _nested lists_ (things _of things_) to work with sendgrid specifically. In my case I t was a list of `orderitems` and those `orderitems` – each with list of `customizations` Works like a charm for this purpose. 🙂

---

<div class="post-metadata">

**Author:** ![simon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/simon/32/8895_2.png) [@simon](https://forum.bubble.io/u/simon)\
**Post date:** [January 12, 2020, 11:38am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/5 "2020-01-12T11:38:33Z")

</div>

Hey Jon, Don’t suppose you have an example of this working do you? I have just come across the same requirement again and still not figured it out.

Thanks

---

<div class="post-metadata">

**Author:** ![mccjon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mccjon/32/12720_2.png) [@mccjon](https://forum.bubble.io/u/mccjon)\
**Post date:** [January 12, 2020, 11:53am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/6 "2020-01-12T11:53:36Z")

</div>

Hi Simon,

In the end I went with your suggested ‘long-winded approach’. Did yoou look at @jon2’s JSON suggestion?

---

<div class="post-metadata">

**Author:** ![simon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/simon/32/8895_2.png) [@simon](https://forum.bubble.io/u/simon)\
**Post date:** [January 12, 2020, 7:38pm UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/7 "2020-01-12T19:38:23Z")

</div>

Thanks @mccjon

The JSON one is the one I would love details on as I think it is probably the answer just could do with an example/screen shot @jon2 to help me figure out how.

Thanks

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [January 13, 2020, 1:05am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/8 "2020-01-13T01:05:11Z")

</div>

@simon there

The basic idea is:  
Step 1 - Create JSON from your database using JSONator  
Step 2 - Send that JSON you created in step 1 to SendGrid (using SendGrid Plugin by copilot)

For step 1:  
There is a fully fleshed out example app and editor showing how JSONest works as well as a fairly detailed forum thread linked above, so I’ll assume that you’ll be all set to get started that to start.

For step 2 (sendgrid)  
I used the @copilot plugin. There’s some learning needed to set this up and copilot has a series of videos that explain how this plugin works. I’d start there if you require a full tutorial.  
**Important note: You’ll need to setup an email template to receive your custom JSON at [sendgrid.com](http://sendgrid.com)**

EXAMPLE  
A user makes payment on the site, which triggers an API workflow. That workflow sends an order confirmation email to the customer using sendgrid

Here’s the workflow  
[![](https://dzwonsemrish7.cloudfront.net/items/1z0y372T263D3N442r1K/Image%202020-01-12%20at%207.42.49%20PM.png) ](https://dzwonsemrish7.cloudfront.net/items/1z0y372T263D3N442r1K/Image%202020-01-12%20at%207.42.49%20PM.png)

STEP A (JSONATOR)

In bubble editor  
[![](https://dzwonsemrish7.cloudfront.net/items/0e41120k0J010k1s2123/Image%202020-01-12%20at%208.00.14%20PM.png) ](https://dzwonsemrish7.cloudfront.net/items/0e41120k0J010k1s2123/Image%202020-01-12%20at%208.00.14%20PM.png)

Below is my configuration JSON.  
Its unusually long and complex. I had to groom my JSON output quite a bit because my database name ids (these are the less pretty `underscored_names_of_db_fields` that JSONator and other plugins see) were all screwed up. This issue was, I had renamed several of my db fields in the bubble editor along the way while building my app and these **do not change** in the ‘back end’ after the first time you name a field. As a result, the field names in my bubble app no longer correspond to the ids that JSONator was getting from the bubble DB and so they needed to be remapped.  
Word to the wise: DO NOT rename your database fields if it can be avoided.

```
    [
   {"field_id" : "payment_amount_number", "new_id" : "payment_amount", "type" : "custom._orders", "format" : "USD" },
   {"field_id" : "purchase_card_custom_card1", "new_id" : "billing", "type" : "custom._orders"},
   {"field_id" : "Created By", "new_id" : null, "type" : "_all" },
   {"field_id" : "Created Date", "new_id" : null, "type" : "_all" },
   {"field_id" : "Modified Date", "new_id" : null, "type" : "_all" },
   {"field_id" : "_id", "new_id" : null, "type" : "_all" },
   {"field_id" : "stripe_card_id_text", "new_id" : null, "type" : "custom.card1"},
   {"field_id" : "customer_id1_text", "new_id" : null, "type" : "custom.card1"},
   {"field_id" : "c_id", "new_id" : null, "type" : "custom.card1"},
   {"field_id" : "ship_address_text", "new_id" : "bill_address_text", "type" : "custom.card1"},
   {"field_id" : "ship_first_name_text", "new_id" : "bill_first_name_text", "type" : "custom.card1"},
   {"field_id" : "ship_last_name_text", "new_id" : "bill_last_name_text", "type" : "custom.card1"},
   {"field_id" : "ship_address_2_text", "new_id" : "bill_address_2_text", "type" : "custom.card1"},
   {"field_id" : "card_brand_text", "new_id" : "brand", "type" : "custom.card1", "format" : "boolean", "copy" : true },
   {"field_id" : "ship_phone_text", "new_id" : "customer_phone", "type" : "custom._orders", "format" : "phone"},
   {"field_id" : "purchase_date1_date", "new_id" : "purchase_date", "type" : "custom._orders", "format" : "mmddyyyy"},
   {"field_id" : "purchase_amount_number", "new_id" : "purchase_total_usd", "type" : "custom._orders", "format" : "USD"},
   {"field_id" : "purchase_subtotal_amount_number", "new_id" : "purchase_subtotal_usd", "type" : "custom._orders", "format" : "USD"},
   {"field_id" : "purchase_waiver_amount_number", "new_id" : "purchase_waiver_usd", "type" : "custom._orders", "format" : "USD"},
   {"field_id" : "purchase_shipping_amount_number", "new_id" : "purchase_shipping_usd", "type" : "custom._orders", "format" : "USD"},
   {"field_id" : "purchase_discount_amount_number", "new_id" : "purchase_discount_usd", "type" : "custom._orders", "format" : "USD"},
   {"field_id" : "purchase_tax_number", "new_id" : "purchase_tax_usd", "type" : "custom._orders", "format" : "USD"},
   {"field_id" : "list_of_order_items_list_custom_iterm", "new_id" : "orderitems", "type" : "custom._orders"}, 
   {"field_id" : "stripe_card_id_text", "new_id" : null, "type" : "custom._orders" },
   {"field_id" : "temp_password_text", "new_id" : null, "type" : "custom._orders" },
   {"field_id" : "temp_creds_text", "new_id" : null, "type" : "custom._orders" },
   {"field_id" : "charge_id_text", "new_id" : null, "type" : "custom._orders" },
   {"field_id" : "type_text", "new_id" : "event_type_text", "type" : "custom.iterm" },
   {"field_id" : "completed_order_string_text", "new_id" : null, "type" : "custom.iterm" },
   {"field_id" : "ship_address_21_text", "new_id" : "ship_address_2_text", "type" : "custom.iterm" },
   {"field_id" : "checkout_finish_date_date", "new_id" : "event_finish_date", "type" : "custom.iterm" , "format" : "DDmmmddyyyy"},
   {"field_id" : "checkout_start_date_date", "new_id" : "event_start_date", "type" : "custom.iterm", "format" : "DDmmmddyyyy"},
   {"field_id" : "purchased1_date", "new_id" : "purchase_date", "type" : "custom.iterm", "format" : "mmddyyyy"},
   {"field_id" : "company_name_text", "new_id" : "ship_company_text", "type" : "custom.iterm" },
   {"field_id" : "ship_address1_text", "new_id" : "ship_address_text", "type" : "custom.iterm" },
   {"field_id" : "price_number", "new_id" : "price_usd", "type" : "custom.iterm", "format" : "USD"},
   {"field_id" : "damage_waiver_number", "new_id" : "damage_waiver_number", "type" : "custom.iterm" },
   {"field_id" : "list_of_answers1_list_custom_answers", "new_id" : "answers", "type" : "custom.iterm" },
   {"field_id" : "key_text", "new_id" : "content_type", "type" : "custom.answers" },
   {"field_id" : "displayed_text_text", "new_id" : "display_name_text", "type" : "custom.answers" },
   {"field_id" : "question_custom_question", "new_id" : "associated_question", "type" : "custom.answers" }]

```

STEP B SENDGRID SCREENSHOT  
[![](https://dzwonsemrish7.cloudfront.net/items/421n3z3m0f18191K0V3a/Image%202020-01-12%20at%208.17.36%20PM.png) ](https://dzwonsemrish7.cloudfront.net/items/421n3z3m0f18191K0V3a/Image%202020-01-12%20at%208.17.36%20PM.png)

---

<div class="post-metadata">

**Author:** ![louis2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/louis2/32/128567_2.png) [@louis2](https://forum.bubble.io/u/louis2)\
**Post date:** [August 24, 2022, 8:07am UTC](https://forum.bubble.io/t/formatting-a-list-in-sendgrid/63574/9 "2022-08-24T08:07:15Z")

</div>

Thanks a lot @jon2 for the detailed explanation from your plugin. This is very useful to convert datatypes into JSON.

1. How do you manage to convert the JSON into an HTML list in Sendgrid? Do you have any example to show ? That would be awesome.

2. I also need to concatenate the JSON created with other fields that are not stored in Bubble database but in user’s frontend. I would love to know how to perform this too.

Many thanks for your help
