HTML5 Data Bindings Formatter

Conditional Display and Formatting, Custom Date and Time Formatting, Advanced Data Filtering and Transformations are just a few of the hot features in the HTML5 Data Bindings Formatter extension! Get the power of the 47 supplied formatting filters and make your data fetched by HTML5 Data Bindings, display it exactly the way you want without writing a single line of code!

You can do various basic numeric transformations as well as advanced calculations, text transformations and conversions, and even filter or sort your collections used for example in the repeat regions of HTML5 Data Bindings. This is the most powerful extension you were waiting for to reach the next level of full interactive web apps and single page apps.

Features

Collections

  • Average - Returns the average of all numbers in a collection

  • Count - Returns the number of items in the collection.

  • Group by - Group a collection by a property.

  • Join - Returns the values of a collection joined together with the given character.

  • Keys - Get all keys from an object as an array.
  • Last - Returns only a given number of items from the end of the collection.
  • Max - Returns the highest number in a collection.
 
  • Min - Returns the lowest number in the collection.
 
  • Randomize - Randomizes all the records in a collection

  • Reverse - Reverse a collection.

  • Sort - Sorts a collection.

  • Sum - The sum of all numbers in a collection.


  • Top - Returns only a given number of items from the beginning of the collection.


  • Unique - Returns an unique collection.

  • Value - Get all values from an object as an array.

  • Where - Filters collection on a property value.


Example:

For this example we created a Top 3 voted pictures page, where we used the top collections filter. The filter is applied, using the HTML5 Data Bindings Formatter.

HTML5 Data Bindings Formatter


 

Dreamweaver Design View

 

Browser Preview

Conditional Filtering

  • Between - Returns every record in the table where the field's value is between the values you enter.


  • Contains - Returns every record in the table where the field's value contains the value you enter.

  • Ends with - Returns every record in the table where the field's value ends with the value you enter.


  • Starts with - Returns every record in the table where the field's value begins with the value you enter.

  • Test - Tests a string with a regular expression.

  • Then - Evaluates a condition and based on its results returns the appropriate value.

Example:

For this example we usedatable that contains the last customers' orders. It can be filtered by date, customer ID, name and so on. All filters are applied, using the HTML5 Data Bindings Formatter that returns the results based on different criteria.

HTML5 Data Bindings Formatter


 

Dreamweaver Design View

 

Browser Preview


Date and Time Filtering

  • Date Add - Add a date part of the day. For example weeks-5 subtracts five weeks from the date.

  • Date Diff - Returns the difference between two dates. You can also choose a date interval from the drop down menu.  

 
You can choose what part of the date difference you want to display. The number of days, months or weeks, but also maybe only the time difference in Hours:minutes format.
 

  • Format Date - Format a date using one of the many available masks.


Numeric  Filtering

  • Abs - Returns the absolute number.
  • Ceil - Rounds a number upwards to the nearest integer. 
  • Currency - Format a number as currency.
  • Floor - Rounds a number downwards to the nearest integer.
  • Format Number - Coverts a number into a string with the given number decimals.
  • Hex - Converts a hexadecimal string to a number.
  • Pad Number - Converts a number to a string with leading zeros.
  • Round - Rounds a number to the nearest integer.
  • To Number - Converts the input to a number.

Example:

For this example we applied the Ceil filter in order to round the price number upwards to the nearest integer and also the currency filter to convert the price in the proper currency, in our case $USD. The order date has a format date filter applied - dd mm yyyy.

HTML5 Data Bindings Formatter

 

Dreamweaver Design View 

 

Browser Preview

Before applying Celi, Currency and Format Date filters

 

After applying Celi, Currency and Format Date filters

General Filtering

  • Default - Sets the default value if binding has no value.

Text Filtering

  • Camelcase - Camelcase a string. For example: DMXzone Data Bindings returns dmxzoneDataBindings.

  • Camelize - Camelize a string. for example: DMXzone Data Bindings returns DMXzoneDataBindings.
  • Capitalize - Capitalize a string. For example: DMXzone Data Bindings returns Dmxzone data bindings.
  • Dasherize - Dasherize a string. For example: DMXzone Data Bindings returns -d-m-xzone-data-bindings.
  • Humanize - Humanize a string. For example: DMXzoneDataBindings returns Dmxzone data bindings.
  • Lower Case - Convert a string to lower case. For example: DMXzone Data Bindings returns dmxzone data bindings.

  • Pad - Smart padding a string to specific length, so you can add padding characters in front, on back or center the string.
  • Repeat - Repeat a string/character a number of times.

  • Replace - Replace a part of a string with a new value.

  • Slugify - Slugify a string. For example DMXzone Data Bindings returns dmxzone-data-bindings.

  • Split - Split a string on a character.
  • Strip Tags - Remove HTML tags from a string

  • Sub String - Extract a part of a string (use negative start to get from end)

  • Titlecase - Titlecase a string. For example: DMXzone Data Bindings returns Dmxzone Data Bindings.

  • To String - Converts the input to string.

  • Trim - Trims white space from begin and end of a string.
  • Truncate - Smart truncates a string to a specific length respecting the word boundaries and adding an additional character to indicate more content like ...

  • Underscore - Underscore a string. For example: DMXzone Data Bindings returns dmxzone_data_bindings.
  • Upper Case - Converts a string to upper case. For example: DMXzone Data Bindings returns DMXZONE DATA BINDINGS.
 
  • Word Count - Count the number of words used

Example:

For this example, we used the Uppercase filter that converts a string to upper case, in our example, the car names. Also we added a Replace filter to substitute cars with models into the category field.

HTML5 Data Bindings Formatter


 

Dreamweaver Design View 


Browser preview

Before applying Upper case and Replace filters

 

After applying Upper case and Replace filters


Showcases


Videos


  • Using Radio Buttons with Database Values
    Databases – Use radio buttons with values, that come from a database
  • Show or Hide Specific Elements on Your Page
    Interactivity – Show or hide specific elements on your page, depending on visitor's browser viewport size
  • Serve Retina Optimized Images to Retina Devices
    Design – Serve retina optimized images to retina devices
  • Creating Custom Repeaters
    Databases – Create custom repeaters using HTML5 Data Bindings Extended Repeater Add-on and HTML5 Data Bindings Formatter
  • Validating Form Fields with HTML5 Data Bindings Formatter
    Databases – Use HTML5 Data Bindings Formatter and regular expressions in order to validate a form field
  • Client-side Dependent Dropdowns with HTML5 Data Bindings Formatter
    – Reuse your datasets in as many dropdowns as you wish
  • Showing Random Products with HTML5 Data Bindings Formatter
    – Display a specific number of random products in a section
  • Filter as You Type with HTML5 Data Bindings
    – Learn how to do that in a few easy steps
  • Using the Group By Filter in HTML5 Data Bindings Formatter
    – Learn how to use the group by filter
  • Using the Word Count Filter
    – Use the Word Count filter with Advanced HTML Editor 3
  • Multi-step Form with Dependable Dynamic Dropdowns
    – Learn how to create a multi-step form containing dependable dynamic dropdown menus
  • Creating a Countdown Page using HTML5 Data Bindings Formatter
    – Learn how to create a countdown page
  • Dependable Drop Down Lists with HTML5 Data Bindings
    – Learn how to create dependable drop down lists
  • Using the Collections Filters in HTML5 Data Bindings Formatter
    – Learn how to use the collections filters
  • Using the Conditional Filters in HTML5 Data Bindings Formatter
    – Learn how to use the conditional filters
  • Using the Date and Time Filters in HTML5 Data Bindings Formatter
    – Learn how to use the date and time filters
  • Using the Numeric Filters in HTML5 Data Bindings Formatter
    – Learn how to use the numeric filters
  • Using the Text Filters in HTML5 Data Bindings Formatter
    – Learn how to use the text filters
Requirements
Type: Data Source
License: External link
Product: Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X, Mac OS X 10.4+
Used Technologies: jQuery
Tags: html5 data bindings formatting


This Extension Requires:

HTML5 Data Bindings

Connect to your data

History

Version 1.3.0

Version 1.2.1

  • Improved handling of regular expressions
  • Improved filters parameter parsing
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

Version 1.2.0

  • Added support for direct data bindings usage as values of the filters. Useful for dynamic WHERE conditions with $FORM.xx values for example.
  • Added 2 new filters/formatters:
    •   keys() -> get all keys from an object as an array
    •   values() -> get all values from an object as an array

Version 1.1.1

  • Added compatibility with the new HTML5 Data Bindings SEO extension
  • Improved Date and Time formatting

Version 1.1.0

Six New formatting filters for Smart Text Processing

  • Truncate - Smart truncates a string to a specific length respecting the word boundaries and adding an additional character to indicate more content like ...
  • Pad - Smart padding a string to specific length, so you can add padding characters in front, on back or center the string
  • Repeat - Repeat a string/character a number of times
  • Sub String - Extract a part of a string (use negative start to get from end)
  • Strip Tags - Remove HTML tags from a string
  • Word Count - Count the number of words used
  • Compatibility with the latest HTML5 Data Bindings.
  • Always apply HTML encoding to filter parameters to allow HTML codes in text

Version 1.0.2

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Place your review about HTML5 Data Bindings Formatter




You must me logged in to write a review
Reviews

Be the first to place a review