DataFormsJS v5.14.3

• jsxLoader Update so that JSX Files are compiled and added to the page only after all files are downloaded
  • Related Issue: #22
  • Previously JSX files were asynchronously download, compiled, and added to the page in the order that they downloaded.
  • This caused issues when files downloaded in an unexpected order.
• Special Thanks to m1sta for opening this issue and providing great examples to show the error https://github.com/m1sta

DataFormsJS v5.14.2

• Web Components - Renamed function [utils.js].isAttachedToDom() to [utils.js].isDomAttached() because the text string ToDom would show up when searching source code for case-insensitive todo. This is a minor update but prevents the files from showing up in external projects by accident. This could be considered a breaking change if an app calls the function but that is unlikely the case and it's mostly an internal function because it's undocumented outside of the changelog; that is the reason why a patch version is being released.

DataFormsJS v5.14.1

• Fixed a bug in Web Component <json-data> that was introduced on the previous build where format.{func} was not working in [data-show] attributes.

DataFormsJS v5.14.0

• Added ability to use HTML Attribute [data-format] from Web Component <url-router> when using attribute [url-param]. The same functionality when using Web Component <json-data> with attribute [data-bind] is provided.
  • This includes using data-format="number|date|dateTime|time|{function}" and custom functions.
  • js/web-components/url-router.js https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/url-router.js
• Updated Image Gallery Controls/Components:
  • Fixed issue where pinch-to-zoom on mobile devices would cause previous/next image navigation to occur.
  • js/web-components/image-gallery.js https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/image-gallery.js
  • js/plugins/imageGallery.js https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/imageGallery.js
  • js/react/es6/ImageGallery.js https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js

DataFormsJS v5.13.1

• Update Code Comments on React Component <JsonData>
  • Previously @license was included in the main comment which resulted in Vite including about 5 kB (uncompressed) and about 1.5 kB of extra code on the build process.
  • Comments were updated so that they are not included on build resulting in smaller files.
• Update Framework, React, and Web Components for Date/Time formatting:
  • Update for en-US to use format {date} {time} instead of {date}, {time} because most people in the US (and software programs) do not use the comma while Chrome uses the comma.

DataFormsJS v5.13.0

• DataFormsJS App Object
  • ~/js/DataFormsJS.js
  • New Feature - Pass HTML Attributes as Properties to HTML Controls
    • This is similar in concept to passing props with React or Vue and allows easy and quick customization of content in the HTML control.
  • Update - When manually calling app.refreshHtmlControl() nested HTML controls are now rendered
  • Fix typo in error message
  • Example of the new features is being published on the Handlebars Places Demo:
    • https://dataformsjs.com/examples/places-demo-hbs.htm
    • All pages with Excel and CSV export pass prop to a HTML Control
    • Search Screen renders nested HTML control when app.refreshHtmlControl() is called from the JS Control <json-data>
• Web Components - Component Class
  • ~/js/web-components/Component.js
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/Component.js
  • Update so that props defined with camelCase will be available as dashed-case from HTML Observable Attributes
  • Update HTML Observable Attributes to convert strings to correct type for true, false, null and empty values
  • Example is being published with the Web Components Places Demo:
    • https://www.dataformsjs.com/examples/places-demo-web.htm
• Framework Plugins - Excel and CSV Export
  • ~/js/plugins/exportToCsv.js
  • ~/js/plugins/exportToExcel.js
  • Add support so that elements using the plugin are refreshed when app.refreshHtmlControl() is called.
  • Minor fix handled by using onRendered(rootElement) instead of onRendered().
  • For Excel text columns were the the max character width is less than 20 an extra 2 pixels of space will be added so content better fits.
• I18N update
  • Framework Plugin ~/js/plugins/i18n.js
  • Web Component ~/js/web-components/i18n-service.js
  • Added ability to find and replace i18n keys inside of an attribute string by using syntax [[key]]
    • Example data-export-file-name="[[Countries]].xlsx" data-i18n-attr="data-export-file-name"
    • Previously both Countries and Countries.xlsx would have had to be defined for each language
    • Now only Countries has to be defined
    • For Vue apps this applies to the v-i18n-attr directive

DataFormsJS v5.12.1

• Excel Export (Web Component and Framework Plugin)
  • Default data-worksheet-name to data-export-file-name excluding file extension .xlsx if the attribute is not included
  • Trim spaces for text fields
  • Set header style (gray fill color, bold, etc) only on the cells used rather than the entire row
• CSV Export (Web Component and Framework Plugin)
  • Trim spaces for text fields

DataFormsJS v5.12.0

• Add Excel Export functionality
  • Web Component:
    • ~/js/web-components/export-to-excel-service.js
    • https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/export-to-excel-service.js
  • Framework Plugin:
    • ~/js/plugins/exportToExcel.js
    • https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/exportToExcel.js
  • Both Web Component and Framework Plugin have the same behavior
  • Exports happen directly in the browser through JavaScript and no server-side calls are made which makes the export/download appear almost instantly to the user.
  • The script uses the external library ExcelJS and the first time the user exports an Excel file this service will download ExcelJS from a CDN. The generated Excel file contains a fixed header row using a gray and bold style and a filter set. The width of columns is based on the data. ExcelJS has many formatting options so if you need something similar or a custom version of this script then this file provides a good starting point for custom Excel Development.
  • https://github.com/exceljs/exceljs/
• Update CSV Export to export only visible rows by default
  • A new HTML attribute [data-export-all] was added to always export all rows regardless of filter.
• Add and updated Examples for this:
  • Log Demos
    • https://dataformsjs.com/examples/log-table-vue.htm#/10
    • And all other Log demos
  • New Export Table Demo - Web Components
    • https://dataformsjs.com/examples/export-table-web.htm
    • ~/examples/export-table-web.htm
    • https://github.com/dataformsjs/dataformsjs/blob/master/examples/export-table-web.htm
  • New Export Table Demo - Framework
    • https://dataformsjs.com/examples/export-table-js.htm
    • ~/examples/export-table-js.htm
    • https://github.com/dataformsjs/dataformsjs/blob/master/examples/export-table-js.htm
• Updated Framework dataBind plugin to bind global window.* variables for a basic webpage if not using SPA
• Updated Framework Control data-table to not show an error when an empty table is displayed without data-bind

DataFormsJS v5.11.0

• Updated DataFormsJS Framework to support JavaScript classes
  • Originally the DataFormsJS Framework was designed and developed prior to ES6 being supported among Web Browsers. Because of this custom app code was designed around ES5. This update allows for custom app code (Pages and Plugins) to use classes rather than objects which allows for modern style JavaScript development.
  • Functions updated and added for the main App object:
    • https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js
    • app.addPage()
    • app.addPlugin()
    • app.getClassFunctionNames() - New function
  • Bug fix with Chosen Plugin for IE
    • https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/chosen.js
  • New class version of the core jsonData page object:
    • js/pages/classes/JsonData.js
    • All variables and functions from the original file exist in the new one. The purpose of the new file is so that an app can extend it for custom page logic when defining pages as ES6 classes rather than ES5 objects.
  • Replaces all occurrences of String.prototype.substr() with String.prototype.substring(). IDE's such as VS Code show substr() as depreciated because it is a non-standard function.
  • Updated package.json to use the latest and specific versions of @babel/standalone, terser, and uglify-js for the build process. This makes the build process work across systems as expected.

  // Framework updates to support Classes
  
  app.addPage('name', class Page {
      onRouteLoad() {}
      onBeforeRender() {}
      onRendered() {}
      onRouteUnload() {}
  })
  
  app.addPlugin('name', class Plugin {
      onRouteLoad() {}
      onBeforeRender() {}
      onRendered() {}
      onRouteUnload() {}
  })
  
  class MyPage extends JsonData {
      onRendered() {
          console.log('MyPage.onRendered()')
      }
  }
  app.addPage('MyPage', MyPage);

DataFormsJS v5.10.6

• Updated jsxLoader to for additional JSX syntax from issues 20 and 21.
  • jsxLoader: Less than operator assumed to be an open element - #20
  • jsxLoader: Uncaught SyntaxError: Unexpected token ',' - #21
  • Special Thanks to Björgvin Ragnarsson (nifgraup) for opening these issues and providing great examples to show the error https://github.com/nifgraup