peoplsoft spotlight series · registering a fluid component when registering fluid components, keep...

Copyright © 2018, Oracle and/or its affiliates. All rights reserved. |

PeoplSoftSpotlight SeriesDeveloping Fluid Applications


Developing Fluid Applications Topics

Fluid User Interface Overview

Understanding Fluid Application Development

Creating Fluid Pages

Creating and Registering Fluid Components

Touching Up Fluid Applications

Additional Resources


What is the PeopleSoft Fluid User Interface?

• Takes advantage of the latest web development standards (HTML5 and CSS3).

• Provides a flexible application that can be accessed from a variety of devices and display a suitable interface on multiple form factors.

• Is attractive, efficient, and offers the user experience today’s workforce needs and expects.

• Is the direction of future PeopleSoft application development.

• Is the model for “classic plus” styling introduced in PeopleTools 8.56.

The next evolutionary step for the PeopleSoft application user experience.


Taking Advantage of the PeopleSoft Fluid User Interface

• Implementing the PeopleSoft Fluid User Interface isn’t just for customers on PeopleSoft 9.2 applications.

• If you are running PeopleSoft 9.2 applications, you can deploy the fluid applications delivered with your latest PUM image.

• If you are running PeopleSoft 9.2 or 9.1 applications, you can develop new, custom fluid applications.

• If you are running PeopleSoft 9.2 or 9.1 applications, you can also convertexisting classic components and pages to become fluid applications. (See the Oracle red paper: Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1).)


Prerequisites

This session assumes you have a working knowledge of:

• Application Designer.

• PeopleCode.

• The portal registry.

• Fluid homepages, tiles, and fluid application usage.


Tools and Technology Used to Build Fluid Applications

PeopleTools:

• Application Designer.

• PeopleCode.

Web development technologies:

• CSS3 and the “flexbox” model.

• HTML5.

• JavaScript.

Developers use the same tools as with classic applications!


Reviewing the Eight Steps of PeopleSoft Application Development

1. Design the application.

2. Create fields.

3. Create record definitions.

4. Build SQL tables.

5. Create pages.

6. Create components.

7. Register components.

8. Test the application.

Fluid developers use the same steps!


Using Application Designer for Fluid Application Development

Layout Approach Tab Ordering Applying Styles

Classic

Pixel-perfect, manual layout. (WYWISWG)

Controlled by Order tab for the page definition.

Fixed form typically, selected from various drop-downs in the page field properties dialog box.

Fluid

Create structure.

CSS controls what you see.

Controlled by the structure’s rendering order.

Free form only, entered on the Fluid tab.

Comparing Usage to Classic Application Development


As Compared to Classic PlusConverting Classic to Fluid

Previewing the Session Activity


Creating a Fluid Page Definition

To create a fluid page:

1. In Application Designer, select File > New.

2. Select Page (Fluid).


Using Predefined Layout Pages


Understanding Flexible Box Layout (Flexbox)

Per the W3C:

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

See http://www.w3.org/TR/css-flexbox-1/ for the specification.

Flexible, Dynamic Layout

http://www.w3.org/TR/css-flexbox-1/


Using Group Boxes on Fluid Pages

PeopleTools uses group boxes to:

• Create layout containers for page content.

• Render HTML <div> tags for the containers.

• Enable CSS to be applied to discrete containers.

More than a Visual Cue


Using Subpages

You will often see subpages used to hold fluid page content. Subpages:

• Reduce clutter on the main page.

• Group related fields into separate entities.

• Logically separate business logic.

Modular development


Working with Fluid Page Properties


Online Demo 1: Creating a Fluid Page

21

4

3

5


Online Demo 1: Creating a Fluid Page (cont.)

76 8


Working with Fluid Components

Fluid components:

• Contain one or more fluid pages.

• Include additional custom pages.

• Define fluid banner options.


Setting Fluid Component Properties

Fluid components:

• Set component attributes, such as Fluid Mode.

• Specify whether the component will be available on smart phones (Display on Small Form Factor Homepage).

• Specify the component search page type.

• Set fluid banner features, such as the NavBar, Back button, and others.


Setting the Viewport

• Doing so ensures that your fluid application operates properly across device types.

• Import PT_PAGE_UTILS:Utils into a component PostBuild PeopleCode program.

• Invoke the SetDefaultViewport method, which is the recommended approach:import PT_PAGE_UTILS:Utils;

(create PT_PAGE_UTILS:Utils()).SetDefaultViewport();

Oracle Confidential – Internal/Restricted/Highly Restricted 25

Set the viewport for each fluid component.


Registering a Fluid Component

When registering fluid components, keep these items in mind in the registration wizard:

• Add the fluid component to the portal registry, a menu, and a permission list.

• Select Target Content for the access type.

• The folder name should be a subfolder within the Fluid Pages content reference folder.

• Specify a user-friendly label and description.


Registering a Fluid Component (cont.)


Verifying Fluid Component Content Reference

To confirm fluid component registration:

• Locate the content reference definition in the portal registry.

• View the item in the Add Tile dialog box.


Definitions Created Offline

Menu created in Application

Designer

Folder created in the portal

registry


Online Demo 2: Creating and Registering a Fluid Component

1

2

3

4

5


Online Demo 2: Creating and Registering a Fluid Component (cont.)

6

8

7


Clean up tasks:

• Tile image.

• Static text page title.

• Grid layout type.

• Save button.

• Block elements.

• CSS styling.

• Nested block structure.

• Unsupported page controls and features.



Changing the Tile’s Appearance

The tile is typically the first element a user sees when accessing a fluid application. It should:

• Be labeled intuitively.

• Use graphical characteristics to aid in quick identification.


Changing the Tile’s Appearance (cont.)

The content reference’s Fluid Attributes page allows you to update the tile’s appearance:


Online Demo 3: Touching Up the Converted Fluid Application (Tile Image)

1 2

4

3


Removing the Static Text Page Title


Online Demo 4: Touching Up the Converted Fluid Application (Page Title)

2

3

1


Updating the Grid Layout Type

To update the grids on your fluid page:

1. Open Grid Properties dialog box.

2. On the Use tab, select a fluid grid layout type.


Adding a Save Button

Because fluid pages do not use the classic page navigation and toolbar settings of the component’s Internet tab, you:

• Must add required buttons manually.

• Can create a footer page containing buttons for all pages in a component.


Online Demo 5: Touching Up the Converted Fluid Application (Grids and Save Button)

1

65

3

4

2


Working with Inline and Block Elements

• Inline elements flow similar to text and generally assume a position on the same line, depending on the form factor.

• Placing a layout group box around inline elements makes them block elements, by default.

• Block elements can also be positioned according to the styles applied to the layout group box (for example, in columns). Without styling, the default position of blocks is one below the other.


Online Demo 6: Touching Up the Converted Fluid Application (Block Elements)

1

3

2


Modifying Styles

• Use the Application-Specific Styles group box to extend or override the system default styles applied.

• Use the Suppress System-Specific Style Classes check box to specify whether these styles extend or override.

• Use form factor-specific properties to override or suppress display on a per form factor basis.


Modifying Styles (cont.)

• Some styles are standalone styles that you can apply directly to a page element.

• These styles are not dependent on any other style applied previously and extend or override the system default styles.

Using Standalone Styles


Online Demo 7: Touching Up the Converted Fluid Application (Applying Styles)

1

2

3


Modifying Styles (cont.)

Unlike standalone styles, some styles need to be applied:

• To a specific construct, or structure.

• In a specific, sometimes nested, order with other styles applied previously.

Adding Styles to a Structure


Online Demo 8: Touching Up the Converted Fluid Application (Placeholder Text and Nested Block Elements)

2

4

3

5

1



PeopleSoft Online Help - PeopleSoft PeopleTools 8.56:

• Fluid User Interface Developer’s Guide.

• Application Designer Developer’s Guide.

• Application User’s Guide.

• PeopleCode API Reference.

• PeopleCode Language Reference.

PeopleSoft Online Help



• PeopleSoft Fluid User Interface Supplemental Documentation (Doc ID 1909955.1):

– CSS Guide for PeopleSoft Fluid User Interface.

• Oracle Red Paper: Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1).

• Oracle Red Paper: PeopleSoft Fluid User Interface Programming Fundamentals (Doc ID 2136404.1).

Information on My Oracle Support



• PeopleSoft User Interface – Fluid and Classic Plus: https://docs.oracle.com/cd/E52319_01/infoportal/fluid_ui.html

• PeopleSoft Fluid UX Standards:https://docs.oracle.com/cd/E65859_01/fluid_ux/index.html

Information on the PeopleSoft Information Portal

https://docs.oracle.com/cd/E52319_01/infoportal/fluid_ui.html

https://docs.oracle.com/cd/E65859_01/fluid_ux/index.html



• PeopleSoft Fluid User Interface Rel 8.55 (3 Days).

• PeopleSoft PeopleTools:

– PeopleSoft PeopleTools I Rel 8.55 (5 Days).

– PeopleSoft PeopleTools ll Rel 8.55 (5 Days).

– PeopleSoft PeopleTools I/ll Rel 8.55 Accelerated (5 Days).

• PeopleTools Portal (8.53) and PeopleSoft Interaction Hub (9.1) Administration (5 Days).

• PeopleSoft PeopleCode Rel 8.53 (5 Days).

Oracle University Training

peoplsoft spotlight series · registering a fluid component when registering fluid components, keep...

Documents