Card Data Mapping
Background
The dataMappings option define how a card’s attributes, such as title and details, will be rendered. It accepts either:
- A function that accepts the result item from the API and returns a dataMappings object.
- A static dataMappings object. Each attribute of a dataMappings object is also either a function or a static value.
Example
Below is an example of dataMappings as function.
ANSWERS.addComponent('VerticalResults', {
/* ...other vertical results config... */
card: {
/* ...other card config...*/
dataMappings: item => ({
title: item.name,
subtitle: `Department: ${item.name} `,
details: item.description,
image: item.headshot ? item.headshot.url : '',
url: 'https://yext.com',
showMoreLimit: 500,
showMoreText: "show more",
showLessText: "put it back",
target: '_blank'
})
}
/* ...other vertical results config... */
})
And below is an example of dataMappings as an object with functions inside it. You can use both static attributes and function attributes together.
ANSWERS.addComponent('VerticalResults', {
/* ...other vertical results config... */
card: {
/* ...other card config...*/
dataMappings: {
title: item => item.name,
subtitle: item => `Department: ${item.name} `,
details: item => item.description,
image: item => item.headshot ? item.headshot.url : '',
url: 'https://yext.com',
showMoreLimit: 500,
showMoreText: 'show more',
showLessText: 'put it back',
target: '_blank'
}
}
/* ...other vertical results config... */
})
Each cardtype has standard attributes that it expects in the returned dataMappings object. You can read more about these in the Built-In Cards Section.