Skip to main content
Conga Support

Multi-Tabular Related List (Stacked)

Follow these steps to create a Multi-Tabular related list where the tabs are stacked vertically:

  1. Click Conga Grid Setup.
  2. Select Global Defaults from the object list.
  3. Click the Global Setup tab.
  4. Click New MultiTab Page.
  5. Enter a Label. The Name field will automatically populate based on the Label.
  6. (Optional). Enter a Description.
  7. (Optional). Select the Show the Side Bar option if you want to display the Configure menu in the grid. This option is disabled by default.
  8. (Optional). Select the Show Header option if you want to display the field (column) headers in the grid.
  9. (Optional). Select the Add Page to AG Users Permission Set option if you want to automatically add the resulting Visualforce page to the Conga Grid Users permission set.

  10. Click OK. The New Conga Grid MultiTab Page screen appears.
  11. From the Select Object drop-down list, choose an object for the first tab in the MultiTab Conga Grid℠.
  12. From the Default View drop-down list, select an existing Conga Grid view for the selected object. Leave it blank for no view. Or, select Create new view for this Page to automatically create a view which you can later redefine when you load the tab.
  13. Choose whether or not to enable various properties for this tab. Refer to the pertinent help topics for details on each feature.

  14. Click Add Another Tab. Repeat steps 11 through 13. Add as many different tabs as you need.
  15. Click Save and Finish. A Visualforce Page Created screen appears.
  16. Click View VF Page.
  17. Click Edit. The Visualforce Markup code should look similar to the following. This example has tabs for Accounts and Contacts.

  18. Change the first several lines to the code shown below. Specifically you will:
    • Add <apex:pageBlock> on line 2.
    • Press ENTER to make line 3 blank.
    • Remove <li>Contacts</li>.
    • Change <div id="tabstrip"> to <div class="tabstrip"> on line 4.
    • Press ENTER to make line 14 blank.
    • Add </div> on line 15.
    • Add </apex:pageBlock> on line 16.
    • Press ENTER to make line 17 blank.
    • Add <apex:pageBlock> on line 18.
    • Copy lines 4 and 5, and paste them into lines 19 and 20.
    • Change line 20 to the appropriate object (Contacts, in this example).

  19. Change the following lines of code:
    • Add </apex:pageBlock> to line 31.
    • Press ENTER to make line 32 blank.
    • Change lines 34-36 to the code shown below. Change the pound signs to periods.

  20. Click Save.

The following example shows a stacked Multi-Tabular related list: