Working with Fluid Homepages and Dashboards

This topic contains an overview and introduces the concepts involved with using fluid homepages and dashboards.

PeopleSoft Fluid User Interface Concepts

A fluid homepage is a PeopleSoft page that aggregates related information and displays tiles that can provide both snapshots of actionable information as well as navigation to fluid applications. A fluid homepage is displayed when you sign in to a PeopleSoft system. Fluid homepages are the equivalent of classic homepages; similarly, tiles can be compared to pagelets used in classic homepages.

A fluid homepage and the tiles it displays typically share a common purpose or apply to a specific role, such as employee, manager, clerk, and so on. When working with tiles on a homepage, you can select (click or tap) the tile to access the underlying application and perform routine tasks. Tiles typically have a graphic on them, portraying the purpose of the underlying application, which helps you to identify the tile and associate it with the application. Some tiles also display up-to-date information, making you aware of high-level information for decision making or monitoring.

Image: Example of a fluid homepage

This example illustrates the appearance of a fluid homepage with a number of tiles that you can select to view information or complete a task. For descriptions of the elements and usage of the homepage, see Working with Fluid Homepage Controls.

Example of a fluid homepage

Understanding Tiles

Tiles can be compared to pagelets, which are available on classic homepages. Tiles provide:

  • Quick navigational access to targeted transactions.

  • An overview of the status of a transaction (for example, your last pay date, the number of approvals requiring your attention, and so on).

  • A graphical overview of a pivot grid or Kibana dashboard.

When working with tiles, consider:

  • Any number of tiles can be added to a fluid homepage; dashboards are limited to just those tiles made available by the dashboard administrator.

  • You can personalize fluid homepages and dashboards by adding, deleting, and moving tiles.

  • Tiles can be used to link to fluid applications or classic applications.

A fluid dashboard is the fluid equivalent of a classic dashboard. Similar to classic dashboards, fluid dashboards do not appear automatically after sign in; instead, you access a fluid dashboard by clicking a content reference link, which can appear anywhere in the menu structure. Similar to a fluid homepage, a fluid dashboard aggregates related information and displays tiles that can provide both snapshots of actionable information as well as navigation to other applications. A fluid dashboard and the tiles it displays typically share a common purpose or apply to a specific role, such as employee, manager, clerk, and so on. While you can personalize a fluid dashboard, you can add only those tiles that have been configured for use on the dashboard by the dashboard administrator.

Image: Example of a fluid dashboard

This example illustrates the appearance of a fluid dashboard. For descriptions of the usage of the controls in the fluid banner at the top of the dashboard, see Working with Fluid Homepage Controls.

Example of a fluid dashboard

The following list describes the controls that appear on fluid homepages and fluid dashboards. (Many of these controls are also displayed on fluid pages, classic pages, and classic homepages.)

Field or Control

Definition

Back button

Back button (unlabeled).

Use the Back button to navigate back to the previously visited component, homepage, activity guide, navigation collection, or WorkCenter. The label on the Back button varies to indicate the item to which you will return. See Using the Back Button.

Note: Displayed on fluid dashboards only; not displayed on fluid homepages.

Search Category selectorSearch input fieldAdvanced Search button

Use the Global Search bar to perform global searches.

See Working with Global Search.

Note: Displayed on fluid homepages by default. Displayed on fluid dashboards and other pages only after clicking the Global Search button.

Home button

Home button.

Use the Home button to return to your default homepage, which is the homepage that you arrive at directly upon signon.

Global Search button

Global Search button.

Use the Global Search button to open the Global Search bar in the banner. See Working with Global Search.

Note: Displayed on fluid dashboards; also displayed on fluid homepages only when the browser width does not permit display of the Global Search bar..

Notifications button

Notifications button (without the new notifications indicator).

Use the Notifications button to open the Notifications panel displaying any pending actions and alerts. See Using the Notifications Panel.

Note: Displayed on fluid dashboards; also displayed on fluid homepages when the Notifications panel is hidden either when the browser width is 1280 pixels or less or through personalization. See Managing Fluid Homepages.

Actions menu button

Actions button.

Use the Actions button to display the Actions menu. See Using the Actions Menu.

NavBar button

NavBar button.

Use the NavBar button to display the NavBar (sometimes referred to as the navigation bar). See Working with the NavBar.

Homepage selector

Homepage drop-down selector.

When there are multiple homepages to which you have access, use this drop-down list to select a different homepage. Alternatively, you can use the left and right arrows of the homepage navigator to navigate through your homepages.

Note: Displayed on fluid homepages only.

Homepage navigator

Homepage navigator.

When there are multiple homepages to which you have access, use the left and right arrows of the homepage navigator to navigate through your homepages. The homepage navigator displays the numerical position of the current homepage as well as the total number of homepages.

Note: Displayed on fluid homepages only.

Quick access bar: Recently Visited button

Recently Visited button (in the quick access bar).

Use the Recently Visited button to display your recently visited items in the quick access bar. See Using the Quick Access Bar.

Note: Displayed on fluid homepages only.

Quick access bar: Favorites button

Favorites button (in the quick access bar).

Use the Favorites button to display your favorite items in the quick access bar. See Using the Quick Access Bar.

Note: Displayed on fluid homepages only.

Refresh button

Refresh button.

Use the Refresh button to refresh the fluid dashboard, manually, so that all live tiles display the most current representation of the underlying data if you’ve been on the dashboard for a period of time.

Note: Individual tiles can be configured to refresh at specific rates.

Note: Displayed on fluid dashboards only. On fluid homepages, a Refresh link is displayed in the Actions menu.

The quick access bar (QAB) provides quick access to your recently visited items and your favorites. The items displayed in the quick access bar are the same as those displayed via the Recently Visited and Favorites tiles displayed in the NavBar. The quick access bar is displayed by default on all fluid homepages; however, it can be disabled system-wide by your system administrator.

Image: Quick access bar: Favorites

For example, your favorites are available in the quick access bar:

Favorites displayed in the quick access bar

Note: On small form factor devices and at browser widths less than or equal to 680 pixels, the quick access bar is displayed at the bottom of the page instead of on the left.

This section discusses these topics:

  • Accessing the personalization page.

  • Showing or hiding the Notifications panel.

  • Adding a fluid homepage.

  • Deleting a fluid homepage.

Accessing the Personalize Homepage Page

Use the Personalize Homepage page to manage your fluid homepages:

  1. Navigate to any fluid homepage.

  2. Select the Actions menu.

  3. Select Personalize Homepage.

Image: Personalize Homepage page

This example illustrates the options on the Personalize Homepage page, used for personalizing the content on a fluid homepage.

Personalize Homepage page

Note: The labels of system-defined homepages and dashboards are translatable; however, personalized labels of homepages and dashboards are not translatable—this applies to personal fluid homepages as well as the personalized labels of fluid homepages, fluid dashboards, classic homepages, and classic dashboards.

Showing or Hiding the Notifications Panel

To show or hide the Notifications panel:

  1. From any fluid homepage, select Personalize Homepage in the Actions menu.

  2. Select the desired Show Notifications Panel option.

    Note: The Notifications panel is displayed by default on fluid homepages unless this setting has been configured differently on your system.

  3. Click Save.

Adding a Fluid Homepage

To add a homepage:

  1. On the Personalize Homepage page, click the Add Homepage button.

    Image: Add Homepage page

    Use the Add Homepage page to create new personal homepages or add system-defined homepages.

    Add Homepage page
  2. On the Add Homepage page, do one of the following:

    • Enter the name of your new personal homepage in the Create a New Homepage edit box, and click Add.

      Note: The system imposes a limit of 10 personal homepages.

    • Select a system-defined homepage from the list of available homepages.

  3. Click Save in the Personalize Homepage header.

Deleting a Fluid Homepage

To delete a homepage:

  1. On the Personalize Homepage page, locate the homepage in the left panel.

  2. Click the Delete button (a trash can icon) for that homepage.

  3. Click Save in the Personalize Homepage header.

This section contains an overview and discusses:

  • Adding tiles.

  • Using the Add To Homepage feature.

  • Deleting tiles.

  • Copying or moving tiles to other fluid homepages.

    Note: You cannot copy or move tiles between fluid dashboards.

  • Dragging and dropping tiles to reposition them.

Adding Tiles

To add tiles to a fluid homepage or dashboard:

  1. Navigate directly to the desired fluid homepage or dashboard.

    Note: You can personalize a fluid dashboard only after navigating directly to the dashboard; it cannot be personalized when displayed inside an activity guide, fluid navigation collection, or master/detail wrapper.

  2. From the Actions menu, select Personalize Homepage (or Personalize Dashboard).

  3. On the personalization page, click the Add Tile button.

    Image: Add Tile page

    This example illustrates the Add Tile dialog box, which you use to find and add tiles to fluid homepages and dashboards.

    Add Tile page

    Field or Control

    Definition

    Tile is displayed on small form factor indicator

    Indicates that a tile is displayed on a homepage accessed from a small form factor device such as a smartphone. If this icon does not appear next to a tile, you will not be able to see the tile when accessing the homepage using a smartphone. In addition, the tile will not be available for you to add when you are personalizing the homepage using a smartphone. However, you will see the tile on other devices, such as a tablet, laptop computer, or desktop computer.

    In the example above, Enter Time would not appear on the homepage if it is accessed using a smartphone and it would not appear in the Add Tile dialog box.

  4. Find the desired tile using the Add Tile page. You have these options:

    • Enter the name or partial name of the tile in the search box, and click the Search button.

    • Browse through the folders to find the tile.

  5. Select the tile to be added.

    The tile is added to the end of the list of tiles on that fluid homepage or dashboard.

  6. Optionally, move the tile to a different position on the homepage or dashboard by dragging and dropping it. See “Dragging and Dropping Tiles to Reposition Them” in a following section for more information.

  7. Click Save on the personalization page.

Using the Add To Homepage Feature

You can also add tiles to fluid homepages on an ad hoc basis using the Add To Homepage link in the Actions menu.

Note: No actual tile definition will be created for these tiles if one does not exist already. The information is stored in the system as personalization data only.

Image: Add To Homepage dialog box

When you add a tile to a fluid homepage on an ad hoc basis, you can edit and personalize the label for the item. For example:

Add To Homepage dialog box

Deleting Tiles from Homepages or Dashboards

To delete tiles from a fluid homepage or dashboard:

  1. Navigate to the desired fluid homepage or dashboard.

  2. From the Actions menu, select Personalize.

  3. Locate the tile you want to delete from the homepage.

  4. Click the Delete button (the trash can icon).

  5. Click Save on the personalization page.

Copying or Moving Tiles to Other Fluid Homepages

Note: You cannot copy or move tiles between fluid dashboards.

To copy tiles to other fluid homepages:

  1. Navigate to the desired source homepage.

  2. From the Actions menu, select Personalize Homepage.

  3. Locate the tile you want to act on.

  4. Click the action button in the bottom, right-hand corner of the tile.

  5. On the Select Action prompt, select either:

    • Copy To

    • Move To

  6. In the prompt, select the target homepage.

  7. Click Save on the Personalize Homepage page

Dragging and Dropping Tiles to Reposition Them

To drag and drop tiles to reposition them on a fluid homepage or dashboard:

  1. Navigate to the desired fluid homepage or dashboard.

    Note: You can drag and drop tiles in either directly on the homepage or dashboard or on the personalization page.

  2. Click on the tile you want to reposition.

  3. Drag it to the desired location—that is, the current position of another tile.

    Note: You must drop a tile onto another tile for the tile to be repositioned. Dropping the tile into empty space does not trigger the drop function.

  4. Drop the tile by releasing it.

To drag and drop tiles to move them to a different fluid homepage:

  1. Navigate to the desired homepage.

  2. From the Actions menu, select Personalize Homepage.

  3. Click on the tile you want to move to a different homepage.

  4. Drag the tile and hover it over the desired homepage in the left panel, where each homepage is listed.

  5. When the desired homepage is highlighted, release the tile to drop it.

  6. Click Save.

Note: Alternatively, you can use the keyboard to reposition tiles. First, highlight the tile that you want to reposition, press Ctrl + M to select the tile, use the Tab or the arrow keys to highlight the drop location, and then press Ctrl + Alt + M to drop the selected tile.

Tiles are the navigational and display construct created specifically for small form factor devices such as smartphones. Tiles provide application content from PeopleSoft systems and other sources. Designed to be more than just a navigation button, a tile leverages the ability to display dynamic information from PeopleSoft components, pivot grids, and other information sources.

Note: A tile is conceptually similar to a pagelet, previously delivered on PeopleSoft classic homepages.

Image: Fluid homepage accessed from a smartphone

This example illustrates the layout of tiles in a single column on a smartphone in portrait orientation.

Fluid homepage accessed from a smartphone

Note: On a smartphone, the quick access bar is displayed at the bottom of the page. See Using the Quick Access Bar for more information.

However, not all tiles appear on fluid homepages or dashboards when accessed by small form factor devices such as smartphones. For example, if the application a tile opens would not be suitable to be displayed on a smaller device—many classic applications, for example—the the tile is not designated as “optimized” for small form factor. When you use the Add To Homepage feature on a classic page, the tiles you add in this ad hoc manner are not optimized for small form factor. From the Personalize page, you can determine which tiles will not display on a smartphone by looking for the following icon and message on the tile:

Field or Control

Definition

Tile not displayed on smartphones icon

Tile is not supported on this device

Image: Personalize page on a smartphone

This example illustrates the Personalize homepage page when accessed by a smartphone. Note that the system is indicating that the Absence Analytics tile will not be displayed on the homepage when accessed by a smartphone.

Personalize page on a smartphone