BUILD better FLUID SOLUTIONS FASTER!

Learn everything necessary to build a modern, intuitive, and mobile PeopleSoft experience!

What you will learn

  •  Fluid design patterns
  •  Header, footer, and side pages
  •  Stacked grids
  •  Fluid grid design patterns
  •  Click-to-edit self-service grids
  •  Mobile grid considerations
  •  Modal popups
  •  Custom headers
  •  Oracle-delivered CSS classes
  •  Writing your own CSS
  •  Using CSS libraries
  •  Fluid-specific PeopleCode
  •  Creating dynamic tiles
  •  Grid types including flex, list, div, and data
  •  Custom action menu items
  •  Best practices

Also Available as

WHO SHOULD ATTEND?

  • PeopleSoft Developers

Certificate

Each course includes a blockchain-enabled digital certificate of achievement to prove your participation in our online course. Since this is a digital certificate, you print it, add it to your LinkedIn profile, or share it on social media!

Duration

Students typically complete this material within 20 hours.

You will have access to the videos for 60 days after purchase and may keep the accompanying activity guide for life.

RECOMMENDED PREREQUISITES

Course curriculum

  • 1
    Introduction
    • © Copyright
    • 💡 Hints and Definitions
  • 2
    Sample Module
    • Creating a Data Model
    • Activity: Creating a Data Model
    • Creating Sample Components
    • Activity: Creating a Fluid Page
    • Activity: Fluid Layout
    • Activity: Adding a Save Button
    • Activity: Building a Search Sample Component
    • Activity: Custom Search Page
  • 3
    1. Review Activity
    • Review Activity
    • Review Activity
    • Fluid UX Design Guidelines
  • 4
    2. Using Page Types
    • Objectives
    • Watch: About Page Types
    • Introduction
    • Constructing Fluid Components
    • Watch: Footer Page
    • Activity 2-1: Reusable Action Button Footer
    • Watch: Header Page
    • Activity 2-2: Custom Header Part 1
    • Activity 2-3: Custom Header Part 2
    • Watch: Side Page 1
    • Activity 2-4: Navigation Sidebar
    • Side Page Tabs
    • Event Processing Order
    • Best Practices
    • Summary
  • 5
    3. Grids
    • Objectives
    • Watch: Creating Grid Sample Components
    • Activity: Creating the Grid Sample Pages and Components
    • Watch: About Fluid Grids
    • Watch: Stacked Grids
    • Activity 3-1: Stacked Grids (Fields)
    • Watch: CSS Extra Credit
    • Mobile Grid Activity Overview
    • Watch: Actionable Row Indicators
    • Activity 3-2: Actionable Row Indicators
    • Watch: The Modal Popup
    • Activity 3-3: Configuring a Modal Popup
    • Activity 3-4: Editable Tables
    • Watch: Custom Grid Headers
    • Activity 3-5: Custom Grid Headers Part 1
    • Activity 3-6: Custom Grid Headers Part 2
    • Watch: Mobile Grid Options
    • Activity 3-7: List Grid Layout
    • Activity 3-8: Fluid Grids and PeopleCode
    • Watch: Additional Grid Types
    • Additional Grid Types
    • Summary
  • 6
    4. Other Group Box Options
    • Objectives
    • Watch: Custom Action Menu
    • Activity 4-1: Adding Items to the Header Action Menu
    • Watch: Resetting the Grid
    • Activity 4-2: Group Boxes for Custom Headers
    • Activity 4-3: Accordions
    • Activity 4-4: Button Bar
    • Activity 4-5: Popup Menu
    • Summary
  • 7
    5. Dynamic Tiles
    • Objectives
    • Activity 5-1: Grouplets
    • Activity 5-2: Tile Wizard Application Class
    • Summary
  • 8
    6. Fluid-specific PeopleCode
    • Introduction
    • Activity 6-1: Initialize the Side Panel
    • Activity 6-2: Manipulating the Banner
    • Activity 6-3: Display a Confirmation Message
    • Summary
  • 9
    7. CSS3
    • Introduction
    • Activity 7-1: CSS layout for the Action Footer
    • Activity 7-2: Using Oracle JET CSS Framework
    • Best Practices
    • Summary
  • 10
    8. Drop Zones
    • Objectives
    • About Drop Zones
    • Walkthrough 8-1: HCM Drop Zone Content
    • Walkthrough 8-2: HCM Drop Zone Configuration
    • Walkthrough 8-1: FSCM Drop Zone Content
    • Walkthrough 8-2: FSCM Drop Zone Configuration
    • Activity 8-3: Employee Header for HCM Direct Deposit
    • Activity 8-4: Job Data Drop Zones
    • Summary
  • 11
    9. Next Steps
    • My Oracle Support Documentation
    • Course Survey