JavaScript Utilities

Magentrix offers a set of JavaScript libraries and helpful utility methods to simplify development and speed up the creation of business applications. Below is a list of such utilities that you can enjoy:

Message Dialog

Using the Message Box, you can easily show messages, warnings, and errors to users in a modal format. The component is optimized for both desktop and mobile devices.
This utility method accepts three parameters:

• Message
• Message Type (values are: message, warning or error)
• Title

//show a message 
$.messageBox('Thank you for your registration.', 'message', 'Confirmation');

//show a warning message
$.messageBox('You have not saved your changes, please click on "Save" first', 'warning', 'Note');

//show an error
$.messageBox('Invalid email address, please try again.', 'error', 'Error');

Confirm Dialog

This component allows you to show a confirmation dialogue and ask a "YES", "NO" question from the user.

Minimum implementation:

$.confirm({ 
   yesCallback: function() {
      // your code goes here...
   }
});

Properties:

More advanced controls:

//docment name is merged into the message below
$.confirm({ 
   title: "Delete Document?",
   message: `This will delete the "${doc.Name}" document and move it to the Recycle Bin, are you sure?`, 
   icon: "glyphicon glyphicon-bin x2",
   yesLabel: "Delete",
   noLabel: "Cancel", 
   buttonsAlignment: "center",
   yesCallback: function() {
     //...
   }
});

Progress Bar Dialog

In order to show a progress-bar dialog, use "showBusy". This jQuery extension is optimized for Desktop and Mobile devices.

// Opens a progress dialog
$.showBusy(true);

// Closes an existing open progress dialog
$.showBusy(false);

// To change options, below shows the default values
$.showBusy(true, { 
  title : "Progress", 
  message : "Loading...", 
  minWidth : 400, 
  modal : true
});

Disabling and Enabling the Validators

Within the web interface, one input field may have many validators. For example, one field may need to have a certain format such as date as well as be required. In order to disable or enable all validators on such fields, use the below utility extensions:

$("#startDate").disableValidators();

$("#startDate").enableValidators();

Show or Hide Field within ViewSections

In order to dynamically show and hide fields within standard Magentrix ViewSections, use the below utility methods. Note that these methods disable and enable validators of these fields accordingly.

//hides a visible field within ViewSection
$entityField("#startDate").hideField();

//shows a hidden field within ViewSection
$entityField("#startDate").showField();

//reads the value of the field even in read-only mode and useful for picklists.
$entityField("#startDate").val();

Check/Uncheck Checkbox

Using this shortcut method, you can quickly check or uncheck a input checkbox using a boolean value.

$("#enabled").setChecked(true);

Manipulate Select/Picklist Values

This utility method allows you to change the picklist/select input options using JavaScript.

var names = [ 
 { Name:"Sam", Id:"1" }, 
 { Name:"John", Id:"2" }
];

//change the values (options)
$("#contactNames").dropDownOptions({ 
   items: names
});

// Change the values & restore the old value if possible
var values = [ 
 { text:"Sam", value:"1" }, 
 { text:"John", value:"2" }
];

$("#contactNames").dropDownOptions({ 
   items: values,
   textField: "text",
   valueField: "value",
   selected: "2"
});

// If the select should not have an empty option (if is not nullable)
$("#contactNames").dropDownOptions({
   items: names,
​   nullable:false
});

Manipulate Multi-picklist values

This utility method allows you to change the values of a multi-picklist input via JavaScript, very similar to regular picklists:

// Change the values (options)var names = [ 
  { Name:"Sam", Id:"1" }, 
  { Name:"John", Id:"2" }
];

$("#contactNames").multipicklistOptions({ items: names }); 


// Change the values (options) while working with a list of custom objects, 
// define which values are selected by default
var values = [ 
  { text:"Sam", value:"1" }, 
  { text:"John", value:"2" }, 
  { text:"David", value:"3" }
];

$("#contactNames").multipicklistOptions({ 
   items: values, 
   textField: "text", 
   valueField: "value", 
   selectedValues: [ "1","3" ]
});

Use the "filter" property to write a function and filter out items you do not need to be listed form the array of "items" passed.

AjaxAction

Refresh a portion of the page using this JavaScript method. When this method is called, it executes your action and re-renders the page, only refreshing the contents of the selected jQuery item.

$(selector).ajaxAction('/aspx/mypage/mycustomAction', {
   data: { id:"123" },   //parameters to bind with action arguments
   httpMethod: "POST",   //default is POST
   stateful: false,      //default is false, passes the viewstate back to your action
   callback: function(element,response) { ... } //optional 
});

String Manipulation Functions

Magentrix provides you with many JavaScript functions that manipulate strings. Using these methods, you can validate, format or clean up strings in JavaScript.

var text = "John Smith";

if (text.endsWith("ith")) { 
  ... 
}

if (text.startsWith("Jo")) { 
  ... 
}

// Evaluate to see if the variable is of type string
if (isString(text)) {
  ... 
}

// Replace all occurrences of a pattern, boolean parameter to ignore case or not.
text.replaceAll("John","J.",true);

// Format string using placeholders
var t = "{0} says {1}".format(text,"Hi");

// Returns "Joshua Winslow..."
var result = trimString("Joshua Winslow "Josh" Groban is an American singer, actor, and record producer.", 14);

// Remove all HTML tags from a string
var result = stripHtml("<span>Hi</span>");

Load JavaScript Files

Using the below API, you can safely load any JavaScript file into the DOM and use them, you can even load Magentrix REST/AJAX framework using the below API.

$.loadScriptFile("https://cdn.google.com/scripts/fecther.js", function() { 
   // Within this block, is safe to reference objects or functions from the JS file.
});

// The second parameter, "2" here refers to version 2 of the AJAX API.
$.getRestScript(function() {
   // The script is now loaded. Your code can go here...
},2); 

Trigger a Form Post

You can trigger a form post from JavaScript on Magentrix pages. This is something that CommandButtons do when users click on them. However, there may be special scenarios where you want to do additional checks or validations before the form post takes place.

The below code shows how you can do this.

// Trigger form post with validation.
__doPostBack("ACTION_NAME");

// Trigger form post without validation
__doPostBack("ACTION_NAME", { validate:false });

// Trigger form post and show progress dialog
__doPostBack("ACTION_NAME", { showBusy:true });