WaveMaker 8.3.0 - Release date: 13 September 2016
- Here is a summary of key features, known issues and bug fixes offered in 8.3 Release
Highlights
Canvas Enhancements
- Widgets come with a drag-handle making it easier to move them around the canvas. This drag-handle is displayed when the widget is selected as a blue bar at the top. Note: You have to use the drag-handle to move the widgets, you can no longer select the entire widget.
- While dragging the widget and before the drop, the real estate needed for the widget is displayed.
- For the Grid Layout, Button Group, Nav and NavBar widgets the following behavior has been enhanced:
- Use Left-Arrow or Right-Arrow keys (or icons on the drag handle) to select the adjacent widget. When there is no adjacent widget, then the left or right arrow keys selects the parent widget.
- CTRL + Left-Arrow or CTRL + Up-Arrow (cmd button in the case of Mac) swaps the selected widget with the widget to the left and CTRL + Right-Arrow or CTRL + Down-Arrow (cmd button in the case of mac) swaps the selected widget with the widget to the right.
Data Table
- The new Quick Edit layout has been introduced in this release, to enable quick editing of rows in a Data Table using keyboard events. For example use tab key to edit/save rows and add new rows; arrow keys to navigate between rows; the esc key to cancel the changes.
- Searching & filtering data based on multiple columns can now be enabled in Data Table using the Filter Mode property. In this release in addition to search, Multi-column option enables filtering data based on selected columns.
- Table Actions can be made accessible using Shortcut Keys. Each of these Table Actions can be assigned a key from the Shortcut Key property. These keys, when used in conjunction with the key code (Alt in Windows & Linux; Alt+Shift in Firefox; Control+Alt in Mac; etc.), will focus the Action. In case the action is associated with a Button widget, the shortcut key will trigger the action.
- Up and down arrows can be used to traverse the rows of a Data Table.
List/Card Widgets
For List and Card widgets the following functionality has been added:
- In the previous releases, List & Card widgets were used to display a list of items from the underlying data source. In this release, form widgets can be added to a List or Card, enabling you to design an editable List or Card. For example, building a To Do List with the capability to modify and save the pending tasks.
- When a form widget is placed within list template, at design time to allow binding to the current item of the list, currentItem and currentItemWidgets options are introduced.
- During app runtime when the end user selects a list item, selecteditem from the binding tree for List widget gives the item selected by the user. In addition to this, the selectedItemWidgets option has been introduced within List’s widget tree, which returns the available widgets within the List item selected by the user.
- When using the Multiselect option of List, the selectedItemWidgets would return an array of items, thus enabling processing of the multiple items as a group.
- When Group by is set for a List/Card widget:
- Each List Group can be collapsed by setting the Collapsible property. Thus if you are displaying a list of employees grouped by Department, then a group header will be displayed for each Department. This header when clicked will display the employee list for that Department. By default, each group is expanded.
- Count of list items within the group can be displayed on the group header by setting the Show count property. This displays the item count for each group in the header, without the need for writing additional code or query.
- Up and Down arrows can be used to traverse the list items. Pressing enter key on any focused item will select the item.
Security
Apps built using WaveMaker can be configured to prevent XSS (Cross-site scripting) and CSRF (Cross-Site Request Forgery) attacks which are listed in the OWASP top 10 security vulnerabilities.
XSS flaws occur whenever an application takes untrusted data and sends it to a web browser without proper validation or escaping. WaveMaker supports three strategies to prevent XSS attacks – none with no prevention, encode wherein no script will be executed; white list filtering based upon policy files
Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious website, email, blog, instant message, or program causes a user’s web browser to perform an unwanted action on a trusted site for which the user is currently authenticated. In WaveMaker apps, CSRF token is auto-generated and can be applied to all API calls.
Database
Unique Constraint can be assigned to one or more columns in a database table to enforce uniqueness of a field in a database table. For example, email id in a customer database.
The unique column can be used in establishing one-to-one foreign key relationships.
Server side properties for CRUD operations, such as Last Modified By, Created By for database columns, can now be set to Logged-in User Id or Logged-in User Name. This will enable you to capture the user details from the logged in user’s context from the server itself.
Variables
- Variable refactoring has been enhanced to update every widget, binding, expression and JavaScript occurrences, whenever the variable’s name is changed.
- The setting of Order by fields for a Live Variables has been made easy with the new interface. Now you can select the fields to which you want the data to be ordered from a drop-down list. By default, the order is set to descending which can be changed by a simple click operation.
- The first and last record of the result dataset returned by the Live Variable can be accessed using firstRecord and lastRecord option for binding.
- In an effort towards uniformity and standardization the following methods for variables have been renamed:
The older method names are deprecated and hence current projects using the same will continue working as expected.
Variables
1. Live Variable
- To update the Variable’s dataSet with new data by making a call to the Live DataBase Service.
| Method Name | |
|---|---|
| Old | $scope.Variables.liveVariable1.update() |
| New | $scope.Variables.liveVariable1.listRecords() |
- To make a call to the Live Service to insert a new record into the source table.
| Method Name | |
|---|---|
| Old | $scope.Variables.liveVariable1.insertRecord() |
| New | $scope.Variables.liveVariable1.createRecord() |
2. Service variable
To update the Variable’s dataSet with new data by making a call to the target service
| Method Name | |
|---|---|
| Old | $scope.Variables.serviceVariable1.update() |
| New | $scope.Variables.serviceVariable1.invoke() |
3. Timer Variable
To invoke the timer variable.
| Method Name | |
|---|---|
| Old | $scope.Variables.timerVariable1.fire() |
| New | $scope.Variables.timerVariable1.invoke() |
4. Navigation Variable
To invoke the navigation variable.
| Method Name | |
|---|---|
| Old | $scope.Variables.navigationVariable1.navigate() |
| New | $scope.Variables.navigationVariable1.invoke() |
5. Notification Variable
To invoke the notification variable.
| Method Name | |
|---|---|
| Old | $scope.Variables.notificationVariable1.notify() |
| New | $scope.Variables.notificationVariable1.invoke() |
6. Login Variable
To invokes the login variable.
| Method Name | |
|---|---|
| Old | $scope.Variables.loginVariable1.login() |
| New | $scope.Variables.loginVariable1.invoke() |
7. ogout Variable
To invokes the login variable.
| Method Name | |
|---|---|
| Old | $scope.Variables.logoutVariable1.logout() |
| New | $scope.Variables.logoutVariable1.invoke() |
Enhancements
- Mobile App Developers can now build hybrid mobile apps, which can integrate directly with 3rd party APIs developed in any platform i.e..NET, PHP, Java etc. A native mobile installer can be created without the need to deploy a backend service component on the web server.
- Binding Dialog has been enhanced to:
- show data type information for each node
- show the source and target data type information
- allow binding always and show a warning message in case of incompatibilities
- From the on Change event for Form widgets, you can access the changed value using newVal and old value using oldVal.
Sample:
$scope.select1Change = function($event, $isolateScope, newVal, oldVal) { if (newVal === 'test1') { doSomething(); } };
$scope.select1Change = function($event, $isolateScope, newVal, oldVal) {
if (newVal === 'test1') {
doSomething();
}
};
oldVal and newVal can be an object depending upon the nature of the data source underlying the widget.
- For a Chart widget Title, sub-heading and icon can be set. #docs
- Grid Layout functionality has been enhanced to allow auto-width adjustment when adding new columns in a row. The sum of all the column widths in any row is maintained 12. #docs
- Live Form Actions can be bound to events of widgets outside the LiveForm. For example, Live Form actions like reset, save etc. can be triggered by an on-click event of a button. #docs
- Fields in a Form widget can be mapped to widgets just like in a Live Form.
- Project Changes Dialog allows you to resolve conflicts or pull changes at the time of project load for projects under VCS. It also helps you to update your application’s generated code in case of changes due to platform upgrades or database corruption.
- Events Data property of a Calendar Widget can be used to set the Title, Description, Start Date, End Date, Style Class of a Calendar event. You can also specify if an event is an allDay event or not.
- Mobile Apps security enabled: if the user exits the app without logging out, and re-launches the app, the user will be redirected to the appropriate Landing Page if the session is valid, else the user is redirected to Login page.
Known Issues
This release has introduced some changes to the REST APIs in the application’s generated code. Due to this, when you open your existing projects, you might see Project Changes dialog prompting you to UPDATE your app’s generated code. You might also see an error message to this effect. Please follow the recommendations to update the app code. This will also fix the error messages. This is a one-time process.
The class naming strategy for Database Tables and Columns containing the Java Keywords have changed.
For example:- a TABLE with Name “CASE” (any Java keyword) used to create a model class called “_Case” prior to 8.3, but now it creates class named “Case”,
- a TABLE named “PROCESS” (any Java class in the default package i.e java.lang) used to create a model class called “ProcessTable”, now it creates “ProcessEntity”.
Once you update the application’s generated code as per the recommendations, some bindings associated with such tables might cause issues. Please re-look at the associated bindings and correct them if needed.
Technology Stack
UI Framework
| Description | JS Library | Version | |
|---|---|---|---|
| JS Binding | jquery | 2.2.3 | |
| jquery-ui* | 1.11.4 | ||
| MVC Framework | angular | 1.5.5 | |
| angular-ui-bootstrap | 1.3.2 -> 2.0.1 | ||
| Editor | ace-editor | 1.2.2 | |
| Styles | bootstrap | 3.3.6 | |
| Charting | d3 | 3.5.17 | |
| nvd3 | 1.8.3 | ||
| CORS support, prefabs | xdomain | 0.7.5 | |
| Built-in functions | lodash | 4.12.0 | |
| Device support, gestures | hammerjs | 2.0.8 |
*Optimised jQuery-UI library excluding unwanted components like accordion, datepicker, dialog, progressbar, spinner, tabs, and all jQuery-UI Effects.
Back-end Frameworks
| Description | Java Library | Version | |
|---|---|---|---|
| Spring Framework | 4.2.o | ||
| Security framework | Spring Security | 3.2.3 | |
| Java JSON utilities | Gson | 2.2.4 | |
| DB Persistence library | Hibernate | 4.3.11 | |
| Sample database | HSQL | 2.3.3 | |
| JSON library | Jackson | 2.6.3 | |
| Logging framework | SLF4j | 1.7.12 | |
| Http client library | HttpComponents | client-4.3.3 -> 4.5.2, core-4.3.2, mime-4.2.5 -> 4.5.2 | |
| REST API annotations | Swagger | 1.3.10 | |
| Logging framework | Log4j | 1.2.17 |
Run Time Environment
| Description | Version |
|---|---|
| JDK | 7.0 |
| Tomcat | 6.0 |