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.

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 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, etc..

• Single-column layout instead of two-columns layout:
  Context: "Edit Document" and "Read 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 the data source of a live search box:
  Context: "Edit Document":
  

  function change_ds_of_dropdown() {
     // Replace parent_id with the actual field name
     let livesearch_input = document.querySelector("input[data-col='parent_id']");
  
     // Replace v$expenses_limitations__all with your custom data source. It should be a SQL View located in module "SQL Views".
     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", single_column);

  Note: the fields must be subsequent in the fill-in form
  Parameters:
  1. List, containing the fields;
  2. Background color of the group. If "default" is set, it will use the color of your theme;
  3. Icon class (optional) - selection here https://fontawesome.com/icons; 
  4. Name of the group (optional);
  5. Single column layout - will span full row width (optional). Default is false. Boolean.
  
  

• Dependant livesearch boxes:
  Example #1:
  Listing only the bank accounts related to the selected company instead of all bank accounts:
  

  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:
  Listing only the contacts related to a company instead of all contacts:

  let companies = document.querySelector('input[name="company_id"]');
  companies.addEventListener("change", function(ev) {
      let contacts = document.querySelector('input[data-col="contact_id"]');
      // column "company_id" must be present in the data source. In this case, the data source is v$contacts.
      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 "document". For example: global_context[0].querySelector('input[name="company_id"]');