Our new component, Styled Knowledge for Communities, is now available on the AppExchange. Today, Salesforce Developer Tomas Scott shares all you need to know about our new component.
Pexlify Styled Knowledge for Communities consists of four Lightning Components designed to display and search for Knowledge Articles in your Org. By placing them in your Community, you can neatly display your Articles using a variety of customizable fields. Your articles are displayed in a stylised way different from the usual Salesforce record pages and list views, making it an easy way to expose articles in a community to your users.
Let's take a look at some of the questions you might have.
How do I use these components?
Go to your community, select the Components tab on the top-left, navigate to Custom Components, and drag and drop the components onto your community page. Afterwards, you can click on a component to open its options on the right-hand side.
What does each of the options on the components do?
The configuration options for each component are as follows:
CommunityTopicComponent
This component lets you display the topics available in your community. You can change the number of topics that appear on each other separately between desktop/tablet screens and mobile screens, as seen in the below screenshots showing 5 and 4 topics per row respectively. You can also choose whether clicking a topic’s name directs the user to another page while passing the topic name as a URL parameter, or remain on the same page and send the topic name as an event to the CommunityArticleComponent. When a topic has been selected, it will appear greyed out.
Community Article Page URL: If you want to redirect to another page in your community, enter the URL of the page in question.
For example, if your community home page is https://mycommunity-developer-edition.eu29.force.com/supportcommunity/s/, and you have another page called articles, then entering https://mycommunity-developer-edition.eu29.force.com/s/articles in this field will redirect the user to that page, passing your currently active search parameters with it. If you want the search to occur on the current page, simply leave this field blank.
Number of topics per row on desktop/tablet: This component displays the topics found on articles in the current community while on a desktop or tablet browser. Enter the number of topics you would like to appear on each “row” of the components. You can choose between 1 and 12 inclusive.
Number of topics per row on mobile screens: This is the same as the above field, but it applies to mobile browsers instead. As mobile screens are narrower, you may want the number of topics per row to be smaller so they do not appear cramped.
CommunitySearchComponent
This component lets you search for articles using a keyword. Similarly to CommunityCategoryComponent, you can choose whether performing a search directs the user to another page while passing the search term as a URL parameter, or remain on the same page and send the search term as an event to the CommunityArticleComponent.
You can also choose whether to display a “Search” button or just allow users to perform the search using the Enter key while the text box is focused.
Community Article Page URL: This field functions similarly to the identically named field on CommunityTopicComponent. If you enter a URL here, and perform a search with this component, you will be redirected to that page. Otherwise, the search will be performed on the current page.
Display Search button on desktop/tablet: Toggle whether a “Search” button is displayed next to the search bar on desktop or tablet browsers.. Searching can be performed by hitting the Enter key after entering the search term, or clicking the “Search” button if it’s enabled.
Display Search button on mobile: Toggle whether a “Search” button is displayed below to the search bar on mobile browsers. Searching can be performed by hitting the Enter key after entering the search term, or tapping the “Search” button if it’s enabled.
CommunityArticleComponent
This is the component that displays your articles. You can change which fields display as the title and summary of the article, whether the article’s topics are displayed, and what date (if any) displays on the article. You can choose to display an image next to the articles, and set a maximum length for the summary of the displayed articles.
Clicking an article’s title can be set to direct the user to another page along with a URL parameter containing the article’s ID. You can couple this with the CommunityBlogpostComponent to allow users to see more information on a particular article.
Title: Enter the API name of the field to use as the “Title” of the displayed articles. The title will be in larger text at the top of the article. This text can be set to redirect to another page if it is clicked, and the “Blog Page URL” field, described below, has been filled.
Summary: Enter the API name of the field to use as the “Summary” of the displayed articles. The summary will appear below the title.
Length of Summary: The number of characters that the summary field will display. If an article’s summary is too long, it will be truncated with an ellipeses added to the end. If you leave this field empty, the entire summary of the articles will be displayed.
Display article’s topics: Toggle whether the topics assigned to each article are displayed or not.
Date: Enter the API name of the field to use as the “Date” of the displayed articles. The field is optional and leaving it blank will result in no date being displayed.
Sort by Field: Enter the API name of field to sort the displayed articles by.
Sort Order: Choose whether the displayed articles are sorted in ascending or descending order.
Image field: Enter the URL of an image you want to display next to each article.
Fields search for text: Enter the API names of the fields to be used when performing a text search, separated by commas. For example: Title, Summary, TextBody__c.
Blog Page URL: Similarly to the Community Article Page URL, enter a URL in this field to redirect to another page when the user clicks on the Title of a particular article. Leaving this field blank will result in no redirect occurring.
CommunityBlogPostComponent
This component displays one article with more space for a longer text body with rich text. You can display an image here too, and select if the image displays above the article’s text, or to the left or right of it. Clicking on the displays topics will perform a topic search just like clicking on a topic on the CommunityCategoryComponent.
Title: Enter the API name of the field to use as the “Title” of the chosen article.
Summary: Enter the API name of the field to use as the “Summary” of the displayed articles. This text body will display rich text.
Date: Enter the API name of the field to use as the “Date” of the chosen article.
Image field: Similarly to the Image field on the CommunityArticleComponent, enter the URL of an image to display on the chosen article.
Image Dimensions: Enter the dimensions you want the image to be displayed with. Enter the dimensions with this format “HEIGHTxWIDTH”, or “300x400”. If this field is left blank, the image will display in its native size.
Image Position: Choose whether the image is displayed to the left (Top-Left) or right (Top-Right) of the image, or above the article the full width of the page sections (Full Width). When using the “Full Width” option, the selected Image Dimensions are ignored.
Community Article Page URL: Similar to the identically named field on CommunityTopicComponent and CommunitySearchComponent, entering a URL here will redirect to another page if the user clicks on one of the topics on the chosen article. Otherwise, no redirect will occur and the topic search will occur on the same page.
Take a look at Styled Knowledge for Communities on the appexchange:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Today's post is by one of our Salesforce Developer, Tomas Scott.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
As always, thanks for reading, if you enjoyed this post please feel free to share it and tag us @Pexlify.
Pexlify is a leading digital transformation partner with Salesforce.com.
Want to know more about our Salesforce Solutions? Contact us today to set up a hassle-free consultation.
