Copy Screens and Screen Components

In Lowgile, it is possible to copy entire screens within the same application or between applications. Selected screen components can also be copied from one screen to another, allowing layouts and UI patterns to be reused without rebuilding them from scratch.

The two methods use different copy-and-paste workflows. Use the section that matches the content being reused.

1. Copying an entire screen

Use this method to create a complete copy of an existing screen within the same application or in another application.

💡

Insight

Screens are stored as JSON definitions, which can be copied and imported into another application.

1.1. Before you begin

Identify:

• The screen to copy,
• The destination application, and
• The name to use for the copied screen.

If the destination application already contains a screen with the same name, decide whether to rename the copied screen or replace the existing screen.

1.2. What is copied

The copied screen retains its definition, including:

• Layout structure,
• Component hierarchy,
• Properties and configuration,
• Variables and bindings, and
• Event handlers.

📌

Attention

After copying a screen, review its component references, variables, bindings, expressions, and actions. Unresolved references may appear blank in Lowgile Studio. See Copied Screen References Are Not Updated for more information.

1.3. Copy the screen

1. Go to Design → Screens.
2. Select the screen by single-clicking it to highlight its name.

📌

Attention

Copy the screen directly from the screen list. Do not open the screen editor before copying.

3. Copy the screen using either:

   • Ctrl + C (Windows), or
   • Cmd + C (macOS).

1.4. Import the screen

1. Stay in the same application or navigate to the target application.

2. Go to Design → Screens.

3. Import the copied screen using either:

   • Ctrl + V (Windows), or
   • Cmd + V (macOS).

4. Lowgile automatically opens the Import Screen from clipboard dialog.

Figure 1:

Import Screen Dialog

5. Choose how to import the screen:

   • Keep the same name if no screen with that name exists.
   • Keep the same name to overwrite an existing screen.
   • Rename the copied screen to create a new screen.

6. Click Import to finish.

1.5. Review and validate the screen configuration

1. Review and update any relevant:

   • Entity references,
   • Variables and bindings,
   • Layout references,
   • Include screen references,
   • Actions, and
   • Layout or component names.

2. Confirm that references intended to point to the copied screen no longer point to the original screen.

3. Save your changes before continuing.

4. Build and test the screen in the destination application.

If validation, build, or runtime errors occur, see Debugging Your Lowgile App.

2. Copying selected screen components

Use this method to duplicate selected components within the same screen or from one screen to another, for example, when reusing a form section, toolbar, or table layout as a starting point.

Use an Include screen instead when the same screen content needs to be reused multiple times.

2.1. Before you begin

Identify:

• The components to copy,
• The target screen, and
• Where the copied components should appear in the target screen.

2.2. What is copied

Copied components retain their configuration, including:

• Component hierarchy,
• Properties and configuration,
• Variables and bindings, and
• Event handlers.

Any references contained in that configuration are copied as they are. They may therefore still point to variables, objects, or components from the source screen and should be reviewed after pasting.

2.3. Copy the components

1. Open the source screen.
2. Select the components to copy.
3. Right-click the selection.
4. Select Copy.

2.4. Paste the components into the target screen

1. Open the screen where the copied components should be pasted.

2. Select:

   • The component that should appear immediately before the copied components, or
   • The container that should contain the copied components.

3. Right-click the selected component or container.

4. Select:

   • Paste after to paste the copied components below the selected component.
   • Paste inside to paste the copied components inside the selected container or layout.

✅

Tip

Use Paste after when the copied components should become siblings of the selected component. Use Paste inside when they should become children of a container, layout, or wrapper component.

2.5. Review and validate the copied components

1. After pasting the components, confirm that:

   • They appear inside the intended container.
   • They appear in the correct order.
   • Their bindings reference the intended screen variables.
   • Their actions reference the intended application objects.
   • Any references copied from the source screen have been updated where necessary.

2. Save your changes before continuing.

3. Build and test the screen to confirm that the pasted components behave as expected.

If validation, build, or runtime errors occur, see Debugging Your Lowgile App.

Related documentation

• Screens Reference