Configuring Price as a Direct Answer - Instructions

Below is a guide to configuring fields like Price as Direct Answers in your experience.

When you configure Field Value Direct Answers in an Answers experience today, the default card used is the “allfields-standard” card. This works great for things like phone numbers:

That being said, if you try to utilize this same default card for complex fields like Price, you may see something like this:

This is happening because Price is a complex field that is made up of multiple properties. We can see this clearly when we compare the API response for a Phone Number Direct Answer to the response for a Price Direct Answer.

The answer object returned in the former API response has a single value: the phone number.

Screen Shot 2021-10-05 at 12.02.32 PM

The answer returned in the latter API response looks different. It has a value and currencyCode nested within a value object.

Screen Shot 2021-10-05 at 12.03.36 PM

This differing format leads to the issue we saw above where “[object Object]” is displayed instead of the value we want to see.

To address this, we will override the “allfields-standard” card. Navigate to Tools > Jambo Commands > Add Direct Answer Card. Use the “allfields-standard” card as the Template Card Folder.

In the new card’s component.js file, add logic to the value data mapping that checks if the value being returned is a price. If so, it will pull out the nested value that we saw in the above API response and return it along with a “$”. Otherwise, it will behave as the default card does:

value: (answer.fieldName === 'Price') ? "$" + answer.value.value : value || answer.value,

Once you create this new card and reference it in your index.json, you will see that Price is returning correctly as a Direct Answer:

Price is not the only complex field with nested properties, so feel free to adjust this as necessary for other fields!

Let me know if you have any questions,
DJ

2 Likes