ProcFu Help
Search
⏱️

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:

  1. Before Process event
  1. Screen renders with Header, Footer, and wireframe placeholder for body
  1. Data is collected
  1. Before Render event
  1. Wireframe placeholder replaced with content
  1. On Render JavaScript event

Additionally, for summary / table screens when a row is selected:

  1. On Select JavaScript event

Additionally for detail / item screens when Submit / Save is clicked:

  1. Validate required fields
  1. On Submit Validation event
  1. if errors STOP
  1. Save item
  1. After Submit event

(c) 2024 ProcFu for Podio - by Globi | Join the Discussion in our Podio Workspace.