5 Things about Page Composer Developer Registration (Part 1)

Page Composer is currently used by Fluid Approvals for rendering AWE Workflow transactions in Fluid.  Using Page Composer you can change the Fluid Approval pages - adding or removing fields, change field layout and style for any device form factor.  What makes Page Composer so powerful is the underlying data structures defined in "Developer Registration"- found in Enterprise Components > Page Composer > Developer Registration.

1) There are 3 "moving parts" to Fluid Approvals

a) AWE Process Definition - This is not new and has always existed since AWE first appeared.  This means if you have an AWE definition and you want to surface your approval transaction in Fluid then you're already part way there.
b) Developer Registration - (Enterprise Components > Page Composer Administration)- This is a developer tool used to define compositions.  A composition describes what transaction data/fields to make available to your Page Composer when you come to define (or compose) your Fluid Approval page.
c) Page Composer - (Enterprise Components > Page Composer) - This a developer/functional tool used to build a Fluid Approval page using fields defined in the Composition.

2) Page Composer is used to define a Fluid page for Approvals. This is known as a Composition.  All Fluid Approval pages use the same component and page definitions - namely COMPONENT.EOAWMA_MAIN_FL along with it's main pages PAGE.EOAWMA_MAIN_FL, PAGE.EOAWMA_TXNHDTL_FL and PAGE.EOAWMA_TXNLDTL_FL.  I strongly advise not to meddle with these definitions as they are very complex, tightly bound to existing Compositions and also liable to change through PUM Updates as new features are added and the inevitable defects are fixed. Think of this component as a template used in a mail merge.  The template has a fixed set of "sections" in which there are a fixed set of "field placeholders" of various types which are available if you need them.
The template COMPONENT.EOAWMA_MAIN_FL has 3 main pages

• Main (Summary). This is what you see when you click the Approval tile .  Approval transactions, shown on the right, are actually rendered using a sub-page PAGE.EOAWMA_RSLT_SBF (main page is PAGE.EOAWMA_MAIN_FL).
• Header Detail. This is the page you see if you click one of the approval transactions. (PAGE.EOAWMA_TXNHDTL_FL)
• Line Detail. (PAGE.EOAWMA_TXNLDTL_FL)

To keep this blog post digestible I'm just going to describe some characteristics of the Main Summary page.  Lookout for a blog post on the "wonders" of the Header Detail page in the very near future.

• The EOAWMA_RSLT_SBF has 2 sections that are available (technically there are 3 but the third is a special case used for handling the Mas Approval function).
• If the Section bound to a HTML field on the Page (see Page Registration Section Definitions below) then Page Composer allows you to drag and drop fields into the section.  You can also define the number of columns that will displayed which can help with field and field label alignment.

3) The Developer Registration tool is used to create a Registration that is based on this template.   Each Registration is bound to an AWE Process Definition. In fact the Registration name must be the same as the AWE Process Definition.  The Registration is also associated with a Component (think of this as the template) Actually, there's only Approvals available at the moment so you have to specify COMPONENT.EOAWMA_MAIN_FL here.  PeopleSoft Enterprise Components team have other Registration Types available here (namely Email HTML Page, Email Rich Text Email and Stand-Alone HTML Area) but to-date only one example of a Component Type , Approvals, has been delivered.

4) Each defined Registration has a set of Sections for each form factor (X-Large, Medium, Small, etc).  Each row in the Registration is a Section for a particular Form Factor.  Each Section has the following attributes:

• one or more Application Source Records.  These records provide the transaction data that will become available to the Page Composer tool when building an Approval page.

  

  Application Source Records

• Page Reserved Field.  This is the method used to reference specific HTML, Link and Button fields on the physical page.  Each Section is bound to one and only one field (referenced by Object Name) on the page.  Finding the correct Page Reserved Field can be a bit tricky. There's a little bit of trial and error and copying other delivered Registrations required but suffice to say that if you try and define a Section on a Page and use the wrong Page Reserved Field the Registration component will throw an error at save time.  

  

  Page Reserved Field binds Section to Physical Page

• Composition Key Fields.  These are used to bind your section to the underlying AWE Xref Record.  

  

  Composition Key Fields

CLICK TO VIEW - Relationships between Page Composer, Registration and Approval Summary

5) How to add a field to the Approval Main (Summary) Page using Page Composer
I'm going to tackle some more involved use cases in future blogs such as adding new fields into Registrations, adding hyperlinks into Header Detail sections and adding custom business logic (PeopleCode) to events in the Approval Pages.

However, for now I'll just walk through a simple Page Composer change to add a new field to the summary row of the AddressChange Composition.

1) Open Page Composer (Enterprise Components > Page Composer)
2) Enter Definition = Approvals and Search
3) Select AddressChange Composition
4) Under the Pages TAB select Approval Summary to show the Main Summary sections (this should be the default view).
5) Under the ToolBox TAB select Fluid Approval View (AAV) Record to show all available fields.  AAV is just an alias for the Record specified when you create the Registration.
6) Find the AAV:Empl Id field and drag and drop the field from the left pane to the Address Change Approval Summary Section.
7) Save the Composition
8) Open the Approvals tile to view the resulting change.
9) The video below demonstrates this and adds a 2 column option for controlling layout.