Posted By Shahid Malla

Guide Modify Modulegurden Module Design - Shahid Malla - WHMCS Expert Freelancer

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
  1. Identify Namespace via DevTools.
  2. Create Folders:
   modules/servers/ProxmoxCloudVps/app/UI/Vms/Templates/pages
  1. Create vmsDataTable.tpl:
  • Copy content from:
    modules/servers/ProxmoxCloudVps/templates/client/default/ui/core/default/widget/dataTable/dataTable.tpl
  1. Create Vue Component Files:
  • Create vmsDataTable_components.tpl and copy from dataTable_components.tpl.
  • Create vmsDataTable_components.js and copy from dataTable.js.
  1. Modify Component Name in VmsDataTable.php:
   protected $name = 'mg-vmsdatatable';
  1. 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!

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x