You have been redirected from an outdated version of the article. Below is the content available on this topic. To view the old article click here.

Preview Area

The preview area in the center of the Pages section shows a preview of the currently active page. When hovering over DOM elements the corresponding element is highlighted in the Pages Tree View.

Preview Area

Search results for "Preview Area"

Preview Area

The preview area shows the rendered HTML content of the selected page. Hovering over an element in the rendered page highlights the corresponding element in the Page Tree, and vice-versa. The preview allows inline editing of text content when clicking on the text, which is why the preview area shows the string --- empty --- for empty elements.

Clicking on an inactive tab selects the corresponding page, so that the content of that page shows up in the preview area. Clicking on an active tab allows you to change the name of the page, while hovering over a tab shows two additional icons. The View button (Eye icon button) opens the corresponding page in a new browser tab, and the Settings button (Wrench button) opens a configuration dialog for the page preview.

Edit Preview Settings Dialog

The Edit Preview Settings dialog allows you to configure the URL used to render the current page in the preview area. You can for example provide the UUID of a details object, or configure request parameters that are then used in the rendering process of the preview.