Create a Button


Administrators can create Community Hub buttons and specify what the button is labeled, when it should be displayed, where on a card it is displayed, how it should appear, and what it should do when clicked.

  1. In the Force.com App Menu, select Community Hub Setup.
  2. In the tab bar, click Buttons.
  3. Click New Button.
  4. In Name, enter an easily recognizable term to identify the button using Pascal Case.
  5. If you want to grant or revoke access to the button, in Access Control, select the access control which grants the access you want to use.

    Deactivated access controls cannot be selected. Edit an Access Control to activate it.

  6. If you want the button to display only when certain conditions are met using an Apex class, in Class, enter the name of the Apex class. Learn more about the Button Classes Used in Community Hub.

  7. If the button is a primary user action, select Is Primary Action.

    We recommend that a card only have one primary button, with the opportunity for one or more secondary buttons.

      Show Me an Image...

    Primary Action

    Secondary Action

  8. In Label, begin typing the name of the custom label you'd like to use for the button text and select it from the list of results or click Add to create a new one.

      Create a Custom Label...

    1. In Name, enter a name which meets the following standards:
      • It is written using Pascal Case.
      • It contains 1–4 words.
      • It uses only words in Value.
    2. In Short Description, enter a short description which meets the following standards:
      • It is the value in Name.
      • It is written with spaces between each word.
    3. In Categories, enter the name of the page(s) and/or function(s) where the custom label will be used.
    4. In Value, enter the text to be displayed in Community Hub.
    5. Click Save.

  9. If you want to set where the button displays on a card, in Location, select the location. If nothing is selected, the button displays in the Left position.

    Left—The button displays on the left side of the containing card (default behavior)
      Show Me an Image...

    Right—The button displays on the right side of the containing card.

      Show Me an Image...

    Block—The button expands to match the width of the containing card.

      Show Me an Image...

     

    Bottom—For Record List Card Types, the button is shown on the bottom of the card, rather than for each item in the list of records.

      Show Me an Image...

     

  10. If you want the button to open the page in a different HTML window target, like in a new tab, in Target, enter the HTML Target value.

  11. In URL, enter the path for the page to which the button should link.

  12. In URL Parameter Key, enter the name of the URL parameter to be passed to the page to which the button links. If you leave URL Parameter Key blank, the default URL parameter is id. As an example, the value in URL is yourcommunityhub.com/personalsnapshot, the value in URL Parameter Key is personid, and the button is provided by a data source the value of 12345 for the personid URL parameter. When the button is clicked, constituents are taken to yourcommunityhub.com/personalsnapshot?personid=12345. If you leave URL Parameter Key blank, the default URL parameter is id. In this case, when the button is clicked, constituents are taken to yourcommunityhub.com/personalsnapshot?id=12345.
  13. If you want the button to only display based on certain criteria:

    1. In Object, select the object containing data used to determine whether the button should display.
    2. In Data Source, select the data source that specifies when the button should display. If the data source is based on a query, be sure to review any tips for making a query for the entered Class. Learn more about Button Classes Used in Community Hub.
  14. If you want to trigger custom Javascript behavior when the button is clicked, in On Click, enter the line of Javascript to execute. Learn more about the onClick parameter: apex:commandButton (external).

  15. If you want to trigger custom Javascript behavior after the asynchronous partial postback is complete, in On Complete, enter the line of Javascript to execute. Learn more about the onComplete parameter: apex:commandButton (external).

  16. If you want only certain portions of the page to reload after your button is clicked, in Re Render, enter the id's of the page elements you want to rerender. Learn more about the reRender parameter: apex:commandButton (external).

  17. If you want the button to display a specific label upon successful submission, in Success Label, enter the name of the label.

  18. Click Save.



In This Section