In-Depth Interview & Real-Time Reference Guide (2025-26)
===================================================
TABLE OF CONTENTS:
1. FLUID FUNDAMENTALS & ARCHITECTURE
2. FLUID FRAMEWORK & TECHNOLOGY STACK
3. FLUID PAGE DESIGN & STRUCTURE
4. FLUID CONTROLS & WIDGETS
5. DATA BINDING & INTEGRATION
6. RESPONSIVE DESIGN & LAYOUTS
7. STYLING, THEMING & CUSTOMIZATION
8. PERFORMANCE OPTIMIZATION
9. MOBILE-FIRST EXPERIENCE
10. SECURITY & AUTHENTICATION
11. REAL-WORLD SCENARIOS & PATTERNS
12. TROUBLESHOOTING & DEBUGGING
13. BEST PRACTICES & MIGRATION STRATEGIES
===================================================
SECTION 1: FLUID FUNDAMENTALS & ARCHITECTURE
===================================================
Q: What is PeopleSoft Fluid?
A: PeopleSoft Fluid (formerly Fluid User Experience) is a modern, responsive web
application framework introduced in PeopleSoft 9.2 that provides a mobile-first,
cloud-ready user interface. It replaces the legacy Tuxedo-based Rich Client and
delivers a responsive web application that works seamlessly across desktop,
tablet, and mobile devices without separate native apps.
Q: What is the core technology behind PeopleSoft Fluid?
A: Fluid is built on HTML5, CSS3, and JavaScript. It uses a combination of:
(1) PeopleSoft's own Fluid JavaScript framework; (2) Bootstrap for responsive
design; (3) AJAX for asynchronous data loading; (4) RESTful APIs for
communication; (5) Server-side PeopleCode for business logic; (6) PeopleSoft
Application Engine for batch processing integration.
Q: What was the motivation for creating Fluid?
A: Legacy PeopleSoft client-server architecture required thick client
installations (Tuxedo), was expensive to maintain, didn't support mobile
devices, and was difficult to deploy globally. Fluid modernizes PeopleSoft
with: (1) Browser-based, zero-client deployment; (2) Mobile support;
(3) Cloud compatibility; (4) Reduced infrastructure costs; (5) Faster
innovation cycles.
Q: What is the difference between Fluid and Classic PeopleSoft?
A: Classic PeopleSoft uses Component-based pages with server-side rendering.
Fluid uses responsive web technology with client-side rendering and server-side
business logic. Classic requires thick client; Fluid uses any modern browser.
Classic pages don't adapt to screen size; Fluid pages are fully responsive.
Q: When was PeopleSoft Fluid introduced?
A: Fluid was introduced in PeopleSoft 9.2 (released 2015). It became the standard
UI for new functionality in PeopleSoft 9.2 onwards. Legacy Classic pages
continue to coexist but are gradually being migrated to Fluid.
Q: Is Fluid mandatory for all PeopleSoft implementations?
A: No. Organizations can continue using Classic pages if needed. However, all new
functionality (e.g., HCM 9.2+, Financials 9.2+, Supply Chain 9.2+) is built
with Fluid. Oracle recommends transitioning to Fluid for modern capabilities
and support.
Q: What browsers does Fluid support?
A: Fluid supports all modern browsers: Chrome, Firefox, Safari, Edge. Support
varies by PeopleSoft version. Generally, the latest two versions of each
browser are supported. IE (Internet Explorer) support was dropped in recent
versions.
Q: What is the Fluid Framework?
A: The Fluid Framework is PeopleSoft's JavaScript framework that provides the
runtime for Fluid pages. It handles page rendering, data binding, event
handling, navigation, and integration with PeopleSoft servers. It's not a
third-party framework like React or Angular, but PeopleSoft's proprietary
solution.
Q: Can you embed third-party JavaScript frameworks in Fluid?
A: Limited support. Fluid uses its own framework; embedding external frameworks
(React, Angular) can cause conflicts. However, you can integrate third-party
libraries for specific tasks (charts, date pickers) if done carefully.
Q: What is the relationship between Fluid and Cloud PeopleSoft?
A: Cloud PeopleSoft deployments (e.g., Oracle Cloud) are browser-only and use
Fluid. On-premise customers can continue using Classic but should plan for
Fluid migration. Cloud mandates Fluid-first approach.
Q: What is Portal Technology in the context of Fluid?
A: Fluid uses Portal Technology (PortalRegistry, PortalObjects, HomepageRegistry)
to manage navigation, menu structures, and homepage configuration. Portals
define what users see and how they navigate the application.
Q: How does Fluid handle backward compatibility with Classic?
A: Fluid and Classic pages can coexist. Users may see links to Classic pages from
Fluid. However, data entered in Fluid must persist to the same database used
by Classic (and vice versa). They share the same underlying tables.
===================================================
SECTION 2: FLUID FRAMEWORK & TECHNOLOGY STACK
===================================================
Q: What is the Fluid JavaScript Framework architecture?
A: The Fluid JavaScript Framework consists of: (1) Core runtime engine;
(2) Page rendering engine; (3) Data binding engine (two-way binding);
(4) Event system; (5) Control library; (6) Navigation framework;
(7) Error handling; (8) Security layer.
Q: What is two-way data binding in Fluid?
A: Two-way binding means changes in the UI automatically update the data model,
and changes in the data model automatically update the UI. When a user enters
text in a field, the underlying data variable updates immediately, and vice
versa.
Q: How does Fluid handle page initialization?
A: When a Fluid page loads: (1) HTML structure is sent from server; (2) JavaScript
framework initializes on client; (3) Data model is populated (via AJAX calls);
(4) Controls are bound to data; (5) Page is rendered; (6) Event handlers are
attached; (7) Page is displayed to user.
Q: What is the Fluid page request/response cycle?
A: User requests page → Server evaluates security → Fetches page metadata → Sends
HTML shell + JavaScript + initial data → Browser renders page → User interacts
→ AJAX calls fetch/send data → Server executes PeopleCode → Response updates
UI asynchronously.
Q: What is AJAX in the context of Fluid?
A: AJAX (Asynchronous JavaScript and XML) allows Fluid pages to communicate with
the server without page refresh. When a user clicks a button, Fluid sends an
AJAX request, receives response, and updates the page dynamically.
Q: How do you make AJAX calls in Fluid PeopleCode?
A: You don't make AJAX calls in PeopleCode directly. Instead, you implement
server-side methods (e.g., Event Handlers) that Fluid calls via AJAX. The
JavaScript framework handles the AJAX mechanics.
Q: What is the Fluid Page Bean?
A: The Page Bean is a server-side object that manages the state of a Fluid page.
It contains properties (fields), methods (business logic), and event handlers.
The Page Bean is serialized to JSON and sent to the client as the data model.
Q: How is data passed between Fluid and server?
A: Via JSON (JavaScript Object Notation). When a page loads, PeopleCode populates
the Page Bean, which is serialized to JSON and sent to the browser. When the
user submits, JSON is deserialized back into the Page Bean.
Q: What is JSON serialization in Fluid context?
A: Converting PeopleCode objects (Page Bean with properties, collections) to
JSON format for transmission to browser. Deserialization is the reverse:
converting JSON back to PeopleCode objects.
Q: How does Fluid handle server-side PeopleCode execution?
A: Fluid pages invoke PeopleCode methods on the server via AJAX. Common entry
points are: (1) Page-level events (OnLoad, PostBuild); (2) Field events
(Change, Click); (3) Button events (Click); (4) Custom methods.
Q: What is PeopleSoft's RESTful architecture in Fluid?
A: Fluid leverages RESTful API architecture for communication. Pages issue HTTP
requests (GET, POST, PUT, DELETE) to server endpoints. Responses are typically
JSON. This enables loose coupling and scalability.
Q: Can you call PeopleSoft REST APIs directly from Fluid JavaScript?
A: Yes. You can use JavaScript (jQuery, fetch API) to call PeopleSoft REST APIs.
However, most data interactions go through the Page Bean or Application Engine,
not direct API calls.
Q: What is Bootstrap and how is it used in Fluid?
A: Bootstrap is a responsive CSS framework. Fluid uses Bootstrap's grid system
(12-column layout), components (buttons, forms, panels), and responsive
utilities to build responsive pages.
===================================================
SECTION 3: FLUID PAGE DESIGN & STRUCTURE
===================================================
Q: What is a Fluid Page?
A: A Fluid Page is a responsive web page in PeopleSoft built using Fluid's page
designer. It consists of: (1) Page structure (containers, sections);
(2) Controls (fields, buttons, grids); (3) Data bindings; (4) Business logic
(PeopleCode); (5) Styling (CSS classes).
Q: How do you create a Fluid Page?
A: (1) Open Application Designer; (2) Create a new Page object; (3) Select Fluid
as the page type; (4) Add page structure (sections, containers); (5) Add
controls (fields, buttons, grids, tables); (6) Configure data binding;
(7) Implement PeopleCode; (8) Test in browser; (9) Publish.
Q: What is a Section in a Fluid Page?
A: A Section is a grouping of related controls (like a form section). Sections
can be expandable (accordion-style), tabs, or simple containers. They help
organize content and improve UX by grouping related fields.
Q: What is a Grid in Fluid?
A: A Grid (or Table) is a control that displays rows of data, typically from a
collection. Users can sort, filter, paginate, and sometimes edit grid data
directly. Grids are scrollable horizontally on mobile devices.
Q: What is the difference between a Grid and a List in Fluid?
A: Grid = table with columns and rows, supports sorting/filtering/selection.
List = simpler repeating display (each item uses a template). Lists are less
feature-rich but lighter-weight than grids.
Q: How do you bind data to a Fluid Grid?
A: (1) Define a collection in the Page Bean (e.g., ORDER_LINES);
(2) Add Grid control; (3) Set Grid's data source to the collection;
(4) Map collection fields to grid columns; (5) Configure column properties
(sortable, filterable, editable).
Q: What is a collection in a Fluid Page Bean?
A: A collection is a list of related objects, similar to a scroll level in Classic
pages. In Fluid, collections are typically arrays of JSON objects that
represent rows in a grid or list.
Q: Can you edit grid data inline in Fluid?
A: Yes. Configure grid columns as editable. Users can click cells and edit values
directly in the grid. Changes are tracked and saved when the form is submitted.
Q: What are Fluid Page Templates?
A: Page Templates provide predefined structures (layout, controls, styling) for
common scenarios: List pages, Detail pages, Dashboard pages, etc. Templates
accelerate page development.
Q: What is a Fluid Dashboard?
A: A dashboard page displaying summary information and key metrics (cards, gauges,
charts). Dashboards provide at-a-glance status and often include drilldown
links to detail pages.
Q: How do you structure a responsive Fluid Page?
A: Use Bootstrap's responsive grid: (1) Container (12-column layout);
(2) Rows; (3) Columns (responsive widths); (4) Controls within columns.
Columns shrink on mobile, often stacking vertically.
Q: What is a Container in Fluid?
A: A Container is a structural element that groups controls. It can be a panel,
accordion, modal, or simple div. Containers help organize content and apply
styling.
Q: What is Modal in Fluid context?
A: A Modal is a pop-up dialog that overlays the main page. Used for confirmations,
alerts, or detailed editing. Modals prevent interaction with the page behind
them until dismissed.
Q: How do you create a Modal in Fluid?
A: (1) Add Modal control to page; (2) Set Modal content (fields, buttons);
(3) Configure Open/Close triggers; (4) Implement Modal-specific PeopleCode
(typically OnLoad, OnClose).
Q: What are Breadcrumbs in Fluid?
A: Breadcrumbs show navigation hierarchy (e.g., Home > Orders > Order Details).
Clicking breadcrumbs navigates back. Useful for showing context and enabling
quick navigation.
Q: Can you use Breadcrumbs in Fluid?
A: Yes. Breadcrumbs are commonly implemented for multi-step workflows or detail
navigation. You typically implement them via custom HTML/CSS or use Fluid's
breadcrumb component.
===================================================
SECTION 4: FLUID CONTROLS & WIDGETS
===================================================
Q: What are Fluid Controls?
A: Fluid Controls are reusable UI components (fields, buttons, grids, dropdowns,
etc.) that display and collect data. Controls are bound to Page Bean properties
and can trigger events/actions.
Q: What are the common Fluid Controls?
A: (1) Text Input; (2) Password Field; (3) Dropdown/Select; (4) Radio Button;
(5) Checkbox; (6) Date Picker; (7) Text Area; (8) Button; (9) Grid/Table;
(10) List; (11) Image; (12) Label; (13) Link; (14) Hyperlink.
Q: What is a Text Input field in Fluid?
A: A single-line text input control for entering short text (names, IDs).
Supports: (1) Validation rules (required, length, pattern); (2) Placeholders;
(3) Read-only mode; (4) Change events; (5) Character limits.
Q: How do you add validation to a Fluid field?
A: (1) Set field properties: Required, Max Length, Pattern (regex);
(2) Implement field-level PeopleCode validation (FieldChange event);
(3) Implement page-level validation (Save event); (4) Show error messages to
user.
Q: What is a Date Picker in Fluid?
A: A control that allows users to select a date. Provides: (1) Calendar pop-up;
(2) Date parsing and validation; (3) Format configuration; (4) Keyboard and
mouse support; (5) Mobile-friendly date input on mobile devices.
Q: How do you use a Dropdown in Fluid?
A: (1) Create a collection of option objects (value, label); (2) Bind dropdown to
collection; (3) Set selected value via Page Bean property; (4) Listen for
Change event; (5) Execute logic based on selected value.
Q: What is Dynamic Dropdown in Fluid?
A: Dropdown options that change based on another control's value. Example:
selecting a country dynamically loads states in a state dropdown. Implement via
Change event handler.
Q: What is Autosuggest in Fluid?
A: A control that provides real-time suggestions as the user types. Useful for
large lists (employees, suppliers). Suggestions can be pre-loaded or fetched
dynamically from server.
Q: How do you implement Autosuggest in Fluid?
A: (1) Configure Autosuggest control; (2) Provide data source (array of
suggestions or AJAX call); (3) Set suggestion display format; (4) Handle
selection event; (5) Update Page Bean with selected value.
Q: What is a Grid Column Header?
A: Column headers in Fluid grids can be configured as: (1) Sortable — click to
sort ascending/descending; (2) Filterable — click to filter by value;
(3) Resizable — drag to resize column width; (4) Hideable — toggle visibility.
Q: Can you sort Fluid Grid data?
A: Yes. If columns are marked sortable, users can click headers to sort. Sorting
can be single-column or multi-column. Server-side or client-side sorting
depending on data volume.
Q: Can you filter Fluid Grid data?
A: Yes. Configure column filters (text filter, date filter, range filter, etc.).
Filters can be applied independently or combined (AND logic). Filtering is
typically client-side for small datasets, server-side for large.
Q: What is Pagination in a Fluid Grid?
A: Showing a subset of rows per page (e.g., 25 rows per page) with navigation
controls (First, Previous, Next, Last). Improves performance and UX for large
datasets.
Q: How do you implement Pagination in Fluid?
A: Configure grid pagination settings: (1) Rows per page; (2) Show pagination
controls; (3) Fetch data in chunks; (4) Implement server-side pagination if
dataset is very large.
Q: What is a Button in Fluid?
A: A clickable control that triggers an action. Button types: (1) Primary (main
action, e.g., Save); (2) Secondary (alternate action, e.g., Cancel);
(3) Danger (destructive, e.g., Delete); (4) Link (styled as link). Buttons
trigger Click events.
Q: How do you implement a Button Click event in Fluid?
A: (1) Add Button control; (2) Set Button Click property to trigger an action;
(3) Implement action in PeopleCode (button event handler); (4) Action executes
validation, business logic, saves data.
Q: What is a Link/Hyperlink in Fluid?
A: A clickable text element that navigates to another page or external URL. Links
can pass parameters (e.g., item ID) to target page. Styled differently from
buttons.
Q: How do you pass parameters via Links in Fluid?
A: Add parameters to the link URL:
/psc/PROD/EMPLOYEE/ERP/c/EMP_DETAIL.EMP_ID=12345.IParam_FromPage=LIST
On the target page, access parameters via GetEnvironmentVariable() or Page
Bean properties.
Q: What is a Checkbox in Fluid?
A: A control for binary choices (yes/no, true/false). Users click to toggle.
Multiple checkboxes can be used for multi-select. Bound to boolean Page Bean
property.
Q: What is a Radio Button in Fluid?
A: A control for selecting one option from mutually exclusive choices. Multiple
radio buttons with the same name form a group. Only one can be selected at a
time.
Q: What is a Text Area in Fluid?
A: Multi-line text input control for longer text (comments, descriptions).
Supports: (1) Rows/columns configuration; (2) Max length; (3) Word wrap;
(4) Character counter.
Q: What are Fluid Widgets?
A: Widgets are mini-components (smaller than pages) displaying focused information
(e.g., recent orders, pending approvals). Widgets are embedded in pages or
dashboards. Lightweight and reusable.
Q: What is a Card in Fluid?
A: A card is a container (typically in a grid layout) displaying a summary with
image, title, description, and actions. Cards are popular for displaying lists
of items (products, orders).
===================================================
SECTION 5: DATA BINDING & INTEGRATION
===================================================
Q: What is Data Binding in Fluid?
A: The mechanism that connects Page Bean properties to UI controls. When a
property changes, the control updates; when user modifies control, property
updates. This is two-way binding.
Q: How do you bind a field to a Page Bean property?
A: In page designer, select a control and set its "Bind to" property to the Page
Bean property name. Example: TextInput1 binds to PageBean.EmployeeID. The
binding is automatic.
Q: What is One-Way vs Two-Way binding?
A: One-Way: Changes to data update UI only (or UI updates data only). Two-Way:
Changes flow both directions. Fluid uses two-way binding by default.
Q: What is the Page Bean in Fluid context?
A: The Page Bean is a server-side object that holds page state. It contains
properties (fields), collections (rows), and methods. All controls bind to Page
Bean properties. When page loads, Page Bean is serialized to JSON and sent to
client.
Q: How do you define properties in a Page Bean?
A: In the page's PeopleCode, declare properties:
Component PageBean;
Property String EmployeeID;
Property Number Salary;
Property Collection OrderLines;
Q: What is a Page Bean Event?
A: Events fired during page lifecycle: (1) OnLoad — page initializes;
(2) PostBuild — page structure built, ready for data; (3) FieldChange — field
value changes; (4) SavePreEdit — before save; (5) SavePostEdit — after save;
(6) OnClose — page closes.
Q: How do you handle OnLoad event in a Fluid page?
A: Implement the event handler to initialize page:
Function OnLoad()
&PAGEBEANOBJ.EmployeeID = GetEnvironmentVariable("EMP_ID");
&PAGEBEANOBJ.GetEmployeeData();
End-Function;
Q: What is FieldChange event in Fluid?
A: Event fired when a field value changes. Triggered immediately after user
modifies field. Used for dynamic behavior: validation, cascading dropdowns,
calculations.
Q: How do you implement Cascading Dropdowns in Fluid?
A: (1) Create two dropdowns: Country and State; (2) On Country FieldChange event,
fetch states for selected country; (3) Populate State dropdown options;
(4) Update UI automatically via data binding.
Q: Can you call Application Engine from a Fluid Page?
A: Yes. Fluid pages can call PeopleSoft Application Engine programs
asynchronously or synchronously. Useful for batch operations triggered from UI.
Q: How do you call Application Engine from Fluid PeopleCode?
A: Use CreateProcessRequest function:
Local object &Request = CreateProcessRequest("APPNAME", "PROCESS_TYPE");
&Request.RunControlID = &RunControlID;
&Request.ProcessType = "Application Engine";
Local object &ProcessScheduler = &Request.Schedule("PRODDB");
Q: What is Component Interface (CI) integration in Fluid?
A: Fluid pages can call CIs (Component Interfaces) to read/write data. CIs
encapsulate business logic, validation, and ensure consistency. Popular pattern
for Fluid pages.
Q: How do you call a CI from Fluid PeopleCode?
A: Use CreateComponent function:
Local object &CI = CreateComponent("CI_ORDER");
&CI.OrderID = "ORD001";
&CI.Fetch();
&PAGEBEAN.OrderInfo = &CI;
Q: What is REST API integration in Fluid?
A: Fluid pages can call external REST APIs to fetch/send data. Use PeopleSoft's
HTTP Client or JavaScript fetch API. Responses are typically JSON, parsed into
Page Bean properties.
Q: How do you call external REST API from Fluid PeopleCode?
A: Use HTTP Client:
Local object &HTTP = CreateObject("PSHttpClient");
&HTTP.SetURL("https://api.example.com/data");
Local object &Response = &HTTP.Get();
Local object &JSON = &Response.ParseJSON();
Q: Can you call REST APIs directly from Fluid JavaScript?
A: Yes, using fetch API or jQuery.ajax:
fetch('/api/data', {method: 'GET'})
.then(response => response.json())
.then(data => updatePageBean(data));
However, CORS (Cross-Origin Resource Sharing) must be properly configured.
Q: What is CORS in the context of Fluid?
A: Cross-Origin Resource Sharing: Security mechanism allowing/restricting
cross-domain requests. Browser prevents scripts on one domain from accessing
resources on another domain without explicit CORS headers.
Q: How do you handle CORS issues in Fluid?
A: (1) Configure server to send CORS headers (Access-Control-Allow-Origin);
(2) Use JSONP (older approach, less secure); (3) Proxy calls through
PeopleSoft server (recommended for security).
Q: What is Form Submission in Fluid?
A: User enters data in controls, clicks Submit button. Form data (Page Bean
properties) is serialized to JSON and sent to server. Server validates, saves,
and returns result.
===================================================
SECTION 6: RESPONSIVE DESIGN & LAYOUTS
===================================================
Q: What is Responsive Design in Fluid?
A: Design approach where pages adapt to different screen sizes (mobile, tablet,
desktop). Layout, font sizes, and controls adjust automatically. Fluid is
mobile-first responsive by default.
Q: What is Mobile-First Design?
A: Design strategy starting with mobile layout, then progressively enhancing for
larger screens. Prioritizes mobile experience. Fluid uses mobile-first approach.
Q: How does Fluid use Bootstrap Grid?
A: Bootstrap provides 12-column responsive grid. Columns are defined with
breakpoints: xs (mobile), sm (tablet), md (laptop), lg (desktop). Columns
automatically reflow and stack on smaller screens.
Q: How do you define responsive columns in Fluid?
A: Use CSS classes in page HTML:
<div class="col-xs-12 col-sm-6 col-md-4">...</div>
Displays 12 columns on mobile (full width), 6 on tablet, 4 on desktop.
Q: What is a Breakpoint in responsive design?
A: Screen size threshold at which layout changes. Bootstrap breakpoints:
xs (<576px), sm (576px+), md (768px+), lg (992px+), xl (1200px+).
Q: How do you hide elements on certain screen sizes in Fluid?
A: Use Bootstrap display utilities:
<div class="d-none d-md-block">...</div> <!-- Hidden on mobile/tablet, shown on desktop -->
<div class="d-md-none">...</div> <!-- Shown on mobile/tablet, hidden on desktop -->
Q: What is the ideal mobile-first layout for Fluid?
A: (1) Single column on mobile (full width); (2) Two columns on tablet;
(3) Three+ columns on desktop; (4) Touch-friendly button sizes (44px minimum);
(5) Larger font on mobile; (6) Minimize horizontal scrolling.
Q: How do you optimize Fluid pages for mobile?
A: (1) Use responsive grid; (2) Hide non-essential fields on mobile; (3) Simplify
navigation; (4) Use mobile-friendly controls (date picker instead of text);
(5) Optimize images; (6) Minimize external requests; (7) Test on real devices.
Q: What are Navigation Patterns in Fluid?
A: (1) Horizontal menu (desktop); (2) Hamburger menu (mobile); (3) Tab
navigation; (4) Breadcrumbs; (5) Sidebar; (6) Bottom navigation (mobile).
Q: How do you implement Hamburger Menu in Fluid?
A: (1) Use Bootstrap navbar with toggler; (2) Hide menu on mobile (display:none);
(3) Show hamburger icon; (4) Click icon toggles menu visibility; (5) Clicking
menu item closes menu.
Q: What is Sidebar Navigation in Fluid?
A: Left/right sidebar containing main navigation links. On mobile, sidebar is
hidden or converts to hamburger menu. Useful for applications with many
navigation options.
Q: How do you implement Sidebar Navigation in Fluid?
A: (1) Create sidebar container; (2) Position absolutely or use flexbox;
(3) Hide on small screens (display:none or transform:translateX); (4) Add
toggle button; (5) Show/hide via JavaScript.
Q: What is Touch Optimization in Fluid?
A: Designing for touch interfaces: (1) Larger touch targets (44x44px minimum);
(2) Adequate spacing between clickable elements; (3) Avoid hover-only actions;
(4) Support gestures (swipe, pinch); (5) No long-press requirements.
Q: How do you test Fluid pages on mobile?
A: (1) Browser DevTools responsive design mode; (2) Test on real mobile devices;
(3) Test on various screen sizes (320px, 768px, 1024px); (4) Test orientation
changes (portrait/landscape); (5) Test on different browsers/OS combinations.
===================================================
SECTION 7: STYLING, THEMING & CUSTOMIZATION
===================================================
Q: What is CSS in Fluid context?
A: Cascading Style Sheets define Fluid page appearance: colors, fonts, layouts,
spacing. Fluid pages are styled via CSS, allowing complete customization.
Q: What is Fluid Theming?
A: Theming provides organization-wide visual consistency: colors, fonts, logos,
branding. Themes are implemented via CSS files. Organizations can create
custom themes.
Q: How do you apply a Theme to Fluid?
A: (1) Create theme CSS file; (2) Configure in PeopleSoft Portal Configuration;
(3) Assign theme to user group; (4) Theme loads automatically for users in
group; (5) Users can often override theme in preferences.
Q: What is Bootstrap CSS Framework?
A: Bootstrap is open-source CSS framework providing: (1) Responsive grid;
(2) Pre-styled components (buttons, forms, tables); (3) Utility classes
(margin, padding, text alignment); (4) Icons; (5) Consistent look-and-feel.
Q: Can you customize Fluid styling?
A: Yes. You can: (1) Override Bootstrap CSS; (2) Add custom CSS classes to
controls; (3) Inline style attributes; (4) Create custom theme; (5) Modify
HTML structure for custom layouts.
Q: What are CSS Classes in Fluid?
A: Named styling rules applied to elements. Common Fluid classes:
"btn-primary" (primary button), "form-control" (form input), "alert-danger"
(error message).
Q: How do you add custom CSS to a Fluid page?
A: (1) In page's HTML section, add <style> block with custom CSS; (2) Or link
external CSS file; (3) Override existing styles; (4) Use !important if
necessary (not ideal); (5) Test across browsers.
Q: What is Color Theme in Fluid?
A: Primary color, secondary color, success/warning/danger colors. Users may
configure colors in Portal Configuration. Pages automatically use theme colors
via CSS variables.
Q: How do you use CSS Variables for Theming?
A: Define colors in CSS variables:
:root {
--primary-color: #007bff;
--danger-color: #dc3545;
}
Use in styles: background-color: var(--primary-color);
Q: What is Custom HTML in Fluid pages?
A: You can embed custom HTML (forms, divs, sections) in Fluid pages. Useful for
creating complex layouts or embedding third-party widgets.
Q: How do you embed Custom HTML in Fluid?
A: (1) In page designer, add HTML control; (2) Enter HTML content; (3) HTML is
rendered as-is in page; (4) You can include JavaScript; (5) Custom HTML is
not validated by page designer.
Q: What are CSS Media Queries in Fluid?
A: CSS rules applied conditionally based on screen size or media type:
@media (max-width: 768px) {
.sidebar { display: none; }
}
Q: Can you use SASS or LESS in Fluid?
A: Not natively. Fluid uses standard CSS. However, you can pre-compile SASS/LESS
to CSS and include the compiled CSS in your theme.
Q: What is Dark Mode in Fluid?
A: Some PeopleSoft versions support dark theme (dark background, light text).
Users toggle in Portal Configuration. Pages automatically adapt if themed
properly.
Q: How do you implement Dark Mode support in Fluid?
A: Use CSS variables that change based on prefers-color-scheme:
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000;
--text-color: #fff;
}
}
Q: What are Animations in Fluid?
A: CSS animations for transitions, hover effects, loading spinners. Keep minimal
for accessibility. Common animations: fade-in, slide, rotate, scale.
Q: Should you use heavy animations in Fluid?
A: Minimize. Heavy animations can impact performance, especially on mobile. Use
for: (1) Important visual feedback; (2) Drawing attention to important
changes; (3) Smooth transitions. Avoid for regular interactions.
==========================================================================
SECTION 8: PERFORMANCE OPTIMIZATION
==========================================================================
Q: What are common Fluid performance bottlenecks?
A: (1) Large datasets loaded in grids; (2) Excessive AJAX requests; (3) Heavy
JavaScript computation; (4) Unoptimized images; (5) CSS/JS files not minified;
(6) N+1 query problem; (7) Missing indexes on database queries; (8) Slow
server-side PeopleCode.
Q: How do you optimize Fluid page load time?
A: (1) Minimize initial data fetch (lazy load collections); (2) Minify and
compress CSS/JS; (3) Enable gzip compression; (4) Cache static assets;
(5) Use CDN for external resources; (6) Optimize database queries;
(7) Remove unused controls.
Q: What is Lazy Loading in Fluid?
A: Loading data only when needed. Example: load grid data when user clicks "Show
More" button, not when page initially loads. Reduces initial page load time.
Q: How do you implement Lazy Loading in Fluid?
A: (1) Don't populate collections on OnLoad; (2) Wait for user action (scroll,
click); (3) Fetch data via AJAX; (4) Update collection; (5) Re-render grid.
Q: What is Pagination for Performance?
A: Show data in chunks (e.g., 25 rows per page) instead of loading all rows.
Reduces memory and improves responsiveness. Essential for large datasets.
Q: How do you optimize Large Grids in Fluid?
A: (1) Implement pagination; (2) Lazy load as user scrolls; (3) Show only visible
rows (virtual scrolling); (4) Hide unnecessary columns; (5) Optimize database
query (indexes, select specific columns).
Q: What is Virtual Scrolling?
A: Only rendering visible rows in the viewport. As user scrolls, off-screen rows
are removed and new rows are added. Dramatically improves performance for large
grids (100K+ rows).
Q: Does Fluid support Virtual Scrolling?
A: Native support depends on version. For large grids, implement custom virtual
scrolling or use pagination as practical alternative.
Q: How do you minimize AJAX Requests?
A: (1) Batch requests — combine multiple calls into one; (2) Cache responses;
(3) Avoid unnecessary requests — only fetch on demand; (4) Debounce rapid
requests (autocomplete).
Q: What is Debouncing in context of Fluid?
A: Delaying function execution until user stops interacting. Example: autocomplete
waits 300ms after user stops typing before fetching suggestions. Reduces
request volume.
Q: How do you implement Debouncing in Fluid?
A: In JavaScript:
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
}
Q: How do you optimize Images in Fluid?
A: (1) Use appropriate format (JPEG for photos, PNG for graphics); (2) Compress
images; (3) Use responsive images (srcset); (4) Lazy load images; (5) Consider
WebP format (modern browsers).
Q: What is Caching in Fluid context?
A: Storing data locally to avoid redundant server requests. Types: (1) Browser
cache (HTTP caching); (2) Application-level cache (in-memory); (3) CDN cache
(for static assets).
Q: How do you implement Browser Caching in Fluid?
A: Set HTTP Cache-Control headers:
Cache-Control: max-age=3600 // Cache for 1 hour
PeopleSoft servers send these headers. You can configure cache policies in web
server or PeopleSoft configuration.
Q: What is Application-Level Caching in Fluid?
A: Storing frequently-accessed data in memory (e.g., static reference data).
Reduces database queries. Must invalidate cache when data changes.
Q: How do you implement Application Cache in Fluid PeopleCode?
A: Use LocalStorage or SessionStorage (client-side) or static variables
(server-side). Example:
Static object &ReferenceDataCache;
If &ReferenceDataCache = Null
&ReferenceDataCache = GetReferenceData();
End-If;
Q: What is Database Query Optimization?
A: Writing efficient SQL: (1) Use indexes on filtered columns; (2) Avoid
table scans; (3) Select only needed columns; (4) Use joins instead of
loops; (5) Batch operations.
Q: How do you profile Fluid page performance?
A: (1) Browser DevTools Network tab — view request/response times; (2) Console
timing APIs — measure JavaScript execution; (3) PeopleSoft SQL tracer — view
database queries; (4) Server-side logging — measure PeopleCode execution.
Q: What are DevTools Performance Profiling tools?
A: (1) Network tab — HTTP request waterfall; (2) Performance tab — JavaScript
execution timeline; (3) Lighthouse — automated audit (performance,
accessibility, SEO); (4) Coverage tool — identify unused code.
Q: How do you identify N+1 Query problems in Fluid?
A: Enable SQL tracer. If you see many similar queries (one per row), it's N+1.
Fix by: (1) Fetching related data upfront; (2) Using joins instead of loops.
===================================================
SECTION 9: MOBILE-FIRST EXPERIENCE
===================================================
Q: What is Mobile-First Approach in Fluid?
A: Designing for mobile as primary target, then enhancing for larger screens.
Ensures good experience on constrained devices. Fluid pages are mobile-first by
default.
Q: What is Progressive Enhancement in Fluid?
A: Providing core functionality on all devices, enhanced features on capable
devices. Example: basic form on mobile, advanced features (drag-drop) on
desktop.
Q: How do you optimize Buttons for Touch?
A: (1) Size minimum 44x44px (Apple Human Interface Guidelines); (2) Adequate
spacing (8px margin minimum); (3) Visual feedback (hover/active states);
(4) Clear labels; (5) Avoid double-tap zoom (use viewport meta tag).
Q: What is Touch Target Size?
A: Area user can tap to activate control. Minimum recommended 44x44px for
fingers, larger for elderly/accessibility users. Too-small targets cause
mis-taps.
Q: How do you implement Responsive Forms in Fluid?
A: (1) Single column on mobile (full width fields); (2) Two columns on tablet;
(3) Multi-column on desktop; (4) Full-width inputs on mobile; (5) Hide optional
fields on mobile; (6) Use appropriate input types (email, tel, number).
Q: What is Input Type in HTML?
A: HTML5 input types: text, email, password, number, tel, date, time, URL.
Mobile browsers show appropriate keyboards (email keyboard for email input,
number pad for number input).
Q: How do you test Fluid on actual mobile devices?
A: (1) Connect mobile to development machine; (2) Enter development server URL
directly; (3) Use mobile browser DevTools (if available); (4) Test on actual
networks (4G, 5G), not just WiFi; (5) Test across devices (iOS, Android) and
browsers.
Q: What is Orientation Change in Mobile context?
A: User rotates device between portrait and landscape. Page layout should adapt.
Test both orientations. Some controls (tables) may need special handling in
portrait.
Q: How do you handle Orientation Changes in Fluid?
A: Use CSS media queries for portrait/landscape:
@media (orientation: portrait) { /* portrait styles */ }
@media (orientation: landscape) { /* landscape styles */ }
Q: What are Touch Gestures?
A: Multi-touch interactions: swipe (horizontal/vertical), pinch (zoom in/out),
double-tap (zoom to content), long-press (context menu). Fluid pages can
support gestures via JavaScript libraries.
Q: Should Fluid pages support Swipe gestures?
A: Useful for navigation (swipe left for next page) if intuitive. However, swipe
can conflict with browser back/forward gestures. Use cautiously.
Q: What is Viewport Meta Tag in Fluid?
A: HTML meta tag controlling viewport size and zoom:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Required for responsive design. Tells browser to use device width and disable
user zoom (or allow it).
Q: What is Retina Display consideration in Fluid?
A: High-DPI displays (2x, 3x pixel density). Images must be high-resolution to
avoid blurriness. Use 2x resolution images or SVG (scalable).
Q: How do you provide High-Resolution Images in Fluid?
A: Use srcset attribute:
<img src="image-1x.png" srcset="image-2x.png 2x, image-3x.png 3x" alt="">
Browser selects appropriate resolution.
Q: What is SVG (Scalable Vector Graphics)?
A: Vector-based image format. Scales to any size without quality loss. Useful for
icons, logos, graphics. Can be styled with CSS, animated with JavaScript.
Q: Should you use SVG for Fluid icons?
A: Yes. SVGs are ideal for icons: scalable, small file size, customizable
(colors, sizing) via CSS.
Q: What is Accessibility on Mobile in Fluid?
A: Ensuring mobile users (especially those with disabilities) can use pages.
Considerations: (1) Screen reader compatibility; (2) Keyboard navigation;
(3) Color contrast; (4) Touch target size; (5) Alternative text for images.
===================================================
SECTION 10: SECURITY & AUTHENTICATION
===================================================
Q: What are Security Considerations in Fluid?
A: (1) Authentication — verify user identity; (2) Authorization — verify user
has permission; (3) Data protection — encrypt sensitive data; (4) Input
validation — prevent injection; (5) Session management — prevent hijacking.
Q: How does PeopleSoft Fluid handle Authentication?
A: Fluid inherits PeopleSoft's authentication: (1) Username/password login;
(2) SSO (Single Sign-On) via SAML, OAuth; (3) Multi-factor authentication
(MFA). Authentication happens once; session token is used for subsequent
requests.
Q: What is Session Management in Fluid?
A: After login, server issues session token (cookie or token-based). Fluid sends
token with each AJAX request. Server verifies token, executes request, returns
response.
Q: What is CSRF (Cross-Site Request Forgery)?
A: Attack where attacker tricks user into making unwanted request. Example:
attacker posts link that, when clicked, deletes user's data. Prevention:
CSRF tokens.
Q: How does Fluid prevent CSRF attacks?
A: PeopleSoft includes CSRF tokens in forms. Token is validated on server before
processing requests. Tokens are unique per session and request.
Q: What is XSS (Cross-Site Scripting)?
A: Attack where attacker injects malicious JavaScript into page. Executed in user
browser with user's privileges. Prevention: input validation, output encoding.
Q: How does Fluid prevent XSS attacks?
A: (1) PeopleSoft encodes output (escapes HTML special characters); (2) Validate
input (reject unexpected formats); (3) Use Content Security Policy (CSP)
headers; (4) Avoid innerHTML (use textContent instead).
Q: What is Input Validation in Fluid?
A: Verifying user input matches expected format and range. Prevents: (1) Invalid
data (e.g., text in number field); (2) SQL injection; (3) XSS attacks;
(4) Buffer overflows.
Q: How do you validate input in Fluid?
A: (1) Client-side: JavaScript validation (real-time feedback); (2) Server-side:
PeopleCode validation (security-critical); (3) Always validate server-side,
client-side is UX only.
Q: What is HTTPS in Fluid context?
A: Secure protocol encrypting communication between browser and server. Prevents
eavesdropping and tampering. Fluid pages should always use HTTPS in production.
Q: Should you expose Sensitive Data in Fluid?
A: No. Sensitive data (SSN, credit card, salary) should be masked/hidden unless
user is authorized. Use roles-based visibility.
Q: How do you mask Sensitive Data in Fluid?
A: (1) Show last 4 digits only (SSN, credit card); (2) Use asterisks;
(3) Show redacted version; (4) Implement role-based visibility (show full data
only to authorized users).
Q: What is SQL Injection in Fluid?
A: Attack where attacker injects SQL code into input fields. Example: entering
"'; DROP TABLE users; --" in a name field. Prevention: parameterized queries.
Q: How does Fluid prevent SQL Injection?
A: PeopleSoft uses parameterized SQL (bind variables). Never concatenate user
input into SQL strings.
Q: What is API Security in Fluid?
A: Securing REST APIs called by Fluid pages: (1) Authentication — verify caller;
(2) Authorization — verify caller has permission; (3) Rate limiting — prevent
abuse; (4) Input validation.
Q: How do you secure REST APIs in Fluid?
A: (1) Use HTTPS; (2) Require authentication (OAuth, JWT); (3) Validate input;
(4) Implement rate limiting; (5) Log access; (6) Monitor for abuse.
Q: What is OAuth in Fluid context?
A: OAuth is open standard for authorization. Allows users to log in using external
provider (Google, Microsoft). PeopleSoft Fluid can integrate with OAuth for
SSO.
Q: What is JWT (JSON Web Token)?
A: Compact token format for securely transmitting information. Contains claims
(user ID, permissions, expiration). Used for stateless authentication in APIs.
===================================================
SECTION 11: REAL-WORLD SCENARIOS & PATTERNS
===================================================
Q: How do you build a Master-Detail page in Fluid?
A: (1) Create two sections: Master (list grid), Detail (form); (2) Master grid
shows all orders; (3) Clicking row in grid populates Detail section with order
data; (4) User edits detail fields; (5) Clicking Save updates database.
Q: How do you implement Search Functionality in Fluid?
A: (1) Add search input field; (2) On search button click, fetch matching records;
(3) Populate grid with results; (4) Optionally highlight matching terms in
results.
Q: How do you implement Filtering in Fluid?
A: (1) Add filter controls (dropdowns, date ranges); (2) On filter change, fetch
filtered data; (3) Display filtered results in grid; (4) Show filter summary
(e.g., "2 filters applied").
Q: How do you implement Sorting in Fluid?
A: Configure grid columns as sortable. Users click column header to sort ascending
or descending. Server or client-side depending on data volume.
Q: How do you implement Export to Excel in Fluid?
A: (1) Add Export button; (2) On click, fetch grid data (all rows or visible);
(3) Convert to Excel format (CSV or XLSX); (4) Send to browser as download;
(5) Browser opens download dialog.
Q: How do you implement Bulk Operations in Fluid?
A: (1) Add checkboxes to grid rows; (2) User selects multiple rows; (3) Add
action button (Approve, Delete, Archive); (4) On click, apply action to all
selected rows; (5) Show confirmation dialog.
Q: How do you handle Confirmation Dialogs in Fluid?
A: (1) Add Modal control; (2) On action button click, show modal with message;
(3) Modal has Confirm and Cancel buttons; (4) On Confirm, execute action;
(5) On Cancel, close modal.
Q: How do you implement Multi-Step Workflow in Fluid?
A: (1) Create page with multiple sections (steps); (2) Show one step at a time;
(3) Add Previous/Next buttons; (4) On Next, validate current step and move to
next; (5) On Previous, move back; (6) On Finish, save all data.
Q: How do you implement Tabs in Fluid?
A: (1) Add Tabbed Container; (2) Add multiple tabs (General, Details, History);
(3) Each tab contains controls; (4) Clicking tab shows that tab's content;
(5) Data persists across tab switches.
Q: How do you implement Collapsible Sections in Fluid?
A: (1) Add Accordion control; (2) Add multiple accordion items; (3) Clicking item
header expands/collapses content; (4) Only one item open at a time (or allow
multiple); (5) State persists via Page Bean.
Q: How do you implement Dashboard in Fluid?
A: (1) Create page with grid layout (cards); (2) Add metric cards (key numbers);
(3) Add chart components; (4) Add quick links/buttons; (5) Add recently viewed
items.
Q: How do you implement Charts in Fluid?
A: (1) Use charting library (Chart.js, D3, Highcharts); (2) Fetch data from server
or use Page Bean data; (3) Initialize chart with data; (4) Display chart in
chart container; (5) Charts are responsive.
Q: How do you implement Inline Editing in Fluid?
A: (1) Configure grid columns as editable; (2) User clicks cell to edit; (3) Field
becomes input; (4) User types new value; (5) User presses Enter or clicks away;
(6) Value updates in Page Bean; (7) On Save, persist to database.
Q: How do you implement Drag-Drop in Fluid?
A: (1) Implement using HTML5 Drag-Drop API or jQuery UI; (2) Add draggable
attribute to elements; (3) Add drop zone; (4) On drop, update Page Bean;
(5) Reorder items or move between collections.
Q: How do you implement Notification/Toast Messages in Fluid?
A: (1) Add Notification component; (2) On success/error, trigger notification;
(3) Show message (e.g., "Order saved successfully"); (4) Notification appears
at top/bottom; (5) Auto-dismiss after delay.
Q: How do you implement Wizard in Fluid?
A: (1) Multi-step form; (2) Step 1, 2, 3, etc.; (3) Validate each step; (4) Show
progress indicator; (5) On completion, save all data; (6) Optionally save
partial progress.
Q: How do you implement Favorites/Bookmarks in Fluid?
A: (1) Add star icon to items (orders, employees); (2) On click, toggle favorite
status; (3) Store in database or user preferences; (4) Filter to show only
favorites; (5) Show favorites on dashboard.
Q: How do you implement Comments/Notes in Fluid?
A: (1) Add text area for comments; (2) Display existing comments with timestamps
and authors; (3) Add Comment button; (4) Store comments in database; (5) Support
editing/deleting own comments.
Q: How do you implement Approvals in Fluid?
A: (1) Show transaction in pending state; (2) Display Approve/Deny buttons;
(3) Optionally add comment field; (4) On action, update status; (5) Notify
submitter; (6) Log approval audit trail.
Q: How do you handle Concurrent Updates in Fluid?
A: When multiple users edit same record: (1) Fetch includes version number;
(2) Save includes version check; (3) If version changed, reject update (optimistic
locking); (4) Notify user, show refresh option.
===================================================
SECTION 12: TROUBLESHOOTING & DEBUGGING
===================================================
Q: How do you debug a Fluid page?
A: (1) Use browser DevTools (F12); (2) Set breakpoints in JavaScript; (3) Step
through execution; (4) Inspect Page Bean variables; (5) Check Network tab for
AJAX requests; (6) Check Console for errors.
Q: What does "Component not found" error mean in Fluid?
A: Page references a component or record that doesn't exist. Check spelling,
verify component exists in database, verify user has access.
Q: What does "Data binding error" mean in Fluid?
A: A control is bound to a Page Bean property that doesn't exist or has type
mismatch. Fix by: (1) verifying property name; (2) checking property type;
(3) ensuring property is initialized.
Q: How do you view Network Requests in Fluid?
A: Open browser DevTools, go to Network tab. All HTTP requests (HTML, AJAX,
images, CSS, JavaScript) are listed. View request/response, status code, timing.
Q: How do you debug AJAX errors in Fluid?
A: (1) Check Network tab for failed requests (red status); (2) Click request to
view response; (3) Check Console for JavaScript errors; (4) Server-side
logging; (5) Check PeopleSoft application server logs.
Q: What does "Permission denied" error mean in Fluid?
A: User doesn't have permission to access the component or data. Fix by: (1)
verifying user's security role; (2) granting appropriate permissions; (3)
checking row-level security.
Q: What does "Session expired" error mean in Fluid?
A: User's session has timed out. User must log in again. Fluid may show login
prompt or error message.
Q: How do you handle Session Expiration in Fluid?
A: (1) Configure session timeout; (2) Detect expired sessions (AJAX returns 401);
(3) Show login prompt; (4) On login, continue previous operation or redirect to
home.
Q: How do you test Fluid pages offline?
A: (1) Fluid requires server connection; (2) Cannot fully test offline; (3) Use
mocked API responses (DevTools mock requests) for limited offline testing;
(4) Test with slow network (DevTools throttling).
Q: How do you profile Fluid page memory usage?
A: (1) DevTools Memory tab; (2) Take heap snapshot; (3) Identify large objects;
(4) Check for memory leaks (objects not garbage collected); (5) Fix by removing
references.
Q: How do you find JavaScript errors in Fluid?
A: (1) DevTools Console tab; (2) Errors appear in red; (3) Warnings appear in
yellow; (4) Click error to view source; (5) Use try-catch to catch runtime
errors.
Q: How do you identify Slow AJAX Requests?
A: (1) DevTools Network tab; (2) Sort by Time; (3) Identify requests with long
duration; (4) Check request (what's being requested), response (data size);
(5) Optimize server-side query or reduce data.
Q: How do you test Fluid pages for Accessibility?
A: (1) Use Lighthouse audit; (2) Check for: color contrast, keyboard navigation,
alt text, form labels; (3) Test with screen reader (NVDA, JAWS); (4) Test
keyboard-only navigation.
Q: What does "Uncaught SyntaxError" mean in Fluid?
A: JavaScript code has syntax error (missing bracket, semicolon, etc.). Fix by:
(1) reviewing code; (2) using linter; (3) checking line number in error message.
Q: How do you Debug PeopleCode in a Fluid page?
A: (1) PeopleSoft debugger (if running locally); (2) Log to file (GetFile, WriteString);
(3) Use MessageBox for display (not recommended for production); (4) Check
PeopleSoft application server logs.
Q: How do you test Fluid pages in different Browsers?
A: (1) Test in Chrome, Firefox, Safari, Edge; (2) Use cloud testing services
(BrowserStack, Sauce Labs); (3) Test on real devices; (4) Test different versions
of each browser.
Q: How do you Troubleshoot Responsive Design Issues?
A: (1) DevTools responsive mode; (2) Inspect computed styles; (3) Check media
queries; (4) Test actual devices; (5) Use cross-browser testing services.
==========================================================================
SECTION 13: BEST PRACTICES & MIGRATION STRATEGIES
==========================================================================
Q: What are Fluid Development Best Practices?
A: (1) Design mobile-first; (2) Validate input client and server-side; (3) Use
semantic HTML; (4) Minimize external requests; (5) Optimize images; (6) Keep
JavaScript simple; (7) Test across browsers; (8) Document code; (9) Use version
control; (10) Monitor performance.
Q: How do you structure Fluid Page Code?
A: (1) Separate structure (HTML), style (CSS), logic (JavaScript/PeopleCode);
(2) Use meaningful names; (3) Keep functions small; (4) Comment complex logic;
(5) Remove dead code; (6) Use consistent formatting.
Q: What is Code Review in context of Fluid?
A: Peer review of page design, PeopleCode, JavaScript. Reviewers check: (1) Code
quality; (2) Security; (3) Performance; (4) Compliance with standards; (5)
Testing completeness.
Q: What are Testing Best Practices for Fluid?
A: (1) Unit test PeopleCode logic; (2) Integration test with database; (3)
Functional test user workflows; (4) Performance test with realistic data;
(5) Security test (SQL injection, XSS); (6) Accessibility test; (7) Browser
compatibility test.
Q: What is Migrating from Classic to Fluid?
A: Process of converting Classic pages to Fluid. (1) Audit Classic pages; (2)
Prioritize migration (high-value pages first); (3) Design Fluid equivalent;
(4) Implement Fluid page; (5) Test thoroughly; (6) User acceptance testing;
(7) Train users; (8) Decommission Classic page.
Q: What are challenges in Classic-to-Fluid Migration?
A: (1) Behavior differences (Classic uses scrolls, Fluid uses grids); (2) UX
redesign needed; (3) Training users; (4) Performance tuning; (5) Browser
compatibility; (6) Testing complexity.
Q: How do you plan Fluid Migration Project?
A: (1) Assess current state (Classic pages, usage, complexity); (2) Set objectives
(modernize, improve mobile); (3) Design migration strategy (phase, prioritize);
(4) Build team (developers, designers, testers); (5) Create timeline; (6)
Prepare training; (7) Execute; (8) Monitor.
Q: What is Parallel Running in Migration?
A: Running Classic and Fluid pages simultaneously during transition. Users can
choose. Data must sync. Gradual migration approach. Eventually, deprecate
Classic pages.
Q: How do you handle Data Consistency in Parallel Running?
A: (1) Both Classic and Fluid pages write to same database tables; (2) Use
locking/versioning to prevent concurrent updates; (3) Implement reconciliation
jobs; (4) Communicate to users (write once, read from both).
Q: What are Performance Considerations in Migration?
A: Fluid may be slower than Classic for some operations. (1) Profile both; (2)
Optimize Fluid queries; (3) Cache reference data; (4) Implement lazy loading;
(5) Set realistic expectations; (6) Plan infrastructure upgrade if needed.
Q: How do you Version Fluid Pages?
A: Store pages in version control (Git). Tag releases. This enables: (1) Rolling
back to previous versions; (2) Branching for parallel development; (3) Code
review; (4) Audit trail.
Q: What is Documentation for Fluid Pages?
A: (1) Page purpose and use cases; (2) Data flow (inputs, outputs); (3)
Dependencies (records, CIs); (4) Workflow (step-by-step); (5) Known issues;
(6) Contact for support.
Q: How do you Monitor Fluid Pages in Production?
A: (1) Track page usage (who, when, how often); (2) Monitor performance
(load time, AJAX response time); (3) Capture errors; (4) Monitor server
resources (CPU, memory); (5) Set alerts for anomalies.
Q: What are Fluid Maintenance Best Practices?
A: (1) Regular updates (security patches, bug fixes); (2) Monitor performance;
(3) Optimize slow pages; (4) Refactor technical debt; (5) Retire unused pages;
(6) Keep documentation current.
Q: Should you customize Fluid out-of-box (OOB) pages?
A: Minimize customizations. Customizations make upgrades difficult. When possible:
(1) Use configuration instead of customization; (2) Use extensions instead of
replacing pages; (3) Document customizations; (4) Plan upgrade strategy.
Q: What is Fluid Component reusability?
A: Creating custom Fluid components that are reused across pages. (1) Reduces
code duplication; (2) Improves consistency; (3) Simplifies maintenance.
Q: How do you create Reusable Fluid Components?
A: (1) Identify common patterns (date range filter, search box); (2) Extract into
separate component; (3) Parameterize (allow configuration); (4) Document usage;
(5) Test thoroughly.
Q: What is Fluid Component Library?
A: Collection of reusable components shared across organization. Developers can
use instead of building from scratch. Improves consistency and speed.
===================================================
SQL QUERIES FOR FLUID TROUBLESHOOTING
===================================================
Q: How do you find which pages users are accessing?
A:
SELECT USERID, MENUNAME, BARNAME, ITEMNAME, COUNT(*) as USAGE_COUNT
FROM PSPAGEPERM_LOG (if logging enabled)
WHERE PAGENAME LIKE '%FLUID%'
GROUP BY USERID, MENUNAME, BARNAME, ITEMNAME
ORDER BY USAGE_COUNT DESC;
Q: How do you identify Heavy Fluid Page Users?
A:
SELECT USERID, COUNT(*) as PAGE_VIEWS
FROM PS_LOGIN_AUDIT (if available)
WHERE DTTM_LOG >= TRUNC(SYSDATE) - 7
GROUP BY USERID
HAVING COUNT(*) > 100
ORDER BY PAGE_VIEWS DESC;
Q: How do you check Portal Configuration for Fluid pages?
A:
SELECT PPORTALTAB, PPORTALTABTYPE, PPORTALREGISTRY_NAME
FROM PSPORTALTAB
WHERE PPORTALREGISTRY_NAME LIKE 'FLUID%'
ORDER BY PPORTALTAB;
Q: How do you find all Fluid Pages in system?
A:
SELECT PAGENAME, PAGETYPE, FIELDNAME, RECNAME
FROM PSPAGEFIELD
WHERE PAGETYPE = 'F' (Fluid)
GROUP BY PAGENAME
ORDER BY PAGENAME;
==========================================================================
QUICK REFERENCE: COMMON FLUID TASKS
==========================================================================
Task: Add new Field to Fluid Page
Process: (1) Open page in designer; (2) Add field to appropriate record;
(3) Insert control in page; (4) Bind to Page Bean property; (5) Set control
properties (label, required, visible); (6) Test.
Task: Create Master-Detail Page
Process: (1) Create two-section page; (2) Add grid in master section;
(3) Add form controls in detail section; (4) On grid row select, populate detail;
(5) On save, update database.
Task: Implement Search Filter
Process: (1) Add search input + Filter button; (2) On click, execute search
PeopleCode; (3) Fetch matching records; (4) Populate grid; (5) Show "X results"
message.
Task: Export Grid to Excel
Process: (1) Add Export button; (2) On click, fetch all grid data; (3) Convert to
XLSX format; (4) Send to browser as download.
Task: Add Keyboard Shortcuts
Process: (1) In page JavaScript, listen for keyboard events; (2) Check key
combination (Ctrl+S, Alt+Enter); (3) Trigger appropriate action; (4) Return false
to prevent default browser action.
Task: Implement Real-Time Search (Autosuggest)
Process: (1) Add input with autosuggest; (2) On input change, debounce; (3) Fetch
matching options; (4) Display suggestions; (5) On selection, populate field.
===================================================
END OF DOCUMENT
===================================================
TOTAL CONTENT:
- 13 Major Sections
- 200+ In-Depth Q&As
- Real-world examples and code snippets
- SQL query patterns for troubleshooting
- Best practices and migration strategies
- Mobile optimization techniques
- Performance tuning guidance
- Security considerations
- Testing and debugging approaches
This guide serves as comprehensive interview preparation, on-the-job reference,
and architectural guidance for PeopleSoft Fluid development and implementation.
===================================================
