Back to Top
The nuts and bolts for
Creative web development

HTML5 Data Bindings Formatter

“Format your data any way you want”

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.


  • 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.


  • 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.


  • 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.


  • 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.


  • 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.


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


  • Customers Dashboard Showcase

    For this showcase we used the HTML5 Data Bindings Extended Repeater to set the repeater so it shows 15 records per page with a client side paging with active record first. We also added two sort by ...

  • Task Management App Showcase

    In this task management app demo page you can create tasks, see what you need to do, track your progress and see what you've already done. The page has been created using DMXzone Boostrap and ...

  • Skydive Courses Showcase

    For this showcase we used HTML5 Data Bindings together with HTML5 Data Bindings Formatter for the courses schedule. It's been formatted from UNIX to 12-hours time format and also the text is with ...

  • Winter Gear Showcase

    For this demo page we used HTML5 Data Bindings and DMXzone Database Connector PHP/ASP to connect to our database. The available products are within a repeat region and the description is formatted ...

  • The Gym Showcase

    For this showcase we used HTML5 Data Bindings and DMXzone Database Connector to populate our text on the page. We also used the HTML5 Data Bindings Formatter to apply a truncate filter so that our ...

  • Tasks Management System

    For this interactive task management system we used a few DMXzone extensions in order to allow you to add tasks, assign them to different users, set priority levels and due dates. You can edit any of ...

  • Swiss Web Factory User Showcase

    For the amazing website, André Bender, CEO and founder of Swiss Web Factory used Dynamic Database Connectivity Collection PHP, which features our most advanced extensions that allow you to ...

  • ATV Store Showcase

    For this ATV Store showcase we used HTML5 Data Bindings and DMXzone Database Connector in order to retrieve the products from the database and also DMXzone Slider, which you can drag so that you can ...

  • Smart Temperature App Showcase

    For this smart temperature web app we have the temperature value stored in a database, which can be changed by dragging the slider. Also the background color changes according to the temperature ...

  • User Management Dashboard

    For this interactive management dashboard we used a few DMXzone extensions in order to make it sortable by name, location, role and status from the top arrow buttons. Below the table you can see the ...

  • Event Manager App Showcase

    For this showcase we build a dynamic event manager application with the HTML5 Data Bindings, where you can edit the date and time of an event with a click of a button. In order to do that we used ...

  • Car Care Services Showcase

    For this showcase we designed online schedule where you can add the date of the entry and due date with DMXzone Calendar 2, also choose between the different car models and available services and ...

  • Shopping List Assistant

    For this showcase we used dependable dynamic dropdown list for our category and products. Once you choose a category, a second dropdown list appears with the available products and another one for ...

  • Online Food Order Form Showcase

    For this showcase we designed an online food order form that doesn't uses a database but the new features packed in the latest version of HTML5 Data Bindings. The global $FORM object has been ...

  • Fashion Deals Daily Showcase

    For this fully responsive page showcase we used DMXzone Bootstrap for the layout and its Elements add-on for the details and time labels. With the HTML5 Database Connector PHP/ASP and HTML5 Data ...

  • Units Converter App Showcase

    For this showcase we built a units converter app that doesn't use a data source but the global $FORM object that's been formatted and used as bindings on our page. It has a format number filtering ...

  • Luxury Charter Yachts Showcase

    For this showcase we used the extensions packed in the Dynamic Database Connectivity Collection PHP/ASP in order to create a page where the images and the description are dynamically retrieved from a ...

  • Weather Forecast Web App Showcase

    For this showcase, we built a weather forecast web app, that populates the weather data on the page from a public feed with HTML5 Data Bindings. We also set a few conditional filters: if the ...

  • Bikes Catalog Showcase

    For this showcase we created a catalog, which presents the products image and title from a database (with repeat region) using DMXzone Database Connector PHP/ASP and HTML5 Data Bindings. The read ...

Videos



Show or Hide Specific Elements on Your Page


Serve Retina Optimized Images to Retina Devices


Creating Custom Repeaters


Validating Form Fields with HTML5 Data Bindings Formatter


Client-side Dependent Dropdowns with HTML5 Data Bindings Formatter


Showing Random Products with HTML5 Data Bindings Formatter


Filter as You Type with HTML5 Data Bindings


Using the Group By Filter in HTML5 Data Bindings Formatter


Using the Word Count Filter


Multi-step Form with Dependable Dynamic Dropdowns


Creating a Countdown Page using HTML5 Data Bindings Formatter


Dependable Drop Down Lists with HTML5 Data Bindings


Using the Collections Filters in HTML5 Data Bindings Formatter


Using the Conditional Filters in HTML5 Data Bindings Formatter


Using the Date and Time Filters in HTML5 Data Bindings Formatter


Using the Numeric Filters in HTML5 Data Bindings Formatter


Using the Text Filters in HTML5 Data Bindings Formatter

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

So you want to build dynamic web apps and interactive pages? Empower solutions like single page apps and Ajax driven websites? This is all possible with the new HTML5 Data Bindings Dreamweaver extension. The extension is powered by a stunning jQuery based template engine that helps you populate your data super-fast on the page. Your data is represented fully visual in a tree so you can bind it directly on your page in Dreamweaver design mode. Also, you can add smart repeat regions, detail ...

Read More

History

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

Share this Article