How Do I Work with the Component Operation Panel?

Introducing the Component Operation Panel, designed for developers seeking efficiency in component management.This feature streamlines workflows, enabling users to Rename, Move, Delete and Add components seamlessly. Say goodbye to fragmented processes and hello to a more cohesive and intuitive component management experience.

• Start exploring the available options for your components.
• The Component Pane provides a gear icon, allowing you to access the Component Operations Panel.

• In the Component Operations Panel, you can easily search for XPA programs using the search bar.
• This allows you to quickly locate specific programs and streamline your workflow.

• In Angular, a component acts as a vital building block that manages a distinct section of the user interface.
• Each component consists of an HTML template, a TypeScript class, and optional styling.
• In Magic xpa, the closest equivalent to an Angular component is a form or task, which combines a visual element with its corresponding logic.
• SmartUX and xpa are closely intertwined; when you change a form name in xpa, the same component name must be updated accordingly.
• To streamline this process and eliminate the need for manual adjustments, you can utilize this feature.

• To begin, launch the Magic xpa Studio.Next, locate the program where you would like to modify the Form Name.
• In this example, we will be updating the Form Name for the Welcome Program.

• What happens if a user renames the form to “MyWelcome” in XPA?
• Since the Angular component is tied to the XPA form name, it is essential to update the component name and its corresponding file names accordingly.
• Moreover, you must ensure that all relevant bindings in the component’s TypeScript files are modified to reflect this change.
• To simplify this process and reduce manual effort, you can leverage the Component Operation Panel.
• This feature is designed to automate many of these tasks, making it easier to manage changes efficiently.
• Once you’ve made the necessary adjustments, save the changes to the XPA program and then switch to SmartUX Studio.

• To begin, click the Refresh button.
• You will notice that the Welcome component name is highlighted in red, indicating that its corresponding XPA program cannot be found.
• In the XPA program, you will see that the Welcome component has been renamed to MyWelcome.
• Next to the Welcome component, there is a button available for renaming it.

• Click the Rename button to open a pop-up window where you can update the component’s name.
• Enter your desired name, ensuring it matches the Form Name provided in XPA for consistency.
• Once you’ve made your changes, click the Save button to confirm.

• Take a moment to revisit the Components pane options.
• You’ll notice that the Component name has been updated to MyWelcome, along with its associated files and TypeScript bindings.

• What occurs when a user relocates an XPA program from one folder to another?
• Given that the Angular component and Module are directly linked to the XPA program folder, it is crucial to update both the component Module and its associated file names accordingly.
• Additionally, you must adjust all relevant bindings within the component’s TypeScript files to align with this change.
• To streamline this process and minimize manual effort, you can utilize the Component Operation Panel.
• This feature is specifically designed to automate many of these tasks, simplifying the management of changes and enhancing efficiency.

• You have successfully changed the folder from MainWC to MyFolder.
• To streamline your workflow, switch to SmartUX Studio and take advantage of the Component Operations Panel, which helps you avoid manual adjustments.

• To get started, click the Refresh button.
• You’ll see that the MyWelcome component name is highlighted in red, signaling that its associated XPA program folder is missing.
• Within the XPA program, you’ll notice that the MyWelcome component has been relocated to MyFolder.
• Adjacent to the MyWelcome component, there’s a button that allows you to easily move the component from one folder to another.

• To update the component’s folder, click the ‘Move’ button.
• This action will open a pop-up window where you can select a new folder.
• Ensure that your chosen folder aligns with the selected folder in XPA for consistency.
• After making your selections, don’t forget to click the ‘Save’ button to confirm your changes.

• After saving your changes, you’ll notice that the component has been relocated to ‘MyFolder’ within the Component Operations Panel under the Angular Component section.
• Next, click the ‘Done’ button to confirm that all your actions have been saved and finalized.

• Navigate back to the Components Pane.
• Expand the modules, and you will notice that the MyWelcome component has been relocated to MyFolder.

• What should you do if you want to delete an Angular component?
• In the past, removing an Angular component required you to manually delete all associated files and ensure that any bindings related to that component were fully removed to prevent potential errors.
• Now, you can streamline this process! In the Component Operations Panel, simply locate the Delete button next to the Angular Component you wish to remove.

• Upon completing the delete operation, you will find that the component and all its associated bindings have been successfully removed from the project.
• Additionally, the deleted component will now appear in the XPA Programs section, highlighted in red, indicating that it is available for re-adding.

• What if a user wants to add a component?
• To simplify this process and reduce manual effort, you can make use of the Component Operation Panel.
• This panel allows users to seamlessly add a new component.
• You will notice an ‘Add’ button located next to any XPA program that is not yet listed in the Angular component section.
• For instance, if MyComponent is not currently displayed on your screen, it will feature the ‘Add’ button, indicating that you can easily include it.

• Clicking the ‘Add’ button will launch the ‘Add Program’ window for the Component Template.Here, you can either select your preferred component template or opt for a blank template.
• Once you’ve made your selection, click the ‘Finish’ button to successfully add the component.

• You can now find the newly added component in the Angular Component section.
• To save your changes and exit the Panel, simply click the ‘Done’ button.

By mastering the Component Operation Panel, users will enhance their productivity, gain better control over component organization, and enjoy a smoother workflow. This feature not only simplifies tasks but also empowers users to focus on creating innovative solutions without unnecessary distractions.