HTML DOM & Code Event Order
Advanced HTML Order
Each rendered page includes the headers and footers from the advanced settings in order:
<body>
HTML Header (full HTML)
<div class="pfui">
Page Wrapper (full HTML)
<div class="pf-app-header">
App Header (Logged In / Logged Out) (Markdown)
</div>
<div class="pfscreen"> ← Start App Screen
<div class="pfm-header">
Screen Header (Markdown)
</div>
<div>
Screen Content
</div>
<div class="pfm-footer">
Screen Footer (Markdown)
</div>
</div><!--pfscreen--> ← End App Screen
</div><!--pfui-->
HTML Footer (full HTML)
</body>
Code Event Order
All screens have multiple code events.
Refer to the placeholder comments in each event to see which variables are available to that event.
When Rendering a screen, the event order is as follows:
Before Processevent
- Screen renders with Header, Footer, and wireframe placeholder for body
- Data is collected
Before Renderevent
- Wireframe placeholder replaced with content
On RenderJavaScript event
Additionally, for summary / table screens when a row is selected:
On SelectJavaScript event
Additionally for detail / item screens when Submit / Save is clicked:
- Validate required fields
On Submit Validationevent
- if errors STOP
- Save item
After Submitevent