VSCode UI Editor

Manuals

Manuals

Read the manuals linked to your installs and account.

Properties Guide

Properties Guide

Overview

This guide explains how to work with the Properties tab in the VSCode UI designer.

The Properties tab is where you refine the selected widget after placing it on the design canvas. It gives you a structured way to change layout, appearance, text, interaction, and other widget-specific settings without editing the underlying OpenEdge ABL code by hand.

Before You Start

To work with properties:

  • open a supported OpenEdge ABL UI file in the designer
  • select a widget on the design canvas
  • open the right-side panel
  • make sure the Properties tab is active rather than the Events tab

The property editor always works on the currently selected widget.

Selecting a Widget

Before changing any property, first select the widget you want to edit.

You can do this by:

  • clicking the widget directly on the design canvas
  • selecting a frame or container before editing nested layout-related settings
  • confirming the selection from the widget label shown in the right-side panel

Once a widget is selected, the Properties panel updates to show the settings that apply to that specific object.

Finding a Property

The property panel includes a filter field near the top.

Use this when you:

  • already know the name of the property you want to change
  • want to narrow a long list of settings quickly
  • want to confirm whether a selected widget supports a specific property

This is usually the fastest way to find a single setting in a large property list.

How Property Groups Work

Properties are organized into collapsible sections.

This helps you:

  • focus on one kind of setting at a time
  • hide groups that are not relevant to the current change
  • avoid scanning the entire panel for every edit

Typical groups include:

  • Advanced
  • Appearance
  • Custom Lists
  • Data
  • Frame Options
  • Interaction
  • Layout
  • Menus
  • Text & Labels

Not every widget will show every group. The available groups depend on the selected object type.

Appearance Properties

The Appearance group is typically used for the visual look of a widget.

This group may include settings related to:

  • colors
  • fonts
  • visibility-related presentation settings
  • stylistic options that affect how the widget is rendered

Use this group when you want to change how a control looks without changing its role in the layout.

Layout Properties

The Layout group is typically where size and position changes belong.

Use this group when you want to:

  • move a widget
  • resize a widget
  • adjust layout unit related behavior
  • fine-tune how the widget fits inside a frame or container

This is one of the most commonly used property groups because it controls how the UI is arranged on the design surface.

Text and Label Properties

The Text & Labels group is used for visible text shown to the user.

Use this group when you want to change:

  • captions
  • labels
  • displayed text
  • user-facing wording attached to the selected widget

This is usually the right place for common edits such as renaming a button label or changing text shown in the interface.

Interaction Properties

The Interaction group controls how the widget behaves during user interaction.

This group may include settings related to:

  • enabled or disabled behavior
  • focus-related behavior
  • input-related configuration
  • other interaction-specific rules supported by the selected widget

Use this group when the behavior of the control matters more than its visual styling.

Data Properties

The Data group is used for widgets that have a data-oriented role.

Use this group when you want to work with:

  • field-related settings
  • data binding related values when supported
  • properties that affect how the widget connects to data in the UI model

This group is especially relevant for controls that represent or display business data rather than only static content.

Frame Options and Container Settings

When the selected widget is a frame or container, you may see Frame Options and related container-specific settings.

Use these settings when you want to:

  • configure the frame itself rather than a child widget
  • adjust frame behavior or presentation
  • tune container-level layout behavior

If you are editing the structure of a form, this is often the first place to check after selecting the frame.

Some widgets expose Menus or Custom Lists groups.

Use these groups when you need to work with:

  • menu-related configuration
  • list-driven options
  • widget-specific collections or structured values

These groups are more specialized and may only appear for certain widget types.

Advanced Properties

The Advanced group is for settings that are useful but less common in basic editing scenarios.

Use this group carefully when you need to:

  • fine-tune widget behavior beyond standard visual editing
  • set less frequently used OpenEdge-related properties
  • adjust details that are important for generated output or runtime behavior

If you are unsure about a setting, make small changes and validate the result after saving.

Common Editing Examples

Typical property changes include:

  • Change button text
    • select the button
    • open Text & Labels
    • update the visible caption or label value
  • Move a frame
    • select the frame on the canvas
    • open Layout
    • adjust the relevant size or position values
  • Resize a control
    • select the widget
    • open Layout
    • update width, height, or related sizing properties
  • Change visual styling
    • select the widget
    • open Appearance
    • update the relevant presentation settings

Good Working Habits

When editing properties, it helps to:

  • change one thing at a time when testing unfamiliar settings
  • confirm that the correct widget is selected before editing
  • use the filter field instead of scrolling through all groups
  • save and validate your result after meaningful changes
  • pay extra attention when editing frame-level properties because they can affect multiple child widgets

These habits make it easier to understand which change produced which result.

What to Verify After Changing Properties

After changing properties, it is useful to verify:

  • the widget still looks correct on the canvas
  • the layout still makes sense relative to nearby controls
  • the selected values match the intended behavior
  • the generated or written-back ABL result still reflects the intended UI change

This is especially important for layout, frame, and advanced property edits.