Hi
I am getting a “Add a new card called communitystory and update data mappings” error. I Attached a screenshot of the comuunitystory card.
Can someone help me with this?
Hi Sowmya,
Would you be able to try updating the subtitle to the below (spaces included)?
subtitle: 'In partnership with: ' + Formatter.joinList(profile.c_localNonProfits),
3 Likes
I had the exact same issue with this task!
However I was using ES6 interpolation syntax:
Is this not allowed?
Hey @DJ_Corbett,
Would you mind taking a quick look at my JS for Answers Module 13 Assessment?
Here is the screenshot of my report card:
Here’s my config > communitystories.json:
{
"verticalKey": "community_stories", // The vertical key from your search configuration
"pageTitle": "Community Story Search", // !!!REPLACE THIS VALUE!!! The contents of the title tag and meta open graph tag for title
// "metaDescription": "", // The meta tag for open graph description
// "canonicalUrl": "", // The link tag for canonical URL as well as the meta tag for open graph url
// "keywords": "", // The meta tag for keywords
"pageSettings": {
"search": {
"verticalKey": "community_stories", // The vertical key from your search configuration
"defaultInitialSearch": "" // Enter a default search term
}
},
"componentSettings": {
/**
"QASubmission": {
"entityId": "", // Set the ID of the entity to use for Q&A submissions, must be of entity type "Organization"
"privacyPolicyUrl": "" // The fully qualified URL to the privacy policy
},
**/
/**
"Facets": {
"expand": false, // Allow the user to expand and collapse the facets
"showMore": false, // Display a link to see more facet options within a facet
"searchOnChange": true // Will automatically run a search as facets are selected or unselected. Set to false to only trigger updates with an Apply button.
// Additional options are available in the documentation
},
**/
/**
"FilterLink": {
"changeFiltersText": "sorts and filters", // Text that displays by default
"resetFiltersText": "reset filters", // Text when filters are applied
"clearSearchText": "clear search" // Text when there are no results, conducts an empty search
},
**/
"AppliedFilters": {
"removable": true
},
"VerticalResults": {
"noResults": {
"displayAllResults": true // Optional, whether to display all results in the vertical when no results are found.
},
"hideResultsHeader": true
},
"SearchBar": {
"placeholderText": "Search", // The placeholder text in the answers search bar
"allowEmptySearch": true, // Allows users to submit an empty search in the searchbar
"loadingIndicator": {
"display": true //Optional, whether to include a loading indicator on seachbar
// "iconUrl": "" //Optional, use custom icon url instead of the default loading indicator animation
},
"voiceSearch": {
"enabled": false // Whether or not voice search is enabled
// "customMicIconUrl": "", // Path to override the voice start icon
// "customListeningIconUrl": "" // Path to override the voice stop icon
}
},
"Pagination": {
"noResults": {
"visible": true
}
}
},
// Configuration used to define the look and feel of the vertical, both on this page and, by default,
// on the universal page.
"verticalsToConfig": {
"community_stories": { // The vertical key from your search configuration
"label": "Community Stories", // The name of the vertical in the section header and the navigation bar
// "verticalLimit": 15, // The result count limit for vertical search
// "universalLimit": 5, // The result count limit for universal search
"cardType": "standard", // The name of the card to use - e.g. accordion, location, customcard
"icon": "star", // The icon to use on the card for this vertical
"universalSectionTemplate": "standard"
}
}
}
And here’s my code for the cards > communitystories > component.js:
{{> cards/card_component componentName='communitystory' }}
class communitystoryCardComponent extends BaseCard['communitystory'] {
constructor(config = {}, systemConfig = {}) {
super(config, systemConfig);
}
/**
* This returns an object that will be called `card`
* in the template. Put all mapping logic here.
*
* @param profile profile of the entity in the card
*/
dataForRender(profile) {
const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
return {
title: profile.name, // The header text of the card
url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: linkTarget, // If the title's URL should open in a new tab, etc.
// image: '', // The URL of the image to display on the card
// altText: '', // The alternate text for the image
titleEventOptions: this.addDefaultEventOptions(),
subtitle: 'In partnership with: ' + Formatter.joinList(profile.c_localNonProfits), // The sub-header text of the card
details: profile.description, // The text in the body of the card
// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
showMoreDetails: {
showMoreLimit: 250, // Character count limit
showMoreText: 'Show more', // Label when toggle will show truncated text
showLessText: 'Show less' // Label when toggle will hide truncated text
},
// The primary CTA of the card
CTA1: {
label: 'Learn More', // The CTA's label
iconName: 'chevron', // The icon to use for the CTA
url: profilelandingPageUrl, // The URL a user will be directed to when clicking
target: linkTarget, // Where the new URL will be opened
eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '', // Accessible text providing a descriptive label for the CTA
},
};
}
/**
* The template to render
* @returns {string}
* @override
*/
static defaultTemplateName (config) {
return 'cards/communitystory';
}
}
ANSWERS.registerTemplate(
'cards/communitystory',
{{{stringifyPartial (read 'cards/communitystory/template') }}}
);
ANSWERS.registerComponentType(communitystoryCardComponent);
And here the config > help.json:
{
"verticalKey": "help_articles", // The vertical key from your search configuration
"pageTitle": "Help Article Search", // !!!REPLACE THIS VALUE!!! The contents of the title tag and meta open graph tag for title
// "metaDescription": "", // The meta tag for open graph description
// "canonicalUrl": "", // The link tag for canonical URL as well as the meta tag for open graph url
// "keywords": "", // The meta tag for keywords
"pageSettings": {
"search": {
"verticalKey": "help_articles", // The vertical key from your search configuration
"defaultInitialSearch": "" // Enter a default search term
}
},
"componentSettings": {
/**
"QASubmission": {
"entityId": "", // Set the ID of the entity to use for Q&A submissions, must be of entity type "Organization"
"privacyPolicyUrl": "" // The fully qualified URL to the privacy policy
},
**/
/**
"Facets": {
"expand": false, // Allow the user to expand and collapse the facets
"showMore": false, // Display a link to see more facet options within a facet
"searchOnChange": true // Will automatically run a search as facets are selected or unselected. Set to false to only trigger updates with an Apply button.
// Additional options are available in the documentation
},
**/
/**
"FilterLink": {
"changeFiltersText": "sorts and filters", // Text that displays by default
"resetFiltersText": "reset filters", // Text when filters are applied
"clearSearchText": "clear search" // Text when there are no results, conducts an empty search
},
**/
"AppliedFilters": {
"removable": true
},
"VerticalResults": {
"noResults": {
"displayAllResults": true // Optional, whether to display all results in the vertical when no results are found.
},
"hideResultsHeader": true
},
"SearchBar": {
"placeholderText": "Search", // The placeholder text in the answers search bar
"allowEmptySearch": true, // Allows users to submit an empty search in the searchbar
"loadingIndicator": {
"display": true //Optional, whether to include a loading indicator on seachbar
// "iconUrl": "" //Optional, use custom icon url instead of the default loading indicator animation
},
"voiceSearch": {
"enabled": false // Whether or not voice search is enabled
// "customMicIconUrl": "", // Path to override the voice start icon
// "customListeningIconUrl": "" // Path to override the voice stop icon
}
},
"Pagination": {
"noResults": {
"visible": true
}
}
},
// Configuration used to define the look and feel of the vertical, both on this page and, by default,
// on the universal page.
"verticalsToConfig": {
"help_articles": { // The vertical key from your search configuration
"label": "Help Articles", // The name of the vertical in the section header and the navigation bar
// "verticalLimit": 15, // The result count limit for vertical search
// "universalLimit": 5, // The result count limit for universal search
"cardType": "document-standard", // The name of the card to use - e.g. accordion, location, customcard
"icon": "light_bulb", // The icon to use on the card for this vertical
"universalSectionTemplate": "standard"
}
}
}
Can you see where I’m going wrong?
Thank you,
Ashley
Hey Ashley,
I looked at the account (2670743) and did not see any of these files in the “Turtlehead Tacos Answers” repository, and it shows that no commits were made beyond the initial commit by the system to configure the repository. This is the main reason the Report Card is showing all of the frontend steps as incorrect.
The only thing to note within the code you provided would be ensuring that the cardType for the Community Stories vertical is set to communitystory.
Best,
DJ
Hey @DJ_Corbett,
Thanks for helping again!
I’ve just committed all the changes and updated the cardType to communitystory. I’m still getting an error though here:
Here is the code for the communitystory card:
{{> cards/card_component componentName='communitystory' }}
class communitystoryCardComponent extends BaseCard['communitystory'] {
constructor(config = {}, systemConfig = {}) {
super(config, systemConfig);
}
/**
* This returns an object that will be called `card`
* in the template. Put all mapping logic here.
*
* @param profile profile of the entity in the card
*/
dataForRender(profile) {
const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
return {
title: profile.name, // The header text of the card
url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: linkTarget, // If the title's URL should open in a new tab, etc.
// image: '', // The URL of the image to display on the card
// altText: '', // The alternate text for the image
titleEventOptions: this.addDefaultEventOptions(),
subtitle: 'In partnership with: ' + Formatter.joinList(profile.c_localNonProfits), // The sub-header text of the card
details: profile.description, // The text in the body of the card
// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
showMoreDetails: {
showMoreLimit: 250, // Character count limit
showMoreText: 'Show more', // Label when toggle will show truncated text
showLessText: 'Show less' // Label when toggle will hide truncated text
},
// The primary CTA of the card
CTA1: {
label: 'Learn More', // The CTA's label
iconName: 'chevron', // The icon to use for the CTA
url: profilelandingPageUrl, // The URL a user will be directed to when clicking
target: linkTarget, // Where the new URL will be opened
eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '', // Accessible text providing a descriptive label for the CTA
},
};
}
/**
* The template to render
* @returns {string}
* @override
*/
static defaultTemplateName (config) {
return 'cards/communitystory';
}
}
ANSWERS.registerTemplate(
'cards/communitystory',
{{{stringifyPartial (read 'cards/communitystory/template') }}}
);
ANSWERS.registerComponentType(communitystoryCardComponent);
Thanks again! 
Ashley
Hey Ashley,
I think the issue here is the CTA1 url. At the moment, it is set to profilelandingPageUrl instead of profile.landingPageUrl.
Best,
DJ
That was it! Thank you so much
Ashley