Understanding How to Build Fluid Applications

PeopleSoft fluid applications are built in large part the same as you build a traditional or classic PeopleSoft application, using the same general application development steps in Application Designer. You create fields, records, and build SQL tables just as you would a traditional PeopleSoft application. But when it comes to designing pages and configuring components, you depart somewhat from the steps and techniques used for building PeopleSoft classic applications.

The following table contains the traditional PeopleSoft application development steps as they pertain to developing fluid applications.

Development Step

Fluid Consideration

1. Design application.

Review your in-house development cycle and documentation.

2. Create fields.

Create fields just as you would for a traditional PeopleSoft application. In most cases, the same fields that already exist would be used for any fluid development projects.

3. Create record definitions.

Create records just as you would for a traditional PeopleSoft application. In most cases, the same records that already exist would be used for any fluid development projects.

4. Build SQL tables.

Build SQL tables using the same techniques as for traditional PeopleSoft applications.

5. Create pages.

While you still use Application Designer to create fluid page definitions, the approach and layout used are completely different than what are used for traditional PeopleSoft page development. In addition, CSS is used heavily for appearance and layout. JavaScript can be used, if required.

6. Create components.

Components used for fluid pages must be configured specifically for that purpose. The fluid component options must be selected and set for fluid pages within that component to display as a fluid application.

7. Register components.

Classic and fluid applications both need to have the components registered using the registration wizard.

8. Test the application.

Use actual mobile phones, tablets, laptops, and desktop computers to test your application.

Note: While you can use device emulators for some preliminary testing, these emulators do not fully replicate the actual device and its native operating system. In particular, iOS testing requires an actual iOS device.

Note: The majority of this documentation focuses on creating pages and creating components for fluid display.

Application Designer is the main development tool used for building both classic and fluid PeopleSoft applications, and PeopleCode is the main programming language used to interact with component processing events and implement business logic. However, with fluid applications, the application implementation teams that will develop or customize PeopleSoft fluid applications will need expertise in these additional areas (listed in order of importance and recommended experience):

  • CSS3

  • HTML5

  • JavaScript

Important! With the flexibility provided through creating and customizing HTML, CSS, and JavaScript, it is up to the developer to determine the amount of development work performed outside of the realm of PeopleTools. For example, PeopleTools cannot implement restrictions on what a developer adds to a freeform style sheet or to a JavaScript program. Developers customizing such elements need to be aware of performance and security implications.

Note: After reading this document, your application documentation, and any related information related to PeopleSoft Fluid User Interface, one very effective way to learn about fluid applications is to use the fluid applications delivered with your PeopleSoft application as examples. Consider and explore the intended audience, the capabilities of the pages, the page design, the page controls used, the component contents and settings, and so on. Especially, pay close attention to how CSS style classes are applied.