1. Fluid Development: Sink, Swim, or Dog Paddle
Regional Conference Series 2017

2. Agenda Introduction – Getting in the Pool
How Many Laps?? Components of a Fluid Solution
Fluid’s Cement Flippers and How to Kick Them Off
In the Rhythm – A Finished Fluid Application
Fastest Way Through the Fluid – Config-Based GT eForms (or, Just Get In the Boat)

3. Introduction – Getting in the Pool

4. Gideon Taylor Consulting
Gideon Taylor, headquartered in Pleasant Grove, Utah, is a PeopleSoft custom solutions provider for business, education, and government organizations.
Our MISSION is to revolutionize business processes through innovative automation strategies, integration and custom development expertise, and electronic forms technology.
Our VISION is to help our clients work simply, effectively, efficiently, and flexibly.
Founded in 2001 by Paul Taylor,
Original creator of GT eForms™ and ePAF™

5. A Classic GT eForm
Classic eForm Demonstration

6. How Many Laps?? Components of a Fluid Solution

7. Components of a Fluid Solution
Navigation
Search
Pages
Styling
Fields
Grids
Subpages
Secondary Pages
Fluid Approvals

8. Fluid Navigation: Steps
Create/Publish a Fluid Homepage
Create new tiles
Add Tile to Homepage

9. Fluid Navigation: Nav Collection Tile
A tile based on a navigation collection loads the items in the navigation collection to a side bar

10. Search Default generated search page in Fluid is not functional.
Options:
Pivot Grid Real-Time Search
Keyword Search (Elasticsearch)
Custom Search Page
Custom Pivot Grid Search Page

11. Search: Pivot Grid
Add Search Record to Component

12. Search: Pivot Grid
2. Setup Pivot Grid Reporting Tools > Pivot Grid > Pivot Grid Wizard 3. Modify Generated Query (optional)

13. Search: Pivot Grid: HCM Example
Documentation: 8.55 Fluid User Interface Developer's Guide PeopleTools 8.55: Pivot Grid Example Delivered Pivot Grid: TRW_ADM_STMT_FL URL to see example: …/psp/ps/EMPLOYEE/HRMS/c/EC_TRW_ADMIN_FL.TRW_ADM_STMT_ FL.GBL

14. Search: Pivot Grid: HCM Example

15. Fluid’s Cement Flippers and How to Kick Them Off

16. Search: Pivot Grid: Tips
Search record must have at least 3 fields
One field for each of the two axes
One field that is not a prompt/search field
Search record keys become prompts in the generated query and search fields on pivot grid search page. Alternate keys aren’t prompt/search fields by default.
Requires mastery of pivot grid configuration options and understanding mapping between pivot grid and search page behavior (See Appendix for Pivot Grid Setup)

17. Search: Custom Search Page
Search Component
Main Component
Search Component
Custom Search Page
Search Criteria Fields
Grid for Search Results
Link to Main Component with keys in URL
Main Component

18. Pages: Styling Start with Page Templates Delivered Style Classes
PeopleSoft_Fluid_UI_CSS_Guide_v01
New/Override Style Classes
AddStyleSheet(StyleSheet.G3FORM_CSS_FL);

19. Pages: Styling: Groupbox Types
Container
Custom Action Menu
Accordion *
Popup
Layout Only
Custom Header Search
Panel Control
Page Tab
Custom Header *
Master/Detail Target
Page Title
Search Action
Related Field Group
Related Content
Toggle Container
Custom Grid Header

20. Pages: Styling: Tips
Set Default ViewPort, to render pages on a mobile device correctly: Local PT_PAGE_UTILS:Utils &oPageUtils = create PT_PAGE_UTILS:Utils(); &oPageUtils.SetDefaultViewport(); It basically sets the viewport meta tag in the DOM, which instructs the browser on how to display the page: AddMetaTag("viewport", "width=device-width,user-scalable=yes,initial- scale=1.0,minimum-scale=1.0");

21. Pages: Styling: Tips
Find examples of delivered style classes using this query: SELECT A.PNLNAME, A.PNLFLDID, A.LBLTEXT, A.RECNAME, A.FIELDNAME, B.FFSTYLELONG FROM PSPNLFIELD A, PSPNLFIELDEXT B WHERE A.PNLFLDID = B.PNLFLDID AND A.PNLNAME = B.PNLNAME AND B.FFSTYLELONG LIKE '%ps_accordion%' ORDER BY FIELDNUM;

22. Pages: Styling: Tips
Be careful with copying and pasting style names.

23. Pages: Styling: Tips
Use the “Layout Only” feature to visualize DOM

24. Pages: Styling: Related Display Fields
Classic
Fluid, also need to add styles

25. Pages: Subpages
Subpages are critical because of the extensive use of groupboxes in Fluid:

26. Pages: Subpages: Rules
Layout groupbox around subpage on page it’s used on
8.55 Fluid User Interface Developer's Guide.pdf has this “Subpages must be enclosed in a group box of the type layout.”
You actually have to have a layout-only groupbox around everything INSIDE and another groupbox OUTSIDE the subpage on the parent page. Otherwise anything that follows that subpage will be a child of any groupboxes in that subpage or it throws elements from the subpage into groupboxes later in the page DOM.
Often the “size” of the subpage and elements in App Designer does matter. If your subpage element doesn’t take up as much space on the main page layout as it does when you open the subpage layout, many times the DOM elements will not get “nested” the way you would expect/intend. It is not always true, but if you are having issues with your DOM not getting built the way you want it seems to make a big difference. Note, this seems to only apply to the size of the layouts in App designer, if for example you have an HTML element that is drawn very small in App designer, but is filled with “tons of stuff” when the page displays, you only need to account for the size of the element in the App designer layout and not what will eventually render.

27. Pages: Subpages: Rules
Layout groupbox around content inside a subpage
8.55 Fluid User Interface Developer's Guide.pdf has this “Subpages must be enclosed in a group box of the type layout.”
You actually have to have a layout-only groupbox around everything INSIDE and another groupbox OUTSIDE the subpage on the parent page. Otherwise anything that follows that subpage will be a child of any groupboxes in that subpage or it throws elements from the subpage into groupboxes later in the page DOM.
Often the “size” of the subpage and elements in App Designer does matter. If your subpage element doesn’t take up as much space on the main page layout as it does when you open the subpage layout, many times the DOM elements will not get “nested” the way you would expect/intend. It is not always true, but if you are having issues with your DOM not getting built the way you want it seems to make a big difference. Note, this seems to only apply to the size of the layouts in App designer, if for example you have an HTML element that is drawn very small in App designer, but is filled with “tons of stuff” when the page displays, you only need to account for the size of the element in the App designer layout and not what will eventually render.

28. Pages: Subpages: Rules
If elements aren’t nested in the DOM (outside the groupbox divs) as you would expect, set the subpage “use” size to match the subpage size in App Designer
Note: You can change the subpage “use” size if the page is set as a fluid page. In classic you can’t resize the “use” size.
8.55 Fluid User Interface Developer's Guide.pdf has this “Subpages must be enclosed in a group box of the type layout.”
You actually have to have a layout-only groupbox around everything INSIDE and another groupbox OUTSIDE the subpage on the parent page. Otherwise anything that follows that subpage will be a child of any groupboxes in that subpage or it throws elements from the subpage into groupboxes later in the page DOM.
Often the “size” of the subpage and elements in App Designer does matter. If your subpage element doesn’t take up as much space on the main page layout as it does when you open the subpage layout, many times the DOM elements will not get “nested” the way you would expect/intend. It is not always true, but if you are having issues with your DOM not getting built the way you want it seems to make a big difference. Note, this seems to only apply to the size of the layouts in App designer, if for example you have an HTML element that is drawn very small in App designer, but is filled with “tons of stuff” when the page displays, you only need to account for the size of the element in the App designer layout and not what will eventually render.

29. Pages: Secondary Pages
DoModalPopup – new function for Fluid. DoModal won’t work correctly.
If %Request.BrowserDeviceFormFactor = %FormFactor_Small Then
&sModalOptions =
Else
&sModalOptions = fullscreen;";
End-If;
If DoModalPopup(&sModalOptions, "", False, False, Page.G3AWE_MONITOR_SCF, " ", - 1, - 1) = 1 Then

30. Pages: Grids: Grid Types

31. Pages: Grid Types
List Grid
Flex Grid

32. Pages: Grids: Stacking
Grid stacking, layout groupbox between each “stack”
Stack just the first two columns:
Layout Groupbox
Field 1
Field 2
Field 3
Field 4
The label of the groupbox element becomes the stack’s label
You may want to include field labels for stacked fields in Page Field Properties:

33. Pages: Grids: Stacking

34. Grouplets
“A grouplet is a special type of group box with the properties set so that it will display information from a URL within that group box or transfer to a URL when the group box is selected”
Example: Tiles, both display content and transfer
Use PeopleCode to set URL the groupbox/grouplet should display or transfer to:
WithPeopleCode.html?pli=ul_d41e70_tflu
“A grouplet is the encapsulation of content from one source (for example, a component, an iScript, or external content) that is presented within the context of another fluid application page. Tiles, embedded related content, and related information are all examples of grouplets.”
Consumer = the page where the grouplet is used
Producer = the page being displayed in grouplet

35. Master/Detail Framework
The Master - Detail framework provides an approach for providing access to pages spanning multiple components, aggregating the navigation to the various pages all within a single master - detail component. Similar to a dash board, WorkCenter, or an activity guide, the pages accessible from within the master - detail framework are intended for a particular role, providing quick access to the components and pages used most frequently. Typically, the components and pages accessed from within the master - detail framework are not necessarily presented sequentially, as in there is no implied procedure or sequence for accessing the pages.
The components and pages accessed from within a master - detail component represent a set of work comprised of components, pages, processes, and so on, typically accessed by a business user. Without the use of the master – detail, end users would navigate to these components and pages separately as needed.

36. Master/Detail Uses Grouplets
Create a navigation page with a grid. Use PeopleCode to populate the grid and set the groupbox/grouplets in each row to transfer to specified urls – classic or fluid
Create a content reference with parameters that includes information about your grouplet
A grouplet in the content page displays the target component when users click on grouplets in your side page
How-to Documentation:
Fluid_Programming_Fundamentals_Red_Paper_May_2016

37. Fluid Approvals

38. Fluid Approvals

39. Fluid Approvals

40. Fluid Approvals Register AWE Definition/Process:
Enterprise Components > Approvals > Approvals > Mobile Approval Options > [Transactions tab]
Enable Page Composer for AWE Definition/Process:
Enterprise Components > Approvals > Page Composer Administrator > Developer Administration
Configure Approval page using Page Composer
Enterprise Components > Approvals > Page Composer > Page Composer

41. Fluid Tips
Find examples of Fluid PeopleCode use by using this query: SELECT * FROM PSPCMTXT WHERE PCTEXT LIKE '%DoModalPopup%';

42. Fluid Tips
Review delivered Fluid solutions by navigating to: PeopleTools > Portal > Structure and Content: Fluid Structure Content > Fluid Pages

43. In the Rhythm – A Finished Fluid Application
Fluid Solution Demonstration

44. Link to Custom Fluid eForm
See how the PeopleSoft Fluid User Interface enables a form created with GT eForms™ to display dynamically on any device:

45. Config-Based GT eForms (or, Just Get In the Boat)
Fluid Configuration eForm Demonstration

46. Questions?

47. Everybody, Out of the Pool!!

48. Contact Information
Paul Taylor
President / CEO
Offc:
Scott Antin
VP Business Development
Offc:
Cell:

49. Appendix
Pivot Grid Search Setup
Fluid Approvals Setup

50. Pivot Grid Search Setup

51. Pivot Grid Setup

58. Fluid Approvals Setup

59. Mobile Approval Options
Enterprise Components > Approvals > Approvals > Mobile Approval Options > [Transactions tab]

60. Mobile Approval Options

61. Mobile Approval Options

62. Mobile Approval Options

63. Mobile Approval Options

64. Mobile Approval Options
Enterprise Components > Approvals > Page Composer Administrator > Developer Administration

65. Developer Registration
Enterprise Components > Approvals > Page Composer Administrator > Developer Administration

66. General Setup

67. Reserved Field Setup

68. Section Label Setup

69. Source Record and Field Event Setup

70. Page Composer
Enterprise Components > Approvals > Page Composer > Page Composer

71. Page Composer Setup