Visualforce Page Markup

After creating a Multi-Tabular Conga Grid℠, you may need to change the objects that appear in the tabs. This involves editing the Visualforce Page Markup. Follow these steps to access the markup code:

  1. In Salesforce®, click Setup.
  2. Click Develop and click Visualforce Pages.
  3. Locate the Multi-Tabular Visualforce page you want to edit, and click the Edit link next to it.
  4. In the Visualforce Markup code, look for the list tags: <li>...</li>. These define the tab labels. Following the list tags are groups of division tags (<div>...</div>). Each division tag group corresponds to a specific tab label in the list tags above: 

    The division tags define what is underneath each tab. Immediately above the beginning <div> tag is a grey-colored HTML comment that specifies the name of the tab.

    Notice how each <CRMC_PP:Grid> tag has an objectName field. This should be the same for every tab since the Multi-Tabular related list pertains to a specific object (in this case, Opportunity). If the specified object name is incorrect, then the data in the Multi-Tabular list will be incorrect.

    If you used the Multi-Tabular (Automatic) option to create a page layout, the object name will automatically populate in the Visualforce Markup code. If you used the Multi-Tabular (Manual) option to create a page layout using your own Visualforce Markup code, be sure to use the singular form of the object name (for example, Opportunity versus Opportunities). This pertains to standard Salesforce objects.
    If the object you are creating a tab for is a custom object, then you need to find the API name for that object. To do this, go to Salesforce Setup, click Create and click Objects. Find the object in this list and click the link next to it. Locate the field named object Name. Type that name exactly after the CRMC_PP:Grid ObjectName text.

Edit Tab Names

To edit a tab name, update both the list tag and its corresponding HTML comment (between the <!--- and ---> characters). For example:

Delete Tabs

To delete a tab, remove the associated list item (<li>...</li>) containing the tag name. Then delete the entire division block (<div>...</div>) associated with that list. The following figure shows an example:

Add New Tabs

Each tab in the Multi-Tabular Visualforce page is based on a specific view. You can add more tabs (views) by following these steps:

Get the View ID

  1. Click Conga Grid Explorer.
  2. Select the object of interest (for example, Opportunity).
  3. Click the Manage Views link. The Manage Views screen appears.
  4. Select the view that will be associated with the new tab.
  5. Click Actions and click Export To > Excel (with Record IDs).
  6. Open the exported record in a spreadsheet application, and note the Id value of the selected record. You will need this in a later step.
  7. Close the Manage Views screen.

Edit the Visualforce Markup

  1. Go to the Visualforce Markup code for the selected Multi-Tabular Visualforce page. Refer to steps 1 through 3 at the beginning of this topic.
  2. Decide where the tab should be located relative to other tabs.
  3. Insert a new list item (<li>...</li>) in the group of list tags in the appropriate order. This example shows adding a new tab labeled This Quarter as the third tab:
  4. Select any division block of text beginning with the <!--- comment characters and ending with the </div> tag. Copy this to your system clipboard (for example, Ctrl-C).
  5. Paste the block of code among the division tags in the order where you want the tab to appear. For example, we pasted the code from Step 3 after the second <div>...</div> group since the new tab will be third in the order.
  6. Enter the new tab name in the grey HTML comment tag between the <!--- and ---> characters.
  7. Replace the ViewID value (between the double quotes) with the Id value that you recorded earlier (see Get the View ID).
  8. Click Save at the top of the Visualforce page editor.

To see the result, click Preview (in the same row as Save).