Skip to content

Application structure

Application structure is a set of directories and files that define the application. The structure is based on the JetQuery platform and is used to create, deploy, and manage applications.

Getting Started

  • All components should be stored in the /components folder.
  • All pages should be located in the /pages folder.
  • In the /pages folder, plain HTML files can also be placed.
  • Customization of routes is possible, referring to the section on creating routes.
  • Files with disallowed extensions will result in a 404 error. Allowed extensions include ".css", ".html", ".js", ".pdf", ".json", ".ico", ".woff", ".woff2", ".ttf", ".otf", ".jpg", ".png", ".svg", ".webp", ".gif".
  • Files in /pages and /components must have unique names.
  • Component should be named with a v_ prefix, for example, v_test_component.js.

Path Conventions

The general structure of API paths is as follows:

/api/{{area}}/{{module}}/{{action}}

  • {{area}} - Represents the core, srs, erp, crm, etc.
  • {{module}} - Represents the specific module such as account, system, apps, connections, storage ,files etc.
  • {{action}} - Represents the action to be performed, such as browse, delete, update, create, etc.

Optional query parameters

  • app_name= optional application context, with the default being the current user.
  • ptoken= optional API TOKEN
  • pscope= optional parameter for the parent scope (used in SRS).
  • paanda=recovery optional recovery mode all application ui is disabled and only recovery ui is shown.
  • paanda=bundle optional debug mode all application ui is disabled and only debug ui is shown.
  • pmode=true optional hide top menu/navigation component

Application directory Structure

  • /api/* - internal api
  • /assets/* - Includes CSS, JS, fonts, and other assets not managed by the system
    • /assets/images - images
    • /assets/css - css
    • /assets/js - js
  • /db - Database files scripts for data and business objects
  • /css - CSS files managed by the system for compression, bundling, and automations.
  • /js - JavaScript files managed by the system for compression, bundling, and automations.
    • /js/!body - JavaScript files to be included in the body of the HTML file
    • /js/!head - JavaScript files to be included in the head of the HTML file
    • /js/* - all other files
  • /components - Vue components managed by the system for compression, bundling, and automations. Registered by name, directory structure is ignored, component name must be unique
  • /pages - User interface pages
  • /templates - Templates
  • /srs - API definitions
    • /global.xml - global definition, all other files are inherited from this file

Note

Files in /css /js /components /pages directories are processed by the server and minified. Name must be unique across each directory and subdirectory.

Note

Files in /js directory are not processed by the server and are served as is.

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>

  <head>
    ...
    @css_init
    @paanda_head
  </head>

  <body>
    <script>
      window.apiurl = '@apiurl';
      window.version = '@variables.settings.system.version';
    </script>
    @paanda_body
  </body>

</html>

Special files you my find in the root directory

  • list.txt, data.zip - autogenerated temporary files
  • /.vscode/settings.json - Visual Studio Code configuration file required for local development
  • .gitignore - git ignore file
  • index.html - autogenerated file for local development