Application tree
The application tree is a pane that displays the components you use from the component library when creating your application. The used components are displayed hierarchically, and you can further edit them.
You can expand and collapse components in the tree to navigate the structure of your application and drag and drop components to change their place within the structure. When selecting a component in the application tree, you can see its properties in the properties pane.
The application tree always shows the current state of your application. To see how that version looks like to the user, start a preview in the preview pane or in a new tab.
Components from the Component library can be dropped in these parent elements:
-
HTML5 Document
-
Resources
-
Files
| You can undo the last change by selecting the button. |
Settings gear icon
In the application tree, you can select the settings gear icon to modify the following options, if required:
- Enable Aggregation-based Object Placement
-
This involves organizing related objects into separate aggregations, enabling efficient management and manipulation based on object type, improving code structure and performance.
- Show event/formatter scripts
-
Select the checkbox to show or hide event and formatter scripts in the application tree.
- Lower Case Object Names
-
When enabled, the first letter of a component object that you drag-and-drop from the Component library to the Application tree displays lowercase. The setting applies per user.
Right-click functions
In the application tree, you can right-click on the components and perform actions.
| You can select multiple items by holding down the Shift key and selecting your desired components. |
- Add
-
With Add you can insert components from the component library.
- Copy
-
Copy opens the following submenu options:
- Copy Objects
-
Copies the highlighted component objects.
- Copy to File
-
Downloads a
.planet9copyfile of the highlighted component. - Copy Properties
-
Copies the properties of the highlighted component objects.
- Paste
-
Paste opens the following submenu options:
- Paste Objects
-
Pastes the highlighted component objects.
- Paste from File
-
Uploads a
.planet9copyfile to the selected component. This allows you to import components with files. - Paste Properties
-
Applies previously copied properties to the selected component. Only empty properties are updated; existing values remain unchanged. If no applicable properties are available to paste, the option does not display.
- Duplicate
-
Duplicates the selected components while keeping the bindings and all attributes.
- Expand
-
If the component has child nodes, you can select Expand to view all child nodes of the component.
- Collapse
-
Select Collapse to hide child nodes of the component after expanding.
- Disable/Enable
-
Disables the selected component and all child nodes of the component
- Search
-
Opens the search pane that is prefiltered based on the selected search object
- Add to Worklist/Remove from Worklist
-
Frequently used components can be added to the worklist, allowing quick access to a specific component without navigating through the folder structure.
- Rename Objects
-
Opens the Rename Objects tab to rename one or more component objects according to specific renaming rules, for example, adding a prefix/suffix to a component object name, or removing trailing numbers from a component object name.
When you rename a parent component, the change is applied to all of its child nodes. - Delete
-
Deletes the component.
- Convert to TypeScript/Convert to JavaScript
-
For JavaScript or TypeScript scripts, for example, for event scripts, you can convert the script from JavaScript to TypeScript or vice versa, depending on your use case.
- Where-Used
-
For the resource component data model
MultiModel, select Where-Used to open the MultiModel Where-Used dialog. For JavaScript and TypeScript scripts, you can go directly to the line number of the source code in the Preview pane to view the script usage. For other resource components in the dialog, select components to go directly to component placement in the application tree. To filter for relevant scripts or component names, use the incremental search in the dialog. - Naia suggestions
-
Naia makes suggestions for further actions to perform based on the selected component. Select the suggestion to open Naia and perform the suggested action in Naia.