Browser Preview

Browser Preview runs a workspace application in its own tab inside the Unqork platform, using the application's assigned style and runtime. Creators use Browser Preview to test an application as an Express role or a real end-user. They can also try URL query parameters and mark up the rendered page for the UnqorkAI agent. For testing in a full browser tab with the preview bar, use Express View.

Opening Browser Preview

The Browser Preview control is the (globe) at the far left of the tab bar. The control displays only when the workspace contains at least one application with an entry-point module.

To open Browser Preview, complete the following:

1. At the far left of the tab bar, select (Browser Preview).
2. From the menu, select an application. Browser Preview opens at the application's entry-point module.

While a preview is running, the globe control displays the application name and splits into two parts:

What Browser Preview Renders

In a versioned application, Browser Preview renders the branch, version, or commit currently selected in the checkout pill. Switching branches or versions in a Module Builder tab reloads the preview on the new selection. A module opened from a published version or a historic commit is read-only. To make changes, switch to a branch. For details, see Versioning Troubleshooting. Opening a historic commit from Branch History renders that commit until the selection returns to a branch or version. For more about branches and versions, see Application Versioning.

If the entry-point module has no components, or redirects when it loads, Browser Preview opens another module from the application instead. When no module in the application has components, the canvas displays Nothing to preview just yet. When a Creator selects an empty module from the module menu, the canvas displays the module name followed by is empty.

Browser Preview Toolbar

The toolbar displays at the top of the preview. The following table lists its controls from left to right.

Builder Mode and Live Mode

Browser Preview runs in one of two modes. Creators switch between modes using the session button at the right of the toolbar.

In live mode, Preview as Role is hidden and the URL bar is read-only. Back, Forward, and Mark Up Preview are unavailable.

Data entered in Browser Preview, in builder mode or live mode, is saved as real submission data in the environment. Use test accounts or clearly labeled test data to avoid affecting reports, workflows, or other downstream processes.

Session Controls

The session controls at the right of the toolbar display a login status and one button. In builder mode, the status displays Logged in as followed by the Creator's name. In live mode, the status displays the end-user's name, or Not logged in when the preview has no logged-in end-user.

The button changes with the preview state:

The canvas displays Loading preview... during each switch.

Logging In as an End-User

To test the application as a specific end-user, complete the following:

1. In the toolbar, select Log In as Another User. Browser Preview logs out any earlier end-user session and displays the application's login screen.
2. Log in with the end-user's credentials. Browser Preview returns to the module that was in the preview, and the session controls display the end-user's name.

To return to builder mode, complete the following:

1. In the toolbar, select Log Out.
2. Select Return to Your IDE Session.

If the application has a custom logout module, Log Out displays that module instead of the login screen. The end-user's name can take a few seconds to update in the session controls after a login or logout. To create or manage end-user accounts, see Express User Administration.

Signing In with SSO

When an application uses SSO (Single Sign-On), the identity provider's sign-in page can't load inside the preview. Live mode displays a Sign in to continue card instead.

To sign in with SSO, complete the following:

1. On the card, select Sign In in a New Tab. The identity provider's sign-in page opens in a new browser tab.
2. Complete sign-in in the new tab. Browser Preview detects the new session, closes the sign-in tab when the browser permits it, and reloads the application.

If sign-in doesn't finish in about two minutes, the card prompts the Creator to close the other tab and try again.

Enabling Live Mode for an Environment

Live mode requires the environment's Frame Ancestors List to include the Unqork platform address. Builder mode works without this setting.

When the address is missing, live mode displays Live preview isn’t enabled for this environment with the exact address to add. An environment administrator adds the address in Environment Administration, in the Frame Ancestors List setting. For details, see Express Content Security Policy (CSP). After the change is saved, select Reload Preview to check again.

Testing Roles and Query Parameters

In builder mode, Creators can change how the application loads without editing it. Browser Preview always uses the application's assigned style and runtime.

Previewing as an Express Role

To preview the application as an Express role, complete the following:

1. In the toolbar, select Preview as Role.
2. Select an Express role. Browser Preview reloads the application with that role's permissions applied, and the control's tooltip displays the selected role name.

Until a Creator selects a role, Browser Preview uses the Creator's own access. In Production environments, only Creators with the Administrator Creator Role can preview as an Express role. Creators whose Express role still has the deprecated Designer Access (Super-user) option can also do so. For other Creators, the application loads with their own access. To create and manage roles, see Express Role Administration.

Adding Query Parameters

To add query parameters to the preview, complete the following:

1. In the URL bar, select Add Query Param.
2. Enter the query string, for example status=open.
3. Press Enter. Browser Preview reloads the module with the parameters added to its route.

To remove the parameters, select Remove query param in the field, or press Escape.

Query parameters always apply to the module the preview opened at, even after navigating to another page in the application. In live mode, the URL bar is read-only and query parameters don't apply.

Marking Up the Preview

Creators can draw on the rendered application and send the result to the UnqorkAI agent as an image.

To mark up the preview, complete the following:

1. In the toolbar, select Mark Up Preview. The application pauses, and the markup controls display at the top center of the preview.
2. Draw on the preview using Draw or Box Select.
3. Select Send to Agent. Browser Preview captures the visible preview with the markup, attaches the image to the agent chat message, and closes markup mode.
4. In the agent chat, describe the change, then send the message.

To exit markup mode without sending, select Mark Up Preview again.

The markup controls include the following:

Mark Up Preview is available in builder mode only, and requires the AI features of UnqorkAI to be turned on for the organization.

If the capture fails, the markup stays in place so the Creator can try Send to Agent again.

Agent Context from Browser Preview

While Browser Preview is the active tab, the agent chat receives the previewed application and the module currently in the preview as context. The context badge in the agent chat displays the application name after the Previewing label. When the preview moves off the entry-point module, the badge adds the module name. The badge updates when the Creator navigates in the preview or selects another module from Go to Another Module.

The badge clears when the Creator switches to another tab or selects Close Browser Preview. For more about working with the agent, see UnqorkAI Build Agent.

Links That Leave the Application

Browser Preview keeps most navigation inside the preview. The following table describes how links that leave the current page behave.