In my previous blog, I showed how to add a new field for the MVP person MVP item. This new blog has some improvements to the first version. The person card displays the social media icon according to a preferred one selected from a list. Additionally, each MVP person card is clickable opening the preferred social media URL in a new tab. In case there is no preferred social media selected, the icon is not displayed and the card is not clickable.
Now the person item has two new fields to select the preferred social media and the URL.
The new field “Preferred social media” has a list of items: Facebook, LinkedIn, or Twitter. The data source of those items has been created under the MVP Repository item with the name “Social Media Network”.
The item “Social Media Network” was created as a folder, and the items Facebook, LinkedIn, and Twitter are a new template called “Social Media”.
Additionally, the two fields added to the existing Person templates are the following ones:
The PeopleSearchAdvanced.graphql file and the GraphQLRequestBuilder.cs class were changed with the newly modified GraphQL query to include the new fields.
results {
items {
item {
... on Person {
firstName {
value
}
lastName {
value
}
email {
value
}
introduction {
value
}
preferredSocialMediaUrl {
value
}
preferredSocialMedia{targetItem{name}}
url
country{targetItem{name}}
}
}
}
As I explained in the Part 1, the application Sitecore GQL UI can be used to test the new query as bellow
Additionally, the MVPGrapghQlModels class was modified to include the new classes for the new fields.
public class PreferredSocialMediaUrl
{
public string value { get; set; }
}
public class PreferredSocialMedia
{
public TargetItem targetItem { get; set; }
}
public class Person
{
public PreferredSocialMediaUrl preferredSocialMediaUrl { get; set; }
public PreferredSocialMedia preferredSocialMedia { get; set; }
...
The file search-results.scss has these new entries.
.linkedin {
background-image: url(../images/icon-linkedin.svg);
background-position: right 50%;
background-repeat: no-repeat;
background-position-y: top;
background-size: contain;
}
.facebook {
background-image: url(../images/icon-facebook.svg);
background-position: right 50%;
background-repeat: no-repeat;
background-position-y: top;
background-size: contain;
}
.twitter {
background-image: url(../images/icon-twitter.svg);
background-position: right 50%;
background-repeat: no-repeat;
background-position-y: top;
background-size: contain;
}
Finally, the view Default.cshtml was modified to include a new partial view for the MVP Person card. That partial view is reused for the person’s preferred social URL to be clickable and no preferred social URL cases.
The complete code can be found here.
It is nice to learn and contribute to this project. See you next time with new changes for this project.