xCRUD v.1.7

Documentation and code examples for the new features

xCRUD - is a simple-usage but powerful Create-Read-Update-Delete application for php and MySQL.

Modal View

Forms can be display in modal view. The modals are draggable. The settings to enable or disable modal view is specific to each form.
By default forms are in normal mode where editign replaces the records list and on return, the list is displayed again
To display forms in Side View you need to define the following line anywhere in your form as shown below

     $xcrud->is_edit_modal(true);
     

Side View

Forms can be display in side view. This means the edit or add form is on the side. of the list. The settings to enable or disable side view is specific to each form.
By default forms are in normal mode where editing replaces the records list and on return the list is displayed again
You can manipulate the themes to specify where to load the edit form. If you are using the theme 'default' You will change 'xcrud/themes/default/xcrud_list_view.php'. You will then move the code section with the class "edit_side_panel".
To display forms in Side View you need to define the following line anywhere in your form as shown below

     $xcrud->is_edit_side(true);
     

Modal View

Tabulator is a powerfull script on its own and can be gotten from Tabulator Site
Xcrud has provided a mechanism to import and utilize some of the features in it. It has alot of features and xcrud 1.7 has utilized a couple of them
To enable tabulator you should follow the steps below

• 1 - Enable tabulator in you file. You do that by using the line below

      $xcrud->tabulator_active(true);
  

• 2 - Define Main Table Properties - This are properties that affect the whole table at large
  Note that these properties are exactly as shown in the Tabulator Site.
  We will just define a couple of supported fields below, the rest can be gotten from the Tabulator Site.

      {define xcrud instance properties}
      
      //Define table  properties here
      $xcrud->tabulator_main_properties('
                movableColumns: true,
                headerVisible:true,
                width: "100%",
                height: "400px",
                groupStartOpen:true,
                placeholder:"No Data Available",
                tooltipsHeader:true,
  			  tooltips:true'); //'layout: "fitColumns",
  	?>		  
  

• 3 - Define Column Properties - This are properties affect only the column scope only
  

  	//Define column properties
  	//make the column frozen (basically stuck to the right) and also when the view width is small make it responsive
      $xcrud->tabulator_column_properties('amount','responsiveLayout:"collapse",align:"right",frozen:true');
  	?>		  
  

  Column properties supported are

  Layout hozAlign	sets the horizontal text alignment for this column (left|center|right)
  Layout vertAlign	sets the vertical text alignment for this column (top|middle|bottom)
  Layout minWidth	sets the minimum width of this column, this should be set in pixels (this takes priority over the global option of columnMinWidth)
  Layout widthGrow	when using fitColumns layout mode, determines how much the column should grow to fill available space (see Table Layout for more details)
  widthShrink	when using fitColumns layout mode, determines how much the column should shrink to fit available space (see Table Layout for more details)
  resizable	set whether column can be resized by user dragging its edges (see Table Layout for more details)
  frozen	freezes the column in place when scrolling (see Frozen Columns for more details)
  responsive	an integer to determine when the column should be hidden in responsive mode (see Responsive Layout for more details)
  tooltip	sets the on hover tooltip for each cell in this column (see Formatting Data for more details)
  cssClass	sets css classes on header and cells in this column. (value should be a string containing space separated class names)
  rowHandle	sets the column as a row handle, allowing it to be used to drag movable rows. (see Movable Rows for more details)
  htmlOutput	show or hide column in the getHtml function output (see Retrieve Data as HTML Table for more details)
  print	show or hide column in the print output (see Printing for more details)
  clipboard	show or hide column in the clipboard output (see Clipboard for more details)

Parsley JS is a powerfull script on its own and can be gotten from Parsley Site
Xcrud on its own has a strong inbuild validation tool as shown in version 1.6 documentation. It uses validation pattern i.e validation_pattern( field(s), pattren )
Now with parsley validation, xcrud is able to achieve validation in a better way. The benefits of parsley is

• - Dynamic validation
• - Validation when typing
• - Better display of validation errors

• Enable parsley in your file. You do that by using the line below

      $xcrud->parsley_active(true);
  

• Define Validation Properties - This are properties are defined per column

  
  Note that these properties are exactly as shown in the Parsley Site.
  We will just define a couple of supported fields below, the rest can be gotten from the Parsley Site.
  When defining a field validation properties the following is important

 		  
$xcrud = Xcrud::get_instance();
$xcrud->table('employees');
$xcrud->set_attr('lastName',array('id'=>'user','data-role'=>'admin'));	
//Activate parslet validation
$xcrud->parsley_active(true);
//Ensure First Name is alpha numeric	
$xcrud->set_attr('firstName',array('data-parsley-trigger'=>'change','id'=>'user','data-parsley-type'=>'alphanum'));
//ensure valid email and display "Email not valid"
$xcrud->set_attr('email',array('data-parsley-trigger'=>'change','id'=>'user','data-parsley-type'=>'email','data-parsley-error-message'=>"Email not valid"));	
//ensure office Code is between 3 and 5 number characters
$xcrud->set_attr('officeCode',array('id'=>'user','data-parsley-type'=>'digits','data-parsley-length'=>"[3,5]"));	    
$xcrud->button('javascript:void(0);','My Title','icon-link','',array('target'=>'_blank'));
echo $xcrud->render();
	?>

Define Trigger

Define Type

Bulk delete has been implemented so that a user is able to select multiple records and delete or update the records.
When activated the user is provided with the option to select the multiple records and delete or update the records.

To enable bulk selection & deletion the user needs to include the following line of code

 		  
      
       $xcrud->set_bulk_select(false);
	

 		  
      
      $xcrud->set_bulk_select(false,'cd_key','=','EBGC57SXM-VW47I6AF-401X7DYM');
	

 

    function deleteItems(){
        var r = confirm("Confirm deletion of " + items.length + " items.");
        if (r == true) {
          Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{action: 'bulk_delete', task:'action',selected:items,table:'million',identifier:'id'}))
          items = [];
        }       
    }

Inline editing is a powerfull feature that allows data to be edited from the list view by just clicking or double clicking the table cell and editing the data. The user needs to explicitly set the fields that they need to be able to edit through the inline method. To activate the fields for inline editing,the following code is used

 		  
   $xcrud->fields_inline('customerNumber');

You should include all the fields that you want to be able edit using the inline method.

Then you need to specify how those cells/columns become edited. There are two ways. Either through single click or double click

Single Click

With single click way, user has to click the cell once for it to become editable

 		  
   $xcrud->inline_edit_click('single_click');

Double Click

With double click way, user has to double click the cell to become editable

 		  
   $xcrud->inline_edit_click('double_click');

Toast Alerts provide a nice way of alerting the user without intrusion and discruption of the current activity. To use toast alerts in xCRUD you need to activate them from the config files. You also need to define which colors to show for either success or failure

You will ammend the following lines of code in the file 'xcrud/xcrud_config.php'.

 		      
    public static $load_toast = true; //loads the toast js
    public static $activate_toast_alerts = true; // activates toast alerts   
	public static $toast_success_color = '#1a5589'; //Sets the success color for toast message
	public static $toast_error_color = '#ff6666'; //Sets the fail color for the toast message	

After the lines above have been activated, all alerts will now be in the form of toast alerts. The default configuration of the toast alerts is to appear on the bottom right section of the screen for 10 seconds. This can be changed from xcrud.js file.

With this feature, you can now group fields in the form view. By grouping you are able place certain fields under a group.

To group fields you write the following code

 		     
   $xcrud->fields_arrange('firstName,lastName,extension,officeCode','Group 1-Names',true);	

To code above states the folowing. The first parameter specifies the fields to be included in the a group, So the fields 'firstName,lastName,extension,officeCode' will belong to the group 'Group 1-Names'. The second parameter specifies the group name which for our case is 'Group 1-Names' The third parameter is boolean which specifies whether to show or ommit the group name. If true, the group name is displayed.

The groups will appear in the sequence they are defined. If the $xcrud->fields_arrange is not defined, the form will have no grouping.

IMPORTANT!

With this feature users are able to move to the next record or previous record when in form view either edit mode or view mode.

To activate the next and previous navigation in form view, the code will read as follows

 		      
    $xcrud->set_next_previous(true);	

With the above code, the next and previous buttons will be displayed on the form and the user will be able to navigate to the next or previous record

jQuery - http://jquery.com/

jQuery UI - http://jqueryui.com/

jQuery-Timepicker-Addon - https://github.com/trentrichardson/jQuery-Timepicker-Addon

PhpLetter - http://www.phpletter.com/Our-Projects/AjaxFileUpload/

Twitter Bootstrap - http://getbootstrap.com/

Icomoon - http://icomoon.io/

Tabulator - http://tabulator.info/

Parsley - https://parsleyjs.org/