The Web Screen Editor is where you design web screens. It is divided into the following areas:

Toolbox

The Toolbox contains the widgets you can use to develop your screens. Learn more about widgets.

Design and Preview Buttons

The following buttons allow you to switch between design and preview modes:

Button

Description

Show All Hidden Widgets

While designing web screens branches of If and Web Block widgets are hidden to have a better perception of how the design works in different cases. The Show All Hidden Widgets button forces to show all hidden branches of those widgets.

Preview

Shows how the web screen may look like at runtime.

Form Factor buttons for a Web Application

Smartphone (320px)

The web screen is rendered for a standard size of a smartphone.

The size in pixels is the screen width. The height is not considered because the normal functioning is to scroll down to see the content.

Tablet Portrait (768px)

The web screen is rendered for a standard size of a tablet in portrait mode.

The size in pixels is the screen width. The height is not considered because the normal functioning is to scroll down to see the content.

Desktop (1024px)

The web screen is rendered for a standard size of a desktop, which is also the tablet in landscape mode.

The size in pixels is the screen width. The height is not considered because the normal functioning is to scroll down to see the content.

Form Factor buttons for a Mobile Web Application

Landscape/Portrait Mode

Switches between landscape and portrait modes.

When no Form Factor is selected, the web screen is rendered for the size of the canvas.

Formatting Toolbar

Allows you to format text and align widgets.

Widget Toolbar

This area contains different tools depending on the widget that is selected:

Breadcrumbs

Presents the location of the web screen in the module. Click on the listed elements to open them on the canvas and highlight them in the eSpace Tree.

While navigating using Breadcrumbs, they maintain the same elements. This enables you to easily switch between parent and child levels back and forth, without losing the context.

Widget Tree

Presents a tree view of all web screen widgets. Learn more about widgets.

Widget Selector

Presents the ancestors and children of the currently selected widget, in order to facilitate selecting them. Learn more about how to select widgets on your screen.

See Also

About Web Screens | Create Web Screens | Apply Web Styles