xCRUD Docs

# New in v1.7

These edit view settings are applied on forms individually.

# Normal Edit View

This is the default editing form view. The edit form screen appears in place of the records list, hiding the records list, and displays the records list again on close of the normal editing screen.

This displays the editing form in a pop-up window over the records list that's also draggable.

$xcrud->is_edit_modal(true);

# Side Edit View

The list view panel is split into 2 columns with the list remaining on the first column and the editing form displaying on the second column.

$xcrud->is_edit_side(true);

INFO

You can manipulate the themes to specify where to load the edit form. If you are using the 'default' theme, change 'xcrud/themes/default/xcrud_list_view.php'. You will then move the code section with the class "edit_side_panel".

# Tabulator Usage

Tabulator (opens new window) is a powerful script on its own, with a lot of features and xCRUD has provided a mechanism to import and utilize some of these features.

# Enable Tabulator

$xcrud->tabulator_active(true);

# Define Main Table Properties

These are properties that affect the whole table at large.

NOTE

These properties are exactly as shown in the Tabulator Site.

We will define a couple of supported fields below. Please see the Tabulator Site. (opens new window) for more.

{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",
); 
?>

# Define Column Properties

These are properties affect the column scope only.

// 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');
?>

# Supported Column Properties

Column Property Description
Layout hozAlign sets the horizontal text alignment for this column (left
Layout vertAlign sets the vertical text alignment for this column (top
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)

We might not exhaust all column properties but you can always cross reference in tabulator - column section (opens new window)

Credit goes to tabulator script!. (opens new window)

# Parsley Validator

xCRUD has a strong inbuild validation tool through the method validation_pattern( field(s), pattern ). The parsley validator (opens new window) enables xCRUD to achieve validation in a better way.

The benefits of the parsley validator are

  • Dynamic validation
  • Validation while typing
  • Better display of validation errors

# Enable Parsley Validator

$xcrud->parsley_active(true); //Enable parsley

# Define Validation Properties

These properties are defined per column.

NOTE

These properties are exactly as shown on the the Parsley Site.

We will define a couple of supported fields below, the rest can be gotten from Parsley Site (opens new window). When defining 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 parsley 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();
?>

# Parsely Triggers

The attribute data-parsley-trigger'=>'change' triggers the parsley validator.

API Description
data-parsley-trigger="input" Specify one or many javascript events that will trigger item validation, before any failure. To set multiple events, separate them with a space data-parsley-trigger="focusin focusout". Default is null. See the various events supported by jQuery.
data-parsley-trigger-after-failure="focusout" Specify one or many javascript events that will trigger item validation, after the first failure. Default is 'input'.
data-parsley-no-focus If this field fails, do not focus on it (if first focus strategy is on, next field would be focused, if last strategy is on, previous field would be focused)
data-parsley-validation-threshold="10" Used with trigger option above, for all key- events, do not validate until the field has a certain number of characters. Default is 3
data-parsley-class-handler="#element" Specify the existing DOM container where ParsleyUI should add error and success classes. It is also possible to configure it with a callback function from javascript, see the annotated source.
data-parsley-errors-container="#element" Specify the existing DOM container where ParsleyUI should put the errors. It is also possible to configure it with a callback function from javascript, see the annotated source.
data-parsley-error-message="my message" Customize a unique global message for the field.
data-parsley-`constraint`-message="my message" Customize the error message for the field constraint. eg: data-parsley-required-message="this field is required"

# Define Type

What Type is it . i.e 'data-parsley-type'=>'alphanum'

API Description
Required, required [HTML5], data-parsley-required, data-parsley-required="true", data-parsley-required="false" Validates that a required field has been filled with a non blank value. If data-parsley-required="false", validator is deactivated and the field is not required.
Email, type="email" [HTML5], data-parsley-type="email" Validates that a value is a valid email address.
Number, data-parsley-type="number" Validates that a value is a valid number according to the given step, min and original value. The default step for HTML5 is "1", which is so counterintuive that Parsley uses a default step of "any" for data-parsley-type="number". Warning! HTML5 type="number" can be counterintuitive. The default step of '1' is near useless. Moreover, for browsers that support it, the value accessible from javascript in case of invalid input is "", so you will never get an error (unless it is also required).
Integer, type="number" [HTML5], data-parsley-type="integer" Validates that a value is a valid integer.
Digits, data-parsley-type="digits" Validates that a value is only digits.
Alphanum, data-parsley-type="alphanum" Validates that a value is a valid alphanumeric string.
Url, type="url" [HTML5], data-parsley-type="url" Validates that a value is a valid url.
Minlength, minlength="6" [HTML5], data-parsley-minlength="6" Validates that the length of a string is at least as long as the given limit.
Maxlength, maxlength="10" [HTML5], data-parsley-maxlength="10" Validates that the length of a string is not longer than the given limit.
Length, data-parsley-length="[6, 10]" Validates that a given string length is between some minimum and maximum value.
Min, min="6" [HTML5], data-parsley-min="6" Validates that a given input (number or date) or date is greater than or equal to some minimum (number or date.)
Max, max="10" [HTML5], data-parsley-max="10" Validates that the given input (number or date) is less than or equal to some maximum value (number or date).
Range, type="range" [HTML5], data-parsley-range="[6, 10]" Validates that a given value (number or date) is between some minimum and maximum values (numbers or dates).
Pattern, pattern="\d+" [HTML5], data-parsley-pattern="\d+" Validates that a value matches a specific regular expression (regex). NOTE: that patterns are anchored, i.e. must match the whole string. Parsley deviates from the standard for patterns looking like /pattern/{flag}; these are interpreted as literal regexp and are not anchored.
MinCheck, data-parsley-mincheck="3" Validates that a certain minimum number of checkboxes in a group are checked.
MaxCheck, data-parsley-maxcheck="3" Validates that a certain maximum number of checkboxes in a group are checked.
Check, data-parsley-check="[1, 3]" Validates that the number of checked checkboxes in a group is within a certain range.
Equalto, data-parsley-equalto="#anotherfield" Validates that the value is identical to another field's value (useful for password confirmation check).

# Bulk Selection, Delete & Edit

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);

A user can give logic to the bulk deletion such that, certain records will have the checkbox and others not. This is done by the following line of code

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

The above code states that bulk selection should not be available for the record with the cd_key that is equal to ('=') 'EBGC57SXM-VW47I6AF-401X7DYM'. Lastly the user can implement what the bulk selection will do.

The javascript code below is called on the button click and deletes the selected list records.

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

Inline editing, is a powerful 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

Requires the user to click the cell once for it to become editable.

$xcrud->inline_edit_click('single_click');

# Double Click

Requires the user to double click the cell to become editable.

$xcrud->inline_edit_click('double_click');

# Default Save Behavior

You can set whether pressing [enter] or clicking on the submit button saves the record during inline editing.

// Can be 'enter_only' or 'button_only'  or 'enter_button_only'
$xcrud->inline_edit_save('enter_only');

# Table Logging

To log all table actions, enable logging using set_logging(true).




 




$xcrud = Xcrud::get_instance(); 

$xcrud->table("payments");
$xcrud->set_logging(true);
$xcrud->limit(5); 

echo $xcrud->render();

All logged table actions are logged to the logs table. Below is sample code displaying 5 of the most recent logs.



 
 



 



$xcrud2 = Xcrud::get_instance();    

$xcrud2->table("logs");
$xcrud2->limit(5);
$xcrud2->unset_remove();
$xcrud2->unset_add();
$xcrud2->unset_edit();
$xcrud2->order_by('updated','desc');

echo $xcrud2->render();

# Video Uploads

Video uploads supported. The change_type() method takes 'video' as the 2nd parameter, enabling video uploads for the 'simple_video' field below.








 



$xcrud = Xcrud::get_instance();

$xcrud->table('uploads');
$xcrud->columns('simple_video');
$xcrud->fields('simple_video');

// image upload with resizing
$xcrud->change_type('simple_video', 'video');
$xcrud->unset_remove(true,'id','=','14');
echo $xcrud->render();

See example (opens new window)

# Send Email

Send emails with xCRUD. See docs.

See Demo (opens new window)

# Toast Alerts

Toast alerts provide a nice way of alerting the user without intrusion and disruption from 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.

// loads the toast js
public static $load_toast = true; 

//  activates toast alerts   
public static $activate_toast_alerts = true; 

// Sets the success color for toast message
public static $toast_success_color = '#1a5589'; 

// Sets the fail color for the toast message	
public static $toast_error_color = '#ff6666';

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

# Form Field Grouping

With this feature, you can now group fields in the form view. By grouping you are able to 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);

The code above does the following.

  • The first parameter is a comma-separated string of fields to be included in the group.
  • The second parameter specifies the group name.
  • 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 no groups are defined, the form will have no grouping.

IMPORTANT

You should NOT include a field in more than one group. If you do so, it will appear in the last included group and rearrange the groups in the wrong order.

# Form Navigation

With this feature users are able to move to the next record or previous record when in form view either in edit 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.

# Verification Key Error

In xcrud_config.php, set $autoclean_activate to true to enable the verification key error message. Setting it to false disables the verification key error message meaning you can now use multi-instance or open multiple instances in different tabs without an issue.

public static $autoclean_activate = true; //deactivate multi instance checks.

# Add Verification Error Message

To add a verification error message and include a link, change the setting below, defined in xcrud_config.php, by assigning a message of choice.

public static $session_error_message = "my message";

# xCRUD Translation Function

xCRUD 1.7 now supports translation on any point of xCRUD instance, the method $xcrud->translate_external_text() returns the translation of the passed string.

So the line below will replace the term "Payments" with the translated string defined in the translation file.

$xcrud->table_name($xcrud->translate_external_text("Payments"));

Below, is the translation file with the "Payments" string definition.

;; content
Payments = Pagos
Last Updated: 8/1/2021, 11:54:19 PM

← Compatibility & Plug-ins →