Contact Us 1-800-596-4880
  1. Homepage
  2. API Community Manager
  3. Brand and Customize Your Site

  4. API Console

API Console

The interactive API Console component shows information about your REST APIs and their methods, and enables users to test the methods by sending requests.

Endpoints are displayed in alphabetical order.

Console components include API Console, API Console Documentation, API Console Instances, API Console Navigation, and API Console Request Panel. In Community Builder, you can add multiple console components to the same page. Changes to a console component are visible in all other console components on that page that display the same API. For example, selecting the Summary tab in an API Console results in Summary tab selection in all API Consoles on the same page that display the same API.

The component shows the public API instances and documentation from Anypoint Exchange.

If an API’s specification includes OAuth 2.0 security, users either select a client application in the Credentials source list to populate the client ID and client secret automatically, or they select Custom credentials in the list to enter the client ID and client secret manually.

Credentials source

By default, the API console sends requests of 2 megabytes or less from the browser through Salesforce Experience Cloud to an API. To send requests directly from the browser to an API instance, which allows requests with no size limit, open Setup > Custom Metadata Type > ACM API Console Configuration Metadata > Manage ACM API Console Configuration Metadata > ACM API Console Configuration > Edit and select Browser Requests Enabled. This setting applies to all API instances in the community and does not affect the mocking service.

You can specify values for the following parameters of the API console:

API

Specifies the API to display.

Show Documentation Pages

Shows the API’s documentation pages.

Expand endpoints on start

Expands the documentation of the API endpoints when the page loads.

Enable resource filtering

Shows a search bar on the navigation panel so users can filter the API resources and show only the resources that match their search terms.

Show endpoints toggle button

Shows a button on the navigation panel to expand or collapse all endpoints.

Remove overview items from navigation

Removes the overview links and shows the overview when the user clicks the endpoint name.

Enable expandable request panel

Enables expanding and collapsing the request panel by clicking the arrows at the edge of the panel.

Link Hover Color

Specifies the hover link color.

Button Text Color (Optional)

Specifies the color of button text.

Button Hover Text Color (Optional)

Specifies the color of button hover text. Default is the button text color.

Headline Font Family (Optional)

Specifies the API console headline font family.

Error Color (Optional)

Specifies the color of error messages.

Method Label Get Background Color

Specifies the GET method label background color.

Method Label Get Color

Specifies the GET method label color.

Method Label Post Background Color

Specifies the POST method label background color.

Method Label Post Color

Specifies the POST method label color.

Method Label Put Background Color

Specifies the PUT method label background color.

Method Label Put Color

Specifies the PUT method label color.

Method Label Delete Background Color

Specifies the DELETE method label background color.

Method Label Delete Color

Specifies the DELETE method label color.

Method Label Patch Background Color

Specifies the PATCH method label background color.

Method Label Patch Color

Specifies the PATCH method label color.

Method Label Options Background Color

Specifies the OPTIONS method label background color.

Method Label Options Color

Specifies the OPTIONS method label color.

Method Label Head Background Color

Specifies the HEAD method label background color.

Method Label Head Color

Specifies the HEAD method label color.

If an API Console navigation item such as an API endpoint or method has a long name, the name wraps around to a second line. By default, the line breaks at the end of a word, using the word-break CSS property set to the value break-word. If you wish to select different line break behavior:

  1. In the API Community Manager control panel, click Community Builder > Settings > Advanced.

  2. In the section Head Markup, click Edit Head Markup.

  3. Insert this code:

    <style>
    api-navigation {
      --api-navigation-list-item-word-break: break-word !important;
    }
</style>

  4. Optionally, replace api-navigation with any selector that contains the component api-navigation.

  5. Optionally, replace break-word with any valid value for the word-break CSS property.

To link directly to an endpoint or type in this component, set the URL query paramters method, path, or type. method must be in lower case. type is case sensitive. If method and path are defined and exist in the API definition, then navigation will open there regardless of the type parameter. If method or path is not defined and type is defined and exists in the API definition, then navigation will open at the specified type. Examples:

  • communityapi/a003D000001pQpjQAE/basicapi?method=get&path=/users/{id}

  • communityapi/a003D000001pQpjQAE/basicapi?type=Users

API Console Documentation

The API Console Documentation component shows the documentation about an API from Anypoint Exchange.

You can specify values for the following parameters of the API Console Documentation:

API

Specifies the API to display.

Show Documentation Pages

Shows the API documentation pages.

Method Label Get Background Color

Specifies the GET method label background color.

Method Label Get Color

Specifies the GET method label color.

Method Label Post Background Color

Specifies the POST method label background color.

Method Label Post Color

Specifies the POST method label color.

Method Label Put Background Color

Specifies the PUT method label background color.

Method Label Put Color

Specifies the PUT method label color.

Method Label Delete Background Color

Specifies the DELETE method label background color.

Method Label Delete Color

Specifies the DELETE method label color.

Method Label Patch Background Color

Specifies the PATCH method label background color.

Method Label Patch Color

Specifies the PATCH method label color.

Method Label Options Background Color

Specifies the OPTIONS method label background color.

Method Label Options Color

Specifies the OPTIONS method label color.

Method Label Head Background Color

Specifies the HEAD method label background color.

Method Label Head Color

Specifies the HEAD method label color.

Headline Font Family (Optional)

Specifies the API console headline font family.

API Console Instances

The API Console Instances component shows the list of public instances of an API, also known as endpoints.

The component shows the public API instances from Anypoint API Manager.

You can specify values for the following parameters of the API Console Instances:

API

Specifies the API whose instances are displayed.

API Console Navigation

The API Console Navigation component shows the API console component’s navigation.

The component shows the public API instances and documentation from Anypoint Exchange.

You can specify values for the following parameters of the API Console Navigation:

API

Specifies the API to display.

Show Documentation Pages

Shows the API’s documentation pages.

Method Label Get Background Color

Specifies the GET method label background color.

Method Label Get Color

Specifies the GET method label color.

Method Label Post Background Color

Specifies the POST method label background color.

Method Label Post Color

Specifies the POST method label color.

Method Label Put Background Color

Specifies the PUT method label background color.

Method Label Put Color

Specifies the PUT method label color.

Method Label Delete Background Color

Specifies the DELETE method label background color.

Method Label Delete Color

Specifies the DELETE method label color.

Method Label Patch Background Color

Specifies the PATCH method label background color.

Method Label Patch Color

Specifies the PATCH method label color.

Method Label Options Background Color

Specifies the OPTIONS method label background color.

Method Label Options Color

Specifies the OPTIONS method label color.

Method Label Head Background Color

Specifies the HEAD method label background color.

Method Label Head Color

Specifies the HEAD method label color.

API Console Request Panel

The API Console Request Panel component shows a panel where users can test an API by making requests to it.

The component shows the public and managed API instances from Anypoint API Manager.

You can specify values for the following parameters of the API Console Request Panel:

API

Specifies the API to display.

Show Documentation Pages

Shows the API’s documentation pages.

Method Label Get Background Color

Specifies the GET method label background color.

Method Label Get Color

Specifies the GET method label color.

Method Label Post Background Color

Specifies the POST method label background color.

Method Label Post Color

Specifies the POST method label color.

Method Label Put Background Color

Specifies the PUT method label background color.

Method Label Put Color

Specifies the PUT method label color.

Method Label Delete Background Color

Specifies the DELETE method label background color.

Method Label Delete Color

Specifies the DELETE method label color.

Method Label Patch Background Color

Specifies the PATCH method label background color.

Method Label Patch Color

Specifies the PATCH method label color.

Method Label Options Background Color

Specifies the OPTIONS method label background color.

Method Label Options Color

Specifies the OPTIONS method label color.

Method Label Head Background Color

Specifies the HEAD method label background color.

Method Label Head Color

Specifies the HEAD method label color.

Link Hover Color

Specifies the color of links when the cursor hovers over them.

Button Text Color (Optional)

Specifies the color of button text.

Button Hover Text Color (Optional)

Specifies the color of button hover text. Default is the button text color.

Headline Font Family (Optional)

Specifies the headline font family.

Error Color (Optional)

Specifies the color of error messages.

To enable users to select an application to populate the clientId and clientSecret credential values, add credential annotations to the application specification:

/all-query:
  get:
    queryParameters:
      query_id:
        type: string
        (credentialType): id
      query_secret:
        type: string
        (credentialType): secret
/all-headers:
  get:
      headers:
        header_id:
          type: string
          (credentialType): id
        header_secret:
          type: string
          (credentialType): secret

If your site has a custom request access implementation, update the application selector by dispatching the following event. Without this event, each time a user adds an application, the user must refresh the page to show the application in the Application menu.

this.dispatchEvent(new Event('acm:application_created_success', {bubbles: true}))