DataFormsJS v4.6.0 Release Notes
Release Date: 2020-09-29 // over 3 years ago-
๐ Release Overview
- ๐ This release contains many small updates, in general:
- Framework Entry Form Scripts now work with Vue. The existing Handlebars demo has been updated and a new Vue demo created.
- Vue 3.0.0 has been confirmed to work with DataFormsJS. No changes needed from previous release, however some new functions are available for working with Vue.
- Image Gallery controls are updated for improved User Experience (UX) and better Accessibility on Desktop Computers.
- Image Gallery now includes support for next-gen images (AVIF and WebP)
๐ Release Details
- โ Added features and additional examples pages for Vue
- All Handlebar Examples now have a corresponding Vue Example
- All Standard Framework files now support Vue
- Originally DataFormsJS was created to use Handlebars so until this release not all Framework scripts worked with Vue
- ๐ Confirmed Vue 3.0.0 Release works with the Framework, previously earlier Beta and Release Candidate versions were confirmed.
- https://www.dataformsjs.com/unit-testing/vue-3
- Most pages currently point to the latest release of Vue 2
2.6.12
so that they work with IE and older mobile devices
- โ Added Vue support for the Framework
entryForm
page object and related plugins- Both Vue 2 and Vue 3 are supported
- Scripts Updated:
js/pages/entryForm.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/pages/entryForm.jsjs/plugins/listEditor.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/listEditor.jsjs/plugins/clickUrlAction.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/clickUrlAction.js- New Demo is available for Vue, previously these scripts only worked with template engines such as Handlebars.
- https://www.dataformsjs.com/examples/entry-form-demo-vue.htm
- Added support for
hidden
attribute on theentryForm
page object when usingclass="show-after-form-load"
elements. Peviouslystyle="display:none;"
was required on the element.
- โก๏ธ
entryForm.js
- Additional Updates:- Improved IE 11 support so that
null
values to not get displayed as"null"
strings in input elements when adding new records. - Replaced Internal Model Prop
textMessages: { savingRecord: 'Saving Record...', deletingRecord, recordSaved, recordDeleted, confirmDelete, }
withsavingRecordText: 'Saving Record...'
and related properties so that apps can overwrite the default action text from an HTML template.
- Improved IE 11 support so that
- โ Add Vue Directive
format-yes-no
tojs/extensions/vue-directives.js
- If the case-insensitive value to bind is one of the following
[true, 1, yes]
thenYes
will be displayed otherwiseNo
will be displayed.
- If the case-insensitive value to bind is one of the following
js/DataFormsJS.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js- Added new helper functions for working with Vue
app.isUsingVue()
app.isUsingVue2()
app.isUsingVue3()
- These function would generally be used by page objects, plugins, etc that need to support both Vue and other templating engines such as Handlebars.
- Added a helpful
console.error()
message for developers if adata-lazy-load="name"
script was not found - Converted two
console.info
statements toconsole.warn
js/extensions/events.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/events.js- Converted two
console.log
statements toconsole.error()
statements and added an additionalconsole.error()
. These provide helpful messages to developers.
- Converted two
js/extensions/validation.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/validation.js- Added seperate text message for integer validation:
app.validation.text.typeNumberInt = '[{field}] needs to be entered as a integer.'
. This can be overwritten by an app. - Bug fix were
data-type="int|float"
would returntrue
for invalid numbers whenparseInt()
andparseFloat()
failed. This didn't affect the numbers sent to the server and only client-side validation messages.
- Added seperate text message for integer validation:
- โก๏ธ Entry Form and List Editor Updates for IE
- Example Page was previously broken on IE due to
js/pages/entryForm.js
being loaded without a polyfill forObject.assign
. Usingapp.LazyLoad
in the page HTML fixed the example. They entry form and related code worked with IE, simply the example was not working. - https://www.dataformsjs.com/examples/entry-form-demo-hbs.htm
js/plugins/listEditor.js
- Fix so that checkbox and radio changes would be tracked. This affected IE 11 because IE 11 was not trackingelement.oninput
for checkboxes and radio inputs.
- Example Page was previously broken on IE due to
- โ Added Framework Plugin for pickadate.js - https://amsul.ca/pickadate.js/
js/plugins/pickadate.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/pickadate.js- Example is included on the entry form demos
- ๐
js/plugins/filter.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/filter.js- Added new attribute
data-filter-search-text="{{search text}}"
that can be used to specify the text that should be filter rather than the element'stextContent
and<input>
elements - Example usage is on the main site's quick reference page. Previously all text was included in the filter which resulted in too many code templates being returned.
- With the new feature only the Title text is included in the feature which results in a better user experience (UX).
- https://www.dataformsjs.com/en/quick-reference
- Added new attribute
- ๐
js/web-components/data-list.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/data-list.js- Added support for
index
enumeration variable in the rendered template. - This can be used to add a
tabindex
to the rendered HTML or used with other actions needed by the page. - If the list item object already contains and
index
property it will be used instead. - Template errors will now show on screen
- New attribute
error-class
that allows for control over how errors are displayed. If not included they will use a basic style (white text, red background, margin, padding). - Updated Example: https://www.dataformsjs.com/examples/web-components-data-list.htm
- Added support for
- โก๏ธ Image Gallery Updates
js/web-components/image-gallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/image-gallery.jsjs/plugins/imageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/imageGallery.jsjs/react/es6/ImageGallery.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js- Update for improved User Experience (UX) on Desktop Computers:
- All updates are for better Accessibility so that the image gallery can now fully function from either the keyboard or a mouse.
- Added ability to show the overlay from a press of the spacebar on the keyboard. Previously a mouse click was required to show the overlay.
- Added
Back
andForward
Buttons to the overlay that appear by default for Desktop computers. Previously navigation only worked through the keyboard left and right arrow keys. Back
andForward
Buttons will only show by default on desktop computers when the user clicks the thumbnail image. By default on Mobile devices (determine fromuserAgent
) or if using the keyboard spacebar to start the overlay the buttons will now show. The reason is that the buttons can overlap the image so if using a keyboard or swiping on mobile they are not needed (or desired).Back
andForward
Button visibility and other features can be easily changed through CSS from the page.- Added support for for next-gen images (AVIF and WebP)
- See DataFormsJS examples for usage
- Image Format Details:
- ๐
js/plugins/modalAlert.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/modalAlert.js- Removed un-needed
console.log
statement that was left from development
- Removed un-needed
- โ Added example with code comments for documentation of using CSP (Content Security Policy) with DataFormsJS for the examples when running from localhost
- ๐ Fix Date Formatting in templating functions to use no Timezone with a basic date format
YYYY-MM-DD
.- Previously the value would be parsed from
new Date(value)
which resulted in local timezone conversion depending on browser. - Updated:
- React Class
Format.date()
-js/react/es6/Format.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/Format.js - Handlebars Helper
formatDate
-js/extensions/handlebars-helpers.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/handlebars-helpers.js - Vue Directive
v-format-date
-js/extensions/vue-directives.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/vue-directives.js
- Previously the value would be parsed from
- ๐
js/plugins/filter.js
- Improved filter selection for tables that contain
<input> <select> <textarea>
in the cell nodes
- Improved filter selection for tables that contain
- โก๏ธ Click To Highlight Plugin and Related Updates
js/plugins/clickToHighlight.js
- Prevent highlight changes when a<a>
element is clicked. The reason is because it causes a quick flash of the highlighted style on the row before the page changes. Since the user is clicking to another page rather than highlighting a row the style change is not desired.js/web-components/data-table.js
- Added similar functionality using new attributehighlight-class
.- React Places Demos have been updated with similar functionality using basic JavaScript functions.
- โก๏ธ Updated Places Demo App for Web Components and plain JavaScript version to include custom JS code on the main page to show how Date and Number formatting can be handled
- ๐ This release contains many small updates, in general: