Guide Modify Modulegurden Module Design

Simplified Step-by-Step Guide

1. Locate the File to Modify

• Go to modules/servers/ProxmoxCloudVps/app/UI/.
• Navigate to the folder that matches your element’s category, type, and name. For example, if you are modifying VmsDataTable, the path is:
  modules/servers/ProxmoxCloudVps/app/UI/Vms/Pages/VmsDataTable.php

1. Identify the Namespace

• Open your browser’s DevTools (F12).
• Go to the Network tab.
• Find the request related to the element you want to modify.
• Look for the “Namespace” parameter in that request to confirm the correct file.

1. Create the Templates Folder

• Go back to the category folder (e.g., Vms).
• Create a folder named Templates inside it.
• Inside Templates, create another folder with the same name as the element type, starting with a lowercase letter. For example:
  modules/servers/ProxmoxCloudVps/app/UI/Vms/Templates/pages

1. Create the Template File

• In the pages folder, create a file named {element_name}.tpl with a lowercase letter. For VmsDataTable, it will be:
  vmsDataTable.tpl
• Copy contents from an existing template file:
  • Open the original template file (e.g., VmsDataTable.tpl).
  • Find the line with extends.
  • Copy the content from the relevant template file it extends from, like:
    modules/servers/ProxmoxCloudVps/templates/client/default/ui/core/default/widget/dataTable/dataTable.tpl
  • Paste it into your new file (vmsDataTable.tpl).

1. Create Additional Files for Vue Components

• If your new .tpl file contains a Vue component tag:
  • Create {element_name}_components.tpl, e.g.:
    vmsDataTable_components.tpl
  • Copy content from the corresponding _components.tpl file.
  • Create {element_name}_components.js, e.g.:
    vmsDataTable_components.js
  • Copy content from the corresponding .js file.

1. Modify the Component Name

• In the original PHP file (e.g., VmsDataTable.php), add a line to set a custom name:
  mg-{lowercase_element_name}
  Example:
  php protected $name = 'mg-vmsdatatable';

1. Edit the Component Files

• In {element_name}_components.tpl, update the tag name:
  html <script type="text/x-template" id="t-mg-vmsdatatable">
• In {element_name}_components.js, update the component name in two places to match.

Example

For VmsDataTable:

1. Locate:

   modules/servers/ProxmoxCloudVps/app/UI/Vms/Pages/VmsDataTable.php

2. Identify Namespace via DevTools.
3. Create Folders:

   modules/servers/ProxmoxCloudVps/app/UI/Vms/Templates/pages

4. Create vmsDataTable.tpl:

• Copy content from:
  modules/servers/ProxmoxCloudVps/templates/client/default/ui/core/default/widget/dataTable/dataTable.tpl

4. Create Vue Component Files:

• Create vmsDataTable_components.tpl and copy from dataTable_components.tpl.
• Create vmsDataTable_components.js and copy from dataTable.js.

4. Modify Component Name in VmsDataTable.php:

   protected $name = 'mg-vmsdatatable';

7. Edit Component Files:

• Update ID in vmsDataTable_components.tpl:
  html <script type="text/x-template" id="t-mg-vmsdatatable">
• Update component name in vmsDataTable_components.js.

Now you can edit the HTML and JS as needed. If you need more help with any specific step, just let me know!