Pages, Cards, and Card Types

Administrators can create and edit pages, cards and card types so you can customize Community Hub for your constituents.

Pages

A Community Hub contains several pages with different purposes. Each page contains one or more cards on which constituents can view and interact with information. Pages are used to group cards providing similar functionality into one place. Cards within the same page can also interact with one another providing constituents a cohesive and interactive experience throughout the entire page.

There are two different types of Community Hub pages; basic and advanced.

Basic Page

Administrators create basic Community Hub pages using page templates to control the page layout, heading and description labels, cards, buttons, etc. This allows administrators and developers to build a custom Community Hub page through point-and-click.

Some examples of basic pages are:

A page where users can view their account information.
A page where users can update their settings for association communications.
A page where users can read the history of the association.

Advanced Page

Developers create advanced Community Hub pages using a Visualforce page which contains the code for the page and a custom metadata type record which stores the readable name of the page, the cards on the page, and the order of those cards. This allows developers to create a highly customized and unique Community Hub page.

An example of an advanced page:

A page that should only be shown to certain constituents based on Visualforce page permissions.

The characters and spaces in the names of the cards on a page, together with the commas inserted between each on the Page Custom Setting may not exceed 255. Once reached, administrators will not be allowed to add additional cards to a page. To avoid this limitation, we recommend you use short names for all cards.

Cards

In Community Hub, cards are used to group content in meaningful ways. Cards can contain a heading and description, fields sets, buttons, lists of records, filters, and additional content which can be customized with configuration and development effort. Using field sets, constituents can designate the order fields are displayed on a card, whether they can be edited, and whether they are required. An example of a card using these components: a card showing users a list of events for which they can register and buttons to view each.

WCAG Compliance

We recommend following the WCAG guidelines while creating Community Hub to make content more accessible to a wider range of constituents, who have disabilities, or age related issues in accessing the communities. Web Content Accessibility Guidelines WCAG 2.1 (external) define how to make Web content more accessible to people with disabilities.

Card Types

The are many different types of cards, and card types dictate the attributes of the card, like how the card looks, what information is shown on the card, and what ways constituents can interact with the contents of card.

Most card types display all content in one visual card. When reordering a card of this type on the page, the single visual card displays in the set position.

Some card types display content across multiple visual cards. When reordering a card of this type, the multiple visual cards display in the set position, one after another. The order of the sub cards within the card is defined by the card type, and is not configurable.

The are several standard card types in Community Hub and additional card types can be added with a combination of configuration and development effort.

Customize Pages, Cards, and Card Types

Administrators use Page Configuration to configure pages for each Community Hub, the cards that are shown on each page, and the card types used throughout all pages. Administrators can:

Create a page
Select a page to customize
View a card on the page
Edit a card on the page
Clone a card on the page
View a card type
Create a card type
Edit a custom card type
Clone a card type
Enable Find My Account when creating a Community Hub account.
Set help text for fields within a field set form card type.

Edit a Page

Administrators editing a page can:

Change the URL of a page
Change the heading and description of a basic page
Change the template used for a dynamic page
Add a card to the page
Select a card on the page to edit
Disable a card on the page
Remove a card on the page
Edit a card heading and description
Edit the fields displayed on a card
Change data source which determines the information displayed on a card
Quickly navigate to the SOQL query record or Apex class used to control a data source

Edit a Card

Administrators editing a card can:

Change the card type
Rename the card
Disable the card
Add a CSS class to the card for theming
Change the card heading and description
Change the fields displayed on a card
Change data source which determines the information displayed on the card
Add or remove buttons on the card

Deleting a Card

Administrators can remove unneeded or test cards by following these steps:

From Setup, navigate to Build | Develop | Custom Meta Data Types
Select Manage Records next to Card
Navigate to the card in question and select delete

This will permanently delete the card in question! Cards are not held in the Salesforce recycling bin.

Edit a Card Type

Administrators editing a card type can:

Change the name of the card type
Update the constructor, class, and/or controller used by the card type.