Article How do I preview UI changes in the community?

As you edit pages, theme options, or widgets or if you're reviewing upgraded user interface components, Telligent Community provides a preview capability to see changes in the live community before publishing them for all visitors.

Previewing Changes

When editing a page or editing a theme option, you can choose to preview the changes via the Preview button. This will stage the changes you made for you to review using the preview mode. Generally, preview mode is enabled immediately when previewing page and theme changes.

When editing a widget, edits are staged automatically as you make changes. These changes will immediately be available for previewing, but Widget Studio doesn't automatically enable preview mode.

Enable Preview Mode

To enable preview mode, go to Manage > Manage Site Theme (or Group Theme or Blog Theme) > Preview Staged Changes. If you have any staged changes, you can enable previewing by clicking Enable Previewing at the top of the Preview Staged Changes panel.

When preview mode is enabled, all browsers, tabs, and devices that you're signed in on will enter preview mode. As you preview additional changes, all other browsers, tabs, and devices will refresh to show the updated preview. If you open a new browser or log into a new device, you'll need to enter preview mode manually using the steps mentioned above.

Note that when making page or theme option changes, preview mode is immediately enabled when you click Preview if its not already enabled. 

When preview mode is enabled, you'll see the pulsing preview icon in the upper left corder of the window, under the manage icon:

You can click the preview icon at any time to return to the Preview Staged Changes panel.

Disabling Preview Mode

To disable preview mode, click the preview icon to open the Preview Staged Changes panel (or go to Manage > Manage Theme > Preview Staged Changes) and click the Disable Previewing button.

Reviewing Staged Changes

The Preview Staged Changes panel (which can be opened by clicking the preview icon if preview mode is enabled) lists all staged changes by the type of the change:

As you navigate around the community while logged in as yourself on varying devices, you're viewing the community with your staged changes (your staged changes are only visible to you, however). 

Reviewing by Type

Depending on the number and types of changes, the list of types of changes will differ. For each type of change, you can choose to Approve or Deny the change (to reset that designation, click Flag as unreviewed).

When reviewing by type, there is not a recommendation for where to view the change, as you're working at a high level. If you need suggestions, see the Reviewing each Change section below.

Reviewing each Change

By clicking the change count identifier next to each type of change, the specific changes of each type will be listed:

Most individual changes include a View link that will navigate you to a URL that contains the change for review (some changes, like theme-wide changes, may not have a View link because the entire theme is affected) and an Edit link that will take you to the UI used to edit that specific item. You can review each change utilizing the sample view and edit links while returning to the Preview Staged Changes panel to select Approve or Deny for each change.

Regardless of the method by which you review and approve/deny changes, it is strongly recommended that you review all of the changes and make a decision to approve or deny them prior to committing changes. Once you're ready, click Commit Reviewed Items to publish the approved changes and delete the denied changes. Any changes that are left unreviewed will remain in the staged changes list for later review.

If all changes are committed, preview mode will be disabled automatically.