Documentation

To start work baseJS there are some easy steps. These are divided into HTML, JS and CSS code. We improved the performance of JS by using the HTML attributes instead of looping through them.

Quick Start

There is quite simple steps to start just download and place into <head> tag.To get started download the latest version of baseJS. Head to the downloads page.

JSS

Copy-paste the baseJS librarys <script> after your </body> after body closing tag.

<script src="https://dixeam.com/cdn/basejs/3.0/base.js" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" ></script>

Dependcies

There are some dependencis you need to include before the baseJS jQuery, Popper.js ,and bootstrap.min.js helps to runt he code smoothly. Copy the following code before the baseJS you inluded

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Initialization

You can initialize baseJS with following simple code, place following code after closing </body> tag

<script type="text/javascript">
   baseJS.init(
      {
         "site_url": "https://example.com",
         "current_url":"https://example.com/users/list",
         "lang": "en"
      }
   );
</script>

In initialization you can customize the options, Only 3 options enabled by defaults for some you need to provide true in argument to enabled it.

.

Required Paramters

Option Enabled (by default) Note
site_url YES It is your app online base URL like, https://example.com
current_url YES Current open url like, https://example.com/my/profile
lang YES You need to provide the your website or app language

Optional Paramters

Option Enabled (by default) Note
notif YES Notification system.
imasking NO Input masking for form validation.
select2 NO Select2 library for dynamics dropdown.

Ajax Modal

(image 1.0)

Ajax modal is simple way to load boostrap modal dynamically. To add this you only need to copy paste following code. It has

  • data-action="" api endpoint to load the modal
  • Method GET

<a href="#data_modal" data-toggle="modal" data-url="https://example.com/products/create" data-action="data_modal" class="btn btn-success btn-sm m-btn" >+ Add Product</a>

(image 1.1)

When you click on ajax modal button you can load the boostrap modal. In this modal you can add the form tag with custom attribute. Ajax modal is simple way to load boostrap modal dynamically. To add this you only need to copy paste following code. It has

  • data-action="make_ajax" It attach ajax call with form
  • data-action="make_ajax_file" It attach ajax call with form, You can use make_ajax_file when there is input type file in element.
  • data-action-after="reload" It will referesh after ajax call.

Note:

We strongly recommend to use the method="post".

<form action="https://example.com/categories/create" method="post" data-action="make_ajax" data-action-after="reload">
...
...
...
</form>

Delete Action

(image 2.0)

A very simple ajax call for delete record, it has following required attributes

  • data-action="delete_record"
  • data-url="" is server api endpoint, wheres 1 is id of record

<a data-action="delete_record" href="javascript:void(0);" data-url="https://example.com/products/delete/1">Delete</a>

Bulk Action

(image 3.0)

Bulk action, help to apply any specific action at many records at once. For this feature you need to enclosed your records table in form tag and each record should be have checkbox. The form has following attributes

  • action="" api endpoint to to apply action with keys of records
  • data-action="bulk-action" Type of the action to apply
  • Method GET / POST We strongly recommend POST

<form action="https://example/update/_bulk" data-action="bulk-action" method="post">
   ....
   ....
   ....
   </form>

The second thing you need to add the action button right before / after your records to apply the bulk action, It has following required attributes

  • id="actions"
<div class="form-inline " id="actions">
  <div class="form-group ">
    <select class="form-control form-control-sm">
      <option value="">Bulk Action</option>
      <option value="delete">Delete</option>
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
  </div>
  <div class="form-group mx-sm-3">
    <button type="button" class="btn btn-primary btn-sm m-btn">Apply</button>
  </div>
</div>

Editable

(image 4.0)

When you want quickly update your datatable record editable helps you alot. It is quick, easy and attribute base. In editable you must have datatable and each record with unique id.

  • data-action="editable" Make the datatable editable
  • data-url="https://example.com/products/update" api endpoint when update record
  • data-id="1" Unique ID for each record
  • data-input="text" When click on edit field will show to update
  • data-field="label" name of the field (like in database)

<table class="table table-bordered" data-action="editable" data-url="https://example.com/products/update">
   <thead>
      <tr>
         <th scope="col">#</th>
         <th scope="col">Label</th>
         <th scope="col">Description</th>
         <th scope="col">Category</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td scope="row">1</td>
         <td data-id="1" data-input="text" data-field="label">LED  <a href="#" class="edit-button">edit</a><a></a></td>
         <td data-id="1" data-input="textarea" data-field="description">Samsung led USA model <a href="#" class="edit-button">edit</a></td>
         <td data-id="1" data-input="select" data-field="cat_id">
            <select type="text" name="cat_id" id="cat_id" required="">
               <option value="5" selected="">Garments</option>
               <option value="6">Electronicss</option>
            </select>
         </td>
      </tr>
   </tbody>
</table>

Form Validation

baseJS provide easy step to validate the form before submit. When you use Ajax Modal Form, baseJS validate the form and put the bootstrap calss .border-danger with error message at bottom with class .text-danger

For Domos. You can select Form vaidation in menu Domos >> Form Validation

Input Masking

When you come for form validation it is very import to use client side validation. We have number of masking like, decimal, year, date, no space with custome attributes. For further demos & document please visit Domos. You can find input masking in menu Domos >> Input Masking

Select2 Dropdown

select2 is very popular libary for to make dynamics dropdowns. It has very rich funtionlity like

  • Single Dropdown for search
  • Multiple selector with search
  • You can use as tag selector
  • Use dropdown selector with jQuery ajax
  • You can use custome attributes
For Domos. You can select select2 in menu Domos >> Select2