Component properties

The component pane consists of two stacked panes: the UI object pane and the properties pane.

In the App Designer object properties, you can edit component objectss you have selected in the Application tree. The UI object pane shows basic properties, such as name, description or paths to connected resources. To change the name of a component, double-click the component name in the UI object pane. The change to the component name displays automatically in the Application tree.

When you (re)name a component object, ensure that the name does not contain special characters, reserved keywords, or starts with a number. Refer to the following table for non-permitted special characters and standalone reserved keywords:

Non-permitted component object name types Description

Non-permitted component object name types	Description
Special characters	`=` `/` `{` `}` `+` `\|` `&` `,` `#` `@` `*`
Reserved keywords	`break`, `case`, `catch`, `class`, `const`, `continue`, `debugger`, `default`, `delete`, `do`, `else`, `enum`, `export`, `extends`, `false`, `finally`, `for`, `function`, `if`, `import`, `in`, `instanceof`, `let`, `new`, `null`, `return`, `super`, `switch`, `this`, `throw`, `true`, `try`, `typeof`, `var`, `void`, `while`, `with`

Special characters

= / { } + | & , # @ *

Reserved keywords

break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for, function, if, import, in, instanceof, let, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with

In the properties pane, you define the component in detail. All supported component properties according to your corresponding UI5 version are displayed dynamically in the properties pane. Select from predefined values, enter new values, bind data from resources, or add scripts to events.

In edit mode, you can toggle the Disable Object/Enable Object icon to enable or disable a selected object. Disabled objects are hidden during app runtime but can still be edited. Disabled objects display in red in the Application tree. You can also use the right-click function Disable/Enable on a component object in the Application tree.

Fields of properties of components that deviate from default settings in the properties pane are highlighted for visual recognition.

When selecting values, default values contain a highlighted bar to differentiate from other possible values for property fields.

You can access relevant information and documentation about the component by selecting the  icon next to its title.

Component settings

The setting will give you the following options to enable or disable:

Enable Property Mini Apps: This feature allows certain properties of a component to be displayed in a more user-friendly format for improved readability.
Show Deprecated Properties/Values: You can change the UI5 version of your application in the Properties tab of the side navigation option Settings in the App Designer. Consequently, certain components may lack support for specific values or properties. Deprecated values and properties are hidden from display by default. If you select Show Deprecated Properties/Values, these deprecated attributes and properties are displayed and highlighted for visual recognition in the component properties pane.

Attribute actions

Use attribute actions to modify your application according to attribute types.

 (Show Binding): For attributes of type Properties, select  (Show Binding) to bind a binding property to a property attribute.
 (Show Script): For attributes of type Events and Formatter, select  (Show Script) for the event script or formatter script, choose between JavaScript and TypeScript to set the format type, and to open the preview pane of the corresponding component element. The event or formatter is automatically added within a generated Events or Formatter folder in the application tree.

Right-click property option menus

If the right-click menu does not display, you must allow clipboard read access in your browser settings.

UI object pane

By right-clicking the edited values in Name, Description, Model Source, and Model Path, you open a menu with the following options:

Copy: Copies the attribute value to the clipboard (also available in display mode)
Cut: Removes the attribute value and copies it to the clipboard
Paste: Pastes copied text from the clipboard into the input field

Properties pane

By right-clicking the edited values of a component property in the properties pane, you open a menu with the following options:

Copy: Copies the attribute value of the component property from the input field to the clipboard. You cannot copy property values for component properties of type Event.
Cut: Removes the attribute value of the component property from the input field and copies it to the clipboard.
Paste: Pastes copied text from the clipboard into the input field for the attribute value of the component property
Convert to TypeScript/Convert to JavaScript: For component properties of type Event, you can convert individual properties from JavaScript to TypeScript or vice versa, depending on your use case.
Copy: If the property has a value, you can copy this value. You cannot copy property values for components properties of type Event.
Reset: You can reset component properties of type Attributes, Properties, Formatter, or Events to their default values.
Set as component default/Clear component default:: Sets the attribute value in the input field as the default attribute value for the component property