--- schema_version: "1" id: b50b2fa40e50ac50a21a60a42a806ea978172f58aa9825921721f1d85445aa3b title: Description of API Community Manager Lightning Components collection: mulesoft version: current locale: en-us portal_url: https://docs.salesforce.com/mulesoft/current/en-us/api-community-manager/acm-lightning-components.md canonical_url: https://docs.mulesoft.com/api-community-manager/acm-lightning-components source_site: docs.mulesoft.com content_type: documentation content_hash: 0665a928ddfa4347b01262d9224630afc1ca112bc6ee450629430eb27ad98f9c description: MuleSoft Documentation Site latest: true --- --- product: API Community Manager --- # Description of API Community Manager Lightning Components > For the full documentation index, see: https://docs.mulesoft.com/llms.txt You design the pages of your Anypoint API Community Manager portal by adding and configuring Lightning components in Site Builder. These Lightning components include both the Lightning components available in all Salesforce Digital Experiences, and the API Community Manager Lightning components available only in API Community Manager. Each API Community Manager Lightning component has different configuration options and adds different functionality to the portal. Many API Community Manager Lightning components show data from Anypoint Platform. Community admins can change some of these data fields, such as API names, descriptions, and icons. API Community Manager saves these changes but does not push the changes back to Anypoint Platform. ## ACM Search Box The Anypoint API Community Manager Search Box component enables users to search for both content that exists in Salesforce Experience Cloud (such as knowledge articles, support cases, and announcements) and content that exists in Anypoint Platform (such as APIs and client applications). Results from the search are presented in the [ACM Search Results](#acm-search-results) component. You can specify values for the following parameters of the API Community Manager Search Box: **Result Page URL** Specifies the URL of the search results page shown after the user enters a search. **Search Areas** Selects which types of content to search: **APIs**, **API Groups**, **Applications**, **Knowledge Articles**, **Cases**, **Discussions**, **Topics**, **Managed Content (CMS)**, **API Specifications**, **Documentation Pages**, and **Custom Fields**. **Number of results to show** Specifies the number of results shown as the user types a query. **Enable advance links** Enables search results to link to specific tabs of an API details page, such as the console, documentation, custom fields, and applications tabs, according to their tab set IDs. The **Result Page URL** parameter specifies the URL of a search results page, and the search results page must include an **ACM Search Results** component to display the search results. If the page does not include an **ACM Search Results** component, members and guest users who enter a search and go to the page see no results. If a content type is not selected in the **Search Areas** parameter, then the linked **ACM Search Results** component omits results of that content type. MuleSoft Government Cloud does not support searching in API specifications or documentation pages. When you select **Enable advance links**, configure the tab set ID fields that match your customization of the tabs of the API details page, such as `Console Tab Set Id`, `Documentation Tab Set Id`, `Custom fields Tab Set Id`, and `Applications Tab Set Id`: 1. Open the builder. 2. Preview the community as an authenticated user. 3. Open the API details page for an API. 4. Select a tab. 5. In the URL of the current page, find a tab set ID, which looks similar to `tabset-1a2b3c=2` or `tabset-1a2b3c=4d5e6f`. 6. Copy this tab set ID to a tab set ID field such as `Console Tab Set Id`. Your community’s default pages have one ACM Search Box and one ACM Search Results component, and this is the best practice to minimize the chance of misconfigurations, although it is possible to use separate searches for separate audiences within your community’s members. Search results are sorted by the date they were most recently modified, from newest to oldest. To test and preview the search configuration and the presentation of the results page, [preview your API community](https://docs.mulesoft.com/api-community-manager/preview-community) and run a search. ## ACM Search Results The API Community Manager Search Results component shows results after a user enters a search in the [ACM Search Box](#acm-search-box) component. You can specify values for the following parameters of the Search Results: **Component Title** Specifies the title for the results. **Border** Specifies border thickness. Values are **Thick**, **Medium**, **Thin**, or **None**. Default is **Thin**. **Show Search Input** Shows the search input on the results page. **Enable advance links** Enables search results to link to specific tabs of an API details page, such as the console, documentation, custom fields, and applications tabs, according to their tab set IDs. When you select **Enable advance links**, configure the tab set ID fields that match your customization of the tabs of the API details page, such as `Console Tab Set Id`, `Documentation Tab Set Id`, `Custom fields Tab Set Id`, and `Applications Tab Set Id`: 1. Open the builder. 2. Preview the community as an authenticated user. 3. Open the API details page for an API. 4. Select a tab. 5. In the URL of the current page, find a tab set ID, which looks similar to `tabset-1a2b3c=2` or `tabset-1a2b3c=4d5e6f`. 6. Copy this tab set ID to a tab set ID field such as `Console Tab Set Id`. ## API Access Requester The API Access Requester component enables community members to request access to an API for either a new or existing application. An API page displays the **API Access Request** button when at least one public managed API instance has its [visibility set to public in Exchange](https://docs.mulesoft.com/exchange/to-configure-api-settings). Community members can either request access for an existing client application and API instance, or request to create a new client application with access to the API by specifying the application name and description and choosing an API instance. When a consumer developer requests access for a new client application to an API instance that has an identity provider (IDP), the consumer developer must specify one or more of the OAuth 2.0 grant types Authorization Code Grant, Implicit Grant, Refresh Token, and Resource Owner Grant. Some IDPs do not support all grant types. Requesting access and specifying an unsupported grant type shows the error `Error creating application.` You can specify values for the following parameters of the API Access Requester: **API** Specifies the API. **Button Border Radius** Selects the button border radius. A larger radius makes the button look more rounded. **Button Align** Specifies left, right, or center button alignment. **Show Modal Title Line** Shows the title line in the access request modal. ## API Card The API Card component shows information about an API or API Group, including icon, name, and description. The icon, name, and description shown are set in the API Community Manager control panel when you [add an API or API Group version to your community](https://docs.mulesoft.com/api-community-manager/publish-apis). You can specify values for the following parameters of the API Card: **API** Specifies the API shown. **Override URL** By default the API Details button links to the API main page. You can optionally set the Override URL to direct users to other information such as documentation or marketing collateral. **Show Buttons** Shows the API Details button. If the button is not shown, users can click anywhere on the card to show the API details. **Card Height** Specifies the card height. **Card Margin** Specifies the amount of margin space around the card. **Card Border** Specifies the card border thickness. **Card Border Radius** Specifies the card border radius. A larger radius makes the cards look more rounded. **Card Shadow** Specifies the shadow beneath the card. **API Details Button Label** Enables you to set the API Details button label. Default is **API Details**. **Learn More Button Label** Enables you to set the Learn More button label. Default is **Learn More**. ## API Carousel The API Carousel component shows a horizontally scrollable set of API cards. Each card shows an API or API Group. The API icon, name, and description shown are set in the API Community Manager control panel when you [add an API version to your community](https://docs.mulesoft.com/api-community-manager/publish-apis). You can specify values for the following parameters of the API Carousel: **Show Buttons** Shows the API Details button on each card. Users can see API details by clicking the button if it is present or by clicking anywhere on the card if it is not. **Max Cards Display** Specifies the maximum number of cards to show. **Rows** Specifies the number of rows of cards in the carousel. **Show Arrows** Shows arrows on the carousel’s right and left sides. Clicking the arrows scrolls through the cards in the direction of the arrow clicked. **Arrow Size** Specifies the size of the arrows on the right and left sides. **Show Dots** Shows dots below the cards. Each dot links to a page of cards in the carousel. **Card Height** Specifies the card height. **Card Margin** Specifies the margin space around each card. **Card Border** Specifies the card border thickness. **Card Border Radius** Specifies the card border radius. A larger radius makes the cards look more rounded. **Card Shadow** Specifies the shadow beneath each card. **Message If Empty** Shows a message if the carousel has no APIs. Default is `There are no APIs available right now.` **Show** Specifies whether to show **APIs**, **Groups**, **APIs and Groups**, or **Children**. Default is **APIs and Groups**. **Children** shows the APIs in an API Group. Use the **Children** setting only on pages with **Page Variation** set to **API Group Detail** and not **API Detail**. **Filter Condition (Advanced)** Causes the carousel to show only APIs that match the given search condition, which uses the syntax described in [Filter Conditions](#filter-conditions). **Categories Filter (Advanced)** Causes the carousel to show only APIs that match the given categories, using the syntax described in [Categories Filter](#categories-filter). **API Details Button Label** Enables you to set the API Details button label. Default is **API Details**. **Learn More Button Label** Enables you to set the Learn More button label. Default is **Learn More**. ## API Catalog The API Catalog component offers API consumers an interactive way to explore all the available APIs and API Groups in an API community. The API Catalog shows API cards in rows and columns, divided into pages, and shows controls to filter the displayed APIs and API Groups by categories and search terms. Each card shows an API or API Group. With the catalog users can view and explore large numbers of API versions. The API catalog search and the search you perform by using the [ACM Search Box](#acm-search-box) component are not the same searches. The API catalog search is a basic search of APIs and API Groups, and the ACM Search Box component offers advanced search features to search all assets in your API community. In the template community, the link to the API Catalog component appears below the API Carousel component. If a community has multiple API Catalog instances on multiple pages, the best practice is to standardize the pages and place the instances as consistently as possible. To prevent confusion, the API Catalog component is designed to use a maximum of five managed categories, and not tags. After you add a new category in Anypoint Exchange, it appears in the API Catalog configuration within five minutes when the cache refreshes automatically. The API Catalog configuration shows a category only if at least one API has a value for that category. If a category is removed or modified in Exchange, all API Catalog instances automatically reflect the change. A card can have multiple badges from one category. It can display up to three badges and, if it has more, it offers a tooltip to display them. If you do not specify category colors, your community theme is used as the default. Colors can be hexadecimal values such as `#FF0000` or `#0000FF` or standard CSS color names such as `red` and `blue`. You can use URL parameters to pass filters to the catalog. For example, the URL of the page with the catalog component can end with `?catalogFilters=Country:Argentina,USA;Payment:Cash,Credit`. The API icon, name, and description shown are set in the API Community Manager control panel when you [add an API version to your community](https://docs.mulesoft.com/api-community-manager/publish-apis). You can specify values for the following parameters of the API Catalog component: **Component Title** Specifies the catalog title. Default is **API Catalog**. **Show API Counter** Enables you to show the API counter, which displays the number of APIs that match the current search and filters. **APIs Per Page** Specifies the number of APIs shown on each page of the catalog. Default is 12. **Category Filter 1 through Category Filter 5** Specifies the categories that community members and guest users can use to filter the APIs. Default is **None**. **Category Color 1 through Category Color 5** Specifies the color for each category. **Search Input Position** Specifies whether the search box is next to the filters or below the filters and above the cards. **Category Card Badge 1 through Category Card Badge 3** Specifies the categories that appear at the top of the cards as badges, with colors matching the category colors. **Show** Specifies whether to show **APIs**, **Groups**, **APIs and Groups**, or **Children**. Default is **APIs and Groups**. **Children** shows the APIs in an API Group. Use the **Children** setting only on pages with **Page Variation** set to **API Group Detail** and not **API Detail**. **Filter Condition (Advanced)** Causes the catalog to show only APIs that match the given search condition, which uses the syntax described in [Filter Conditions](#filter-conditions). **Categories Filter (Advanced)** Causes the catalog to show only APIs that match the given categories, using the syntax described in [Categories Filter](#categories-filter). ## API Console For information about API Console components, see [API Console](https://docs.mulesoft.com/api-community-manager/api-console). ## API Custom Field Table The **API Custom Field Table** component shows all of an API’s custom fields and their values. You can specify values for the following parameters of the **API Custom Field Table**: **Record Id** Specifies the API. Default is `{!recordId}`, which shows the instances of the API selected on the current page. **Show Table Header** Shows the table header. By default, the table shows all custom fields listed in the Anypoint organization. To show only some fields: 1. Open **Setup** > **Custom Metadata Type** > **ACM General Configuration Metadata** > **Manage Records**. 2. Next to **ACM Configuration**, click **Edit**. 3. In the **CustomFieldsFilter** box, enter a series of custom field keys as a comma-separated list, such as `email,rating,case`. To list all the custom field keys, open the developer console and run the query `SELECT acm_pkg__TagKey__c FROM acm_pkg__AnypointCustomFields__x`. ## API Custom Field Pills The **API Custom Field Pills** component shows up to five of an API’s custom fields and their values, displayed as a sequence of field-value pairs. You can specify values for the following parameters of the **API Custom Field Pills**: **Record Id** Specifies the API. Default is `{!recordId}`, which shows the instances of the API selected on the current page. **Custom Fields** Specifies the five custom fields to show. ## API Details Button The API Details Button component provides portal users with details about an API. You can specify values for the following parameters of the API Details Button: **API** Specifies the API to display. **Button Label** Specifies the button label. Default is **API Details**. **Button Align** Specifies button alignment as left, right, or center of the UI field. **API Name** Adds the API name to the button label. Values are **Append**, **Prepend**, or **None**. Default is **None**. **API Version** Adds the API version to the button label. Values are **Append**, **Prepend**, or **None**. Default is **None**. ## API Documentation Viewer The API Documentation Viewer component shows an API’s documentation from [Anypoint Exchange](https://docs.mulesoft.com/exchange/). The documentation can have multiple pages, and each page can have multiple sections. You can specify values for the following parameters of the API Documentation Viewer: **API** Specifies the API. **Section (Optional)** Selects the section to open. If the **Selected page (optional)** setting is empty, the **Section (optional)** setting is ignored. **Selected Page (Optional)** Selects the page to open. To link directly to a markdown page in this component, set the URL query parameter `selectedPage` to the exact name of the page. For example, if the page is named "Details", use a URL like this: `/communityapi/a003D000001pQpjQAE/basicapi?selectedPage=Details`. If `selectedPage` is defined both in Site Builder for this component and in the URL, then the value in Site Builder is used and the value in the URL is ignored. ## API Engagement The API Engagement component shows the number of likes and subscriptions for an API and enables users to like and subscribe to the API. You can specify values for the following parameters of the API Engagement component: **Record Id** Specifies the API. Default is `{!recordId}`, which shows the instances of the API selected on the current page. ## API Header The API Header component displays the API header, including icon, name, contact email, and description. The API icon, name, and description shown are set in the API Community Manager control panel when you [add an API version to your community](https://docs.mulesoft.com/api-community-manager/publish-apis). The contact email is set in Anypoint Exchange. You can specify values for the following parameters of the API Header: **API** Specifies the API to show. **Show "Learn More" Button** Shows the "Learn More" button. **API Learn More Button Label** Specifies the button label for APIs. Default is **Learn More**. **API Group Learn More Button Label** Specifies the button label for API groups. Default is **Learn More about this API Group**. **Show API Access Requester** Shows the API access requester. **Disable Request Access Anypoint Email** Disable emails for approved and revoked contracts. **Show API Version** Shows the asset version from Exchange when only one version is visible. **Show Contact Email** Shows the contact email from Exchange. When more than one version of the asset is visible, the API Header component displays a version selector and the **Show API Version** checkbox has no effect. To show the email contact: 1. Open **Setup** > **Custom Metadata Type** > **ACM General Configuration Metadata** > **Manage Records**. 2. Check **Show Contact Email**. 3. Click **Save**. ## Application Analytics Graph The Application Analytics Graph component displays statistics about the use of an application, such as traffic, response time, and application health. The component shows the application statistics from [Anypoint API Manager](https://docs.mulesoft.com/api-manager/latest/). You can specify values for the following parameters of the Application Analytics Graph: **Application** Specifies the application to show. ## Application Details The Application Details component displays details about an application from [Anypoint API Manager](https://docs.mulesoft.com/api-manager/latest/). The component shows the application description, application URL, redirect URIs, client ID, client secret, and the application’s contracts with APIs and API Groups. You can specify values for the following parameters of the Application Details: **Application** Specifies the API to show. **Enable Application Editing** Enables editing application details such as the name and description. When application editing is enabled, the component displays the **Reset Credentials** button. By default, this button works on an application with the client provider type Anypoint, and displays an error on an application with a different client provider type such as OpenID. An administrator can customize the button to reset credentials successfully on an application with a client provider type other than Anypoint. ## Application Listing The Application Listing component shows applications that use an API. On a page with an API record ID in scope, such as an API details page, the component shows only the applications with access to the current version of that API. The component shows the application name, client ID, and client secret from [Anypoint API Manager](https://docs.mulesoft.com/api-manager/latest/). You can specify values for the following parameters of the Application Listing: **New Application URL** Specifies a new application URL. **Card Margin** Specifies the amount of margin space around the card. **Card Border** Specifies the card border thickness. **Card Border Radius** Specifies the card border radius. Cards with a larger radius look more rounded. **Card Shadow** Specifies the shadow beneath the card. **Card Width** Specifies the card width. **Card Height** Specifies the card height. ## Instance Viewer The Instance Viewer component shows API instance environments, labels, and URLs. You can specify values for the following parameters of the Instance Viewer: **Record Id** Specifies the API. Default is `{!recordId}`, which shows the instances of the API selected on the current page. **Show Copy URL Icon** Shows the **Copy URL** icon. **Show content in a Box** Shows a box around the instance information. **Show Production-type environments** Shows production-type environments. **Show Sandbox-type environments** Shows sandbox-type environments. **Show Instance Label** Shows the name of each instance. **Show table header** Shows the table header. **Advanced Filter** Shows only APIs that meet the Salesforce Object Query Language (SOQL) condition. Conditions can use the fields `Name`, `Environment`, and `URL`, for example, `Name LIKE 'v1%'`. ## Learn More Button The Learn More Button component provides portal users with a custom page with additional information about the API. You can specify values for the following parameters of the Learn More Button: **API** Specifies the API to display. **Button Label** Specifies the button label. Default is `Learn more about this API`. **Button Align** Specifies button alignment as left, right, or center of the UI field. **API Name** Adds the API name to the button label. Values are **Append**, **Prepend**, or **None**. Default is **None**. **API Version** Adds the API version to the button label. Values are **Append**, **Prepend**, or **None**. Default is **None**. ## Login Form The Login Form component enables community members to log in to the portal. You can specify values for the following parameters of the Login Form: **Start URL** Specifies the URL that members see after they log in. The default value is the portal home page. **Username Label** Specifies the username field label. Default is `Email`. **Password Label** Specifies the password field label. Default is `Password`. **Login Button Label** Specifies the login button label. Default is `Log in`. **Forgot Password Label** Specifies the forgotten password link label. Default is `Forgot your password?`. **Forgot Password URL** Specifies the forgotten password link URL. Default is `/ForgotPassword`. **Self Register Label** Specifies the self-registration link label. Default is `Not a member?`. **Self Register URL** Specifies the self-registration link URL. Default is `/SelfRegister`. ## Login Requester The Login Requester component notifies guest users that they must log in to access feedback and discussions activity in an API’s user forums. ## Self Register The Self Register component enables users to register for portal accounts. You can specify values for the following parameters of the Self Register component: **Start URL** Specifies the start URL. Default is the portal home page. **Confirm URL** Specifies the confirmation URL. Default is `/CheckPasswordResetEmail`. **First Name Label** Specifies the first name field label. Default is `First Name`. **Last Name Label** Specifies the last name field label. Default is `Last Name`. **Email Label** Specifies the email address field label. Default is `Email`. **Password Label** Specifies the password field label. Default is `Create Password`. **Confirm Password Label** Specifies the password confirmation field label. Default is `Confirm Password`. **Submit Button Label** Specifies the submit button label. Default is `Sign Up`. **Include Password Field** Shows the password field. **Extra Field Set** Specifies extra fields. **Registrations Require Approval** Select whether registration requires approval. **Approver ID** Specifies the approver ID. ## Spec Downloader The Spec Downloader component enables users to download an API specification. The API specification downloaded from API Community Manager is the same as the specification downloaded from Anypoint Exchange. The available buttons are **Download Spec as RAML** and **Download Spec as OAS**. Upload specifications as RAML, OAS 2.0, or OAS 3.0. Uploading a RAML version automatically generates an OAS 2.0 version. Uploading an OAS 2.0 or OAS 3.0 version automatically generates a RAML version. Due to small differences in the RAML and OAS formats, the automatically generated version might be slightly inconsistent with the uploaded version. You can specify values for the following parameters of the Spec Downloader component: **Record Id** Specifies the API. Default is `{!recordId}`, which downloads the specification of the API selected on the current page. **Layout** Specifies the layout of the buttons, **Horizontal** (default) or **Vertical**. **Buttons Color Picker** Specifies the color of the buttons. **Download Spec Options** Specifies the download buttons to show: **Original Format**, **All** (default), **OAS3**, or **RAML**. **Show Export Message** Shows an icon next to the export button with a tooltip warning about possible inconsistencies when exporting an API specification to a different version. ## User Settings The User Settings component enables users to configure notification settings and control what emails they receive. ## User Subscriptions The User Subscriptions component shows users their API subscriptions and the option to unsubscribe from each API. ## Filter Conditions The API Carousel component and the API Catalog component use the parameter **Filter Condition (Advanced)** to show only the APIs that meet the _condition_ (a standard search in Salesforce Object Query Language (SOQL)). Conditions can use these fields: - `Icon` - `Name` - `NavigateUrl` - `VersionGroup` These examples demonstrate filter conditions: - `Name = 'My API'`: The API name is exactly equal to `My API`. - `Name LIKE '%My API%'`: The API name contains the text `My API`. - `(NOT Name LIKE '%BETA%')`: The API name does not contain the text `BETA`. - `(Name = 'API Alpha' OR Name = 'API Bravo')`: The API name is `API Alpha` or `API Bravo`. - `(Name = 'My API' AND VersionGroup = 'v1')`: The API name is `My API` and the API version group is `v1`. - `(Name LIKE 'Product%' OR Name LIKE 'Shipping%' OR Name LIKE 'Order%')`: The API name begins with `Product`, `Shipping`, or `Order`. - `Icon != ''`: The API has an icon. - `NavigateUrl != ''`: The API has a Learn More button that links to a custom page with more information. - `VersionGroup = 'v2'`: The API version group is exactly equal to `v2`. - `VersionGroup > 'v1'`: The API version group is later than `v1`. - `VersionGroup < 'v1'`: The API version group is earlier than `v1`. - `VersionGroup >= 'v2'`: The API version group is later than or equal to `v2`. - `VersionGroup <= 'v2'`: The API version group is earlier than or equal to `v2`. Queries using `OR` or `AND` must enclose the whole condition in parentheses. API Community Manager compares version groups using normal string comparison. You can learn more about SOQL from the Salesforce SOQL and SOSL Reference. ## Categories Filter The API Carousel component and the API Catalog component use the parameter **Categories Filter (Advanced)** to show only the APIs that have categories in Anypoint Exchange with the specified values. Write categories and values as semicolon-separated pairs such as `Country=Argentina;Payment=Credit`. Use commas to separate multiple values for the same category such as `Country=Argentina,Spain;Payment=Credit`. The API Carousel or API Catalog will show only APIs that match all of the category-value pairs in the categories filter and all of the filter conditions.