6.5 Configuring Landing Page Elements

6.5.1 Adding a Table

To add a table to the landing page:

  1. In the Landing Page Layout section, in the content editor, click Table in the element palette, then drag the table into the desired area of the landing page canvas.

  2. Set the following configuration options to finish setting up the table:

    • Show border: Select this option if you want the border of the table to be visible.

    • Number of rows: Specify the number of rows that you want the table to have.

      The height of the table is determined by the number of rows in the table and the contents of the table.

    • Number of columns: Specify the number of columns that you want the table to have. You can have up to ten columns.

    • Column width: Specify the width that you want for each column by either percentage or pixel. You can have both percentages and pixels within the same table.

      If your table contains pixels (or if the percentages do not total 100 percent), you must add an additional column to the table that has a width of * in order for the columns to stay at their fixed widths. This is an HTML browser requirement.

      For example, suppose you want a 3-column table with the first column with a width of 450 pixels, the second column with a width of 150 pixels, and the third column with a width of 10 percent. In order for the columns to retain their fixed widths, you must add a fourth column, and specify * in the provided field.

  3. Click OK.

After you add a table to a landing page, you can add content within the table.

  1. Select an element from the element palette and drag and drop it into the location of the table where you want to add the content.

6.5.2 Adding a List

To add a list to the landing page:

  1. In the Landing Page Layout section, in the content editor, click List in the element palette, then drag the list and drop it into the desired area of the landing page canvas.

  2. Set the following configuration options to finish setting up the list:

    • Title: Specify a title for the list.

    • Width: Specify the width that you want the element to be on the landing page, either by percent or pixels.

    • Height: (Conditional) Specify the height that you want the element to be on the landing page by pixels.

    • Show scroll bars when needed: Select this option to have scroll bars appear on elements when the element requires more room than the width and height that you defined. (If you specified 100%, scroll bars are never needed.) If the element does need more room than you defined and you do not select this option, the remaining part of the element is cropped and you are unable to see it.

    • Show border: Select this option if you want the border of the list to be visible.

  3. Click OK.

After you add a list to a landing page, you can add content within the list.

  1. Select an element from the element palette and drag and drop it into the location of the list where you want to add the content.

6.5.3 Adding an Entry

The actual content of your landing page is created in entries. The landing page simply references entries that have already been created within Vibe.

When you use the Entry element to add an entry to the landing page, only the entry title and description can be displayed. If you want to display entry comments, add the Enhanced View element to the landing page, as described in Adding an Enhanced View Element.

To add an entry to the landing page:

  1. In the Landing Page Layout section, in the content editor, click Entry in the element palette, then drag the entry into the desired area of the landing page canvas.

  2. Click Edit next to the Entry field.

    If you are reconfiguring the element, the entry that is being referenced is shown here.

  3. Set the following configuration options to finish setting up the entry:

    • Entry: Click Edit, then select whether you want to search the entire site for the entry or search only within the current folder or workspace, then use the provided field to specify the entry that you want to display on the landing page.

      This field uses type-to-find functionality, so Vibe displays the available options as you type. Click in the field and press the Spacebar to list all the available options.

    • Width: Specify the width that you want the element to be on the landing page, either by percent or pixels.

    • Height: (Conditional) Specify the height that you want the element to be on the landing page by pixels.

    • Show scroll bars when needed: Select this option to have scroll bars appear on elements when the element requires more room than the width and height that you defined. (If you specified 100%, scroll bars are never needed.) If the element does need more room than you defined and you do not select this option, the remaining part of the element is cropped and you are unable to see it.

    • Show Title Bar: Select this option if you want the title bar of the entry to be visible.

  4. Click OK.

6.5.4 Adding a Folder

  1. In the Landing Page Layout section, in the content editor, click Folder in the element palette, then drag the folder into the desired area of the landing page canvas.

  2. Click Edit next to the Folder field.

    If you are reconfiguring this element, the folder that is being referenced is shown here.

  3. Set the following configuration options to finish setting up the folder:

    • Folder: Click Edit, then select whether you want to search the entire site for the folder or search only within the current folder or workspace, then use the provided field to specify the folder that you want to display on the landing page.

      This field uses type-to-find functionality, so Vibe displays the available options as you type. Click in the field and press the Spacebar to list all the available options.

    • Number of entries to show: Specify the number of folder entries that you want to be displayed at any one time.

    • Width: Specify the width that you want the element to be on the landing page, either by percent or pixels.

    • Height: (Conditional) Specify the height that you want the element to be on the landing page by pixels.

    • Show scroll bars when needed: Select this option to have scroll bars appear on elements when the element requires more room than the width and height that you defined. (If you specified 100%, scroll bars are never needed.) If the element does need more room than you defined and you do not select this option, the remaining part of the element is cropped and you are unable to see it.

    • Show Title Bar: Select this option if you want the folder title bar to be displayed.

    • Show Folder Description: Select this option if you want the folder description to be displayed.

    • Show Entries opened: Select this option if you want opened entries to be displayed.

  4. Click OK.

6.5.5 Adding an Enhanced View Element

  1. In the Landing Page Layout section, in the content editor, click Enhanced View in the element palette, then drag the enhanced view into the desired area of the landing page canvas.

  2. In the Enhanced View drop-down list, select one of the available options.

    For more information about each option, see Enhanced View.

  3. Set the configuration options that apply to the enhanced view element that you are adding. Depending on the option that you selected in Step 2, the following configuration options are available:

    • Entry: Click Edit.

      If you are reconfiguring this element, the folder that is being referenced is shown here.

    • Folder: Click Edit.

      If you are reconfiguring this element, the folder that is being referenced is shown here.

    • Find: Select whether you want to search the entire site for the folder or entry, or only within the current folder or workspace; then use the provided field to specify the folder or entry that you want to display on the landing page.

    • Number of entries to show: (Conditional) Specify the number of folder entries that you want to be displayed at any one time.

      This option is available only when referencing a folder.

    • Width: Specify the width that you want the element to be on the landing page, either by percent or pixels.

    • Height: (Conditional) Specify the height that you want the element to be on the landing page by pixels.

      This option is not available when selecting Display calendar or Display my calendar events in the Enhanced View drop-down list.

    • Show Title Bar: Select this option if you want the title bar to be displayed.

      This option is available depending on what you select in the Enhanced View drop-down list.

    • Show scroll bars when needed: Select this option to have scroll bars appear on elements when the element requires more room than the width and height that you defined. (If you specified 100%, scroll bars are never needed.) If the element does need more room than you defined and you do not select this option, the remaining part of the element is cropped and you are unable to see it.

  4. Click OK.

6.5.6 Adding a Graphic

Before you can add a graphic to your landing page, you need to attach the graphic to the landing page, as described in Section 6.13, Enabling Graphics to Be Used on a Landing Page.

  1. In the Landing Page Layout section, in the content editor, click Graphic in the element palette, then drag the graphic into the desired area of the landing page canvas.

  2. Set the following configuration options to finish setting up the graphic:

    • Graphic: In the Graphic drop-down list, select the graphic that you want to display.

      All attachments that are attached to the landing page workspace are displayed in this list. Attachments are also displayed in the Current Attached Files section at the bottom of the page.

    • Set image size: Select this option to specify a specific width and height for the graphic.

    • Width: Specify the width that you want the element to be on the landing page, either by percent or pixels.

    • Height: (Conditional) Specify the height that you want the element to be on the landing page by pixels.

    • Show border: Select this option if you want the border of the graphic to be visible.

  3. Click OK.

6.5.7 Adding a Link (URL)

  1. In the Landing Page Layout section, in the content editor, click Link (URL) in the element palette, then drag the link element into the desired area of the landing page canvas.

  2. Set the following configuration options to finish setting up the URL link:

    • Title: Specify the title that you want to be displayed.

    • URL: Specify the URL that you want to link to.

      To link to a URL outside of Vibe, you must include http:// at the beginning of the URL.

      To link to a page within Vibe, the best method is to use the Link to Folder/Workspace element or the Link to Entry element.

      An alternative is to paste a Vibe permalink into this field. To get the permalink URL of a Vibe page, simply navigate to the page that you want to link to, click Permalink in the footer toolbar, then copy the permalink URL from the Permalink field.

    • Open URL in a new window: Select this option if you want to open the URL in a new browser window.

  3. Click OK.

6.5.8 Adding a Link to a Folder/Workspace

You can create a link to any folder or workspace for which you have appropriate rights.

  1. In the Landing Page Layout section, in the content editor, click Link to Folder/Workspace in the element palette; then drag the link element into the desired area of the landing page canvas.

  2. Click Edit next to the Folder/Workspace field.

    If you are reconfiguring the element, the folder or workspace that is being referenced is shown here.

  3. Set the following configuration options to finish setting up the link:

    • Folder/Workspace: Select whether you want to search the entire site for the folder or only within the current folder or workspace; then use the provided field to specify the folder or workspace that you want to link to.

      This field uses type-to-find functionality, so Vibe displays the available options as you type.

    • Title: Specify a title for the link.

    • Open the folder/workspace in a new window: Select this option if you want to open the folder or workspace in a new browser window.

6.5.9 Adding a Link to an Entry

lets you create a link to any entry for which you have appropriate rights.

  1. In the Landing Page Layout section, in the content editor, click Link to Entry in the element palette; then drag the link element into the desired area of the landing page canvas.

  2. Click Edit next to the Entry field.

    If you are reconfiguring the element, the entry or workspace that is being referenced is shown here.

  3. Set the following configuration options to finish setting up the link:

    • Find: Select whether you want to search the entire site for the entry or only within the current folder or workspace; then use the provided field to specify the entry that you want to link to.

      This field uses type-to-find functionality, so Vibe displays the available options as you type.

    • Title: Specify a title for the link.

    • Open the entry in a new window: Select this option if you want to open the entry in a new browser window.

6.5.10 Adding a Utility Element

Most utility elements are options that are normally displayed either in the Vibe masthead or Navigation panel; however, because it is often desirable to hide the masthead and Navigation panel in order to make more room for information on your landing page, utility elements enable you to display important features in a more concise view.

  1. In the Landing Page Layout section, in the content editor, click Utility Element in the element palette; then drag the utility into the desired area of the landing page canvas.

  2. Select from the following utility elements:

    Link to “Follow this folder or workspace”: Displays a Follow This Workspace or Follow This Folder link.

    Link to “My Workspace”: Displays a link to your personal workspace.

    Link to “Share this folder or workspace”: Displays a Share This Workspace or Share This Folder link.

    Link to “Vibe administration page”: Provides a link to the Vibe Administration page.

    This link is visible only to Vibe users who have administrative rights.

    Sign-in form: Displays a sign-in form when users are not logged in to Vibe.

  3. Click OK.

6.5.11 Adding a Custom JSP

Custom JSP files are stored in the \webapps\ssf\WEB-INF\jsp\custom_jsps directory. If you want to include a custom JSP file in your landing page, you must store the file in this directory in order to reference it from Vibe.

Typically, only Vibe administrators have access to this directory. If you want to create a custom JSP file, consult your Vibe administrator.

After the custom JSP file has been placed in the \webapps\ssf\WEB-INF\jsp\custom_jsps directory:

  1. In the Landing Page Layout section, in the content editor, click Custom JSP in the element palette; then drag the JSP element into the desired area of the landing page canvas.

  2. In the Custom JSP name field, type the name of the custom JSP file that you want to reference.

    You must obtain this file name from your Vibe administrator. Only your Vibe administrator can enable JSP files to be used in the Vibe site.

  3. Depending on how you want to use this custom JSP file, select either Associate a folder with this custom jsp, or Associate an entry with this custom jsp.

    For example, if your administrator has enabled a custom JSP file that enhances the way entries are displayed on the landing page, and you want to utilize this JSP file for a specific folder, you would select Associate a folder with this custom jsp.

  4. Click Edit next to the Folder field.

    If you are reconfiguring the element, the field displays the folder that the custom JSP file is currently associated with. If you are creating a new element, this field is blank.

  5. Set the appropriate configuration options to finish setting up the custom JSP:

    Find: Select whether you want to search the entire site for the folder or only within the current folder or workspace; then use the provided field to specify the folder that you want to associate the JSP file with.

    This field uses type-to-find functionality, so Vibe displays the available options as you type.

    Number of entries to show: Specify how many folder entries you want to be displayed on the landing page at any one time.

    Show Title Bar: Select this option if you want the title bar of the entry to be visible.

    Width: Specify the width that you want the element to be on the landing page, either by percent or pixels.

    Height: (Conditional) Specify the height that you want the element to be on the landing page by pixels.

    CSS Overflow Property: Select a behavior option for when the element requires more room than the width and height that you have defined.

  6. Click OK.

6.5.12 Adding an HTML Editor

To add content (such as text, links, pictures, and videos) to your landing page by using an HTML editor:

  1. In the Landing Page Layout section, in the content editor, click HTML in the element palette; then drag the HTML element into the desired area of the landing page canvas.

  2. Specify content in the HTML editor that you want to be displayed on the landing page.

  3. Click OK.

6.5.13 Adding an Embedded Web Page

  1. In the Landing Page Layout section, in the content editor, click Embedded Web Page in the element palette; then drag the page into the desired area of the landing page canvas.

  2. Set the following configuration options to finish setting up the embedded web page:

    • URL: Specify the URL for the embedded web page that you want to display.

    • Title: Specify a title for the page. This title is displayed on the landing page above the embedded web page.

    • Frame name: This is an internal name for the frame.

    • Height: Specify the height (in pixels) to indicate how much of the page you want to display.

    • Width: Specify the width (in pixels) to indicate how much of the page you want to display.

    • Show scrollbars: Select whether you want to display scroll bars. Keep the default of Auto if you want Vibe to auto detect whether scroll bars are needed.

    • Show border: Select whether you want to display a border around the embedded web page.

  3. Click OK.