Show page

The Show page task allows you to navigate to another page, or open it as a Dialog or Popover, directly from an event flow. This is useful when you want to link workflows, pass data between pages, or handle modal dialogs with responses (similar to Windows Forms’ ShowDialog behavior).

Purpose

• Navigate between pages.
• Open a page as a Dialog (modal) or Popover.
• Pass parameters into the opened page.
• Capture responses from the opened page when it closes.

Anatomy

1. Step name
   • Label for the task, used for identification in the flow.
   • Example: Show page.
2. Scope name
   • Internal reference name used in bindings and code.
   • Allows you to read data returned from the opened page.
   • Example: page1 → accessible as {{ page1.data.fieldName }}.
3. Show as
   • Choose how the target page will be displayed:
     • Page → full navigation to another page.
     • Dialog → open as a modal dialog window.
     • Popover → open as a smaller popover overlay.
4. Select page
   • Dropdown to pick the page you want to show.
   • Example: Address Entry.
5. Page params
   • Parameters to pass into the opened page.
   • These values can be used inside the page as: {{ pageParams.yourField }}
   • Example: Sending Id to an edit page → {{ pageParams.Id }}.
6. Close response type
   • Defines what type of response the opened page returns when it closes.
   • Options: Ok, Cancel, Yes, No.
   • Allows conditional branching in the event flow depending on how the user closed the page.
   • Works like Windows Forms’ DialogResult.
7. Title suffix / prefix
   • Additional customization for dialog/popup titles.
   • Example: “Edit Customer – [Name]”.

How It Works

1. The current event flow executes the Show page task.
2. The selected page is opened in the chosen mode (Page, Dialog, or Popover).
3. If Page params are defined, they are passed into the target page and accessed with {{ pageParams.paramName }}.
4. When the target page closes, the Close response type determines what happens next in the event flow.
5. You can use the Scope name to read values returned from the page.

Example 1: Navigate to Another Page

• Event: Button click → Show page (CustomerDetails)
• Pass parameter: Id = Table1.selectedRow.Id
• Inside target page: {{ pageParams.Id }}

Example 2: Open as Dialog with Response Handling

• Show page → Mode: Dialog → Page: Address Entry
• Pass param: Id = Form1.Id
• Close response type:
  • If Ok → Run query updateAddress
  • If Cancel → Show notification “Action cancelled”

Example 3: Open as Popover

• Show page → Mode: Popover → Page: QuickActions
• Page shows as a small overlay near the trigger.
• Useful for contextual menus or quick forms.

Accessing Data via Scope Name

If you assigned Scope name = page1, and the target page sets data, you can access it like:

{{ page1.data.customerName }}
{{ page1.data.address }}

This is useful when you want the opened page to return structured data back to the calling page.

Property Reference

Property	Applies To	Description	Example
Step name	All	Label for the task in the Event Designer flow. Helps identify the step easily.	Show Customer Page
Scope name	All	Internal reference name for the opened page. Allows you to access returned data via {{ scopeName.data.fieldName }}.	page1 → {{ page1.data.customerName }}
Show as	All	Defines how the page is displayed: • Page → full navigation • Dialog → modal window • Popover → overlay near trigger	Selected: Dialog
Select page	All	The target page you want to show.	Address Entry
Page params	All	Key-value pairs passed to the opened page. Accessible via {{ pageParams.fieldName }} inside the page.	Id = Table1.selectedRow.Id
Close response type	Dialog, Popover	Defines how the task handles page closure. Options: Ok, Cancel, Yes, No. Branching can be applied (e.g., “if response ok” vs “if response not ok”). Works like Windows Forms’ DialogResult.	if response ok → run save query
Title suffix	Dialog	Optional text added at the end of the dialog title. Useful for dynamic labels.	" - Edit Mode"
Title prefix	Dialog	Optional text added at the start of the dialog title.	"Customer - "
Width / Height	Dialog, Popover	Set the dialog or popover size in pixels. If blank, adapts to content.	Width: 600, Height: 400
Placement	Popover	Position of the popover relative to the trigger element. Options: top, bottom, left, right.	bottom
Backdrop	Popover	Toggle overlay background. • Enabled → dims background behind popover. • Disabled → popover floats without blocking background.	Enabled → modal-style effect

Best Practices

• Use Page params for passing IDs and context (like opening an Edit form).
• Dialogs → Best for confirm/approval flows.
• Popovers → Best for inline contextual actions.
• Scope names → Use descriptive names (customerDialog, addressPopover) to make bindings clear.
• Always handle Close response type so users get feedback when they cancel or confirm actions.

FAQ

Q: How do I pass multiple values into a page?
A: Use Page params with multiple fields, e.g., Id, Name, Type. Inside target page: {{ pageParams.Id }}, {{ pageParams.Name }}.

Q: What’s the difference between Scope name and Page params?

• Page params → values you send into the page when opening it.
• Scope name → how you access values/data returned from the opened page.

Q: How does Close response type work?

• If a dialog closes with Ok, the “if response ok” branch executes.
• If it closes with Cancel, the “if response not ok” branch executes.
• Similar to Windows Forms’ DialogResult.

👉 In summary: Show page is a versatile navigation and dialog management task in Zeroplat. It lets you open pages as full views, modals, or popovers, pass parameters between them, and handle user responses cleanly in your event flows.