User's guide /

Development

OBS2GO is an ERP platform which allows the customization of virtually every component of the user's interface. It allows the user to implement business logic, to create customized reports, to change the appearance of the user's interface, to create database triggers.

JavaScript

Custom JavaScript code can be executed after some of the following ERP interfaces are loaded:

Edit Document
View Document
SQL Reports
Data Listing
Main Screen
Employee Profile

The JavaScript code is stored in the module "Onload JS Execution" available in the "Administration" menu. Using this feature, you can modify the web interface, change data sources of dropdown menus, call APIs, and more.

Custom Layout and Formatting

Single-column layout instead of two-column layout

Context: "Edit Document" and "View Document":

document.querySelectorAll(".column_layout").forEach(function(el) {
    el.style.gridTemplateColumns = "98%";
});

Custom Table Formatting of an SQL View or SQL Function

Context: "SQL Report":

$("table.report tr:nth-child(odd)").css("background-color", "#f1fbff");
$("table.report tr:nth-child(even)").css("background-color", "#e1f8ff");
$("table.report tr td").css("border-right", "2px solid #ffffff");
$("table.report tr td").css("border-bottom", "2px solid #ffffff");

Change Data Source of a Live Search Box

Context: "Edit Document":

function change_ds_of_dropdown() {
    let livesearch_input = document.querySelector("input[data-col='parent_id']");
    livesearch_input.dataset.data_source = "v$expenses_limitations__all";
}
change_ds_of_dropdown();

Group Fields in a Fill-in Form

Context: "Edit Document" & "View Document":

group_fields_in_form(["first_name", "middle_name", "last_name"], "#7dffb14a", "fas fa-user", "User", true);

Note: The fields must be subsequent in the form. The parameters are:

1. List of fields
2. Background color of the group
3. Icon class (optional)
4. Name of the group (optional)
5. Single-column layout (optional, default is false)

Dependent Live Search Boxes

Example 1: Bank Accounts by Company

let companies = document.querySelector('input[name="our_companies"]');
companies.addEventListener("change", function(ev) {
    let bank_accounts = document.querySelector('input[data-col="bank_account_id"]');
    bank_accounts.dataset.limit_col = "our_company_id";
    bank_accounts.dataset.limit_val = this.value;
});

Example 2: Contacts by Company

let companies = document.querySelector('input[name="company_id"]');
companies.addEventListener("change", function(ev) {
    let contacts = document.querySelector('input[data-col="contact_id"]');
    contacts.dataset.limit_col = "company_id";
    contacts.dataset.limit_val = this.value;
});

Note: To limit the scope of the code only within the loaded HTML contents, use global_context instead of documentFor example: global_context[0].querySelector('input[name="company_id"]');

SQL Views

OBS2GO uses PostgreSQL as its database, and custom SQL views can be created and used for reporting purposes or within the user's interface. The "SQL Views" module allows you to manage these custom views.

PlPgSQL

OBS2GO also supports custom PlPgSQL code, which can be executed using the "SQL Functions" module.

< Prev Next >