ISAC 3.1
These release notes include details of the New Features, Product Improvements and Bug Fixes which are added in as part of the 3.1 release. In Zinier, we follow a push upgrade process for releases where the latest versions are all released simultaneously.
Beta Release Date:
General Availability Release Date: End March (tentatively)
Add this ISAC Release Calendar to your Google Calendars to keep track of the product releases
New Features ✨
1. Web Page Builder
A visual drag-and-drop way to create Web Pages within Studio Z
Creating new pages in the Web Page Builder
A new Main Page or Side Panel can be opened in the Web Page Builder using the Actions dropdown in the Add New Web page panel
This will open a blank Web Page in the Web Page Builder as follows. The following screenshot shows the Web Page Builder screen for a Main Page.
The user can drag and drop widgets or components from the left hand side menu to create the Web Page layout. Components on the canvas can be resized using the resize icon on the bottom left corner of the component. They can be rearranged by dragging and dropping them at the desired place as well.
Clicking on a component will open the component menu which will allow the user to perform the following actions on the component
Edit : Opens the Edit component side panel which will let the user configure the JSON for the component
Duplicate : Duplicates the component at the next available place on the canvas
Delete : Deletes the component from the canvas
Component edit menu
Edit component side panel with two tabs
Using existing Pages in the Web Page Builder
An existing Main Page or Side Panel can be opened in the Web Page Builder using the following row action
For Main Pages, the Web Page Builder only supports creating/editing pages that are in the MCL2 format.
Existing non-MCL2 pages can be converted to MCL2 using the Web Page Builder. On clicking the Web Page Builder row action for a non-MCL2 Main Page, the following confirmation box is displayed
Clicking on Ok will trigger the conversion and carry out the following steps
Create a new duplicate page of the given Web Page with the suffix “_sysBkp”
Convert the given Web Page from non-MCL2 format to the MCL2 format
Open the page in the Web Page Builder
This conversion does not affect the functionality of the Web Page in anyway.
Clicking on Cancel will not initiate any conversion action and the user will be taken back to the Web Pages listing screen.
If there are any errors during the conversion process, the user will be prompted with the error and the conversion will not go through. Here is the list of known conversion errors and their causes.
# | Error | Explanation |
1 | Conversion failed as the page definition does not exist | Page definition was not found during conversion |
2 | Conversion failed as the number of components exceeds the allowed limit of 9 | The Web Page Builder has a limit of 9 components and hence a page with more than 9 components is not supported |
3 | Conversion failed as the page does not exist | Page with the given id was not found |
4 | Conversion failed because one or more web page components aren’t configured correctly | The child components in the Web Page have some erroneous configurations |
5 | Conversion failed because one or more web page components are not defined. | One or more child components in the Web Page do not exist in the page definition |
6 | Conversion failed as there was a problem while updating the page definition | Error while duplicating the page or updating the module type of module using the page |
7 | Conversion failed as the user is in Master. Please switch to a branch and try again. | User needs to be in a Branch while attempting the conversion |
8 | Conversion failed due to an unknown error. Please check the page definition and try again | A potentially unexplained error |
When a non-MCL2 page is converted to MCL2, the Module Type for a Module using this converted page is modified to Multi Column. This conversion is necessary without which the converted Web Page will not work with the Module.
Side Panels in Web Page Builder
There are a few features in the Web Page Builder which have a specific behaviour related to Side Panels
Preview
Typically Side Panels are opened with some information passed to them via the Page Context. When we click the Preview button for Side Panels expecting some information, a screen will open where in the user can specify the Page Context using which the Side Panel can be loaded.Hidden components
Side Panels generally have some components that are hidden or displayed based on certain logic. The display of such components on the canvas can be toggled on or off via the Settings menu. When the slider is on, all components with the hidden key set to some logic will be shown; when the slider is off, these components will not be shown.
Web Page Builder toolbar
Web Page Builder toolbar provides the following functionality
Editing the name of the Web Page using the pencil icon on the top left corner
Zoom in capability when on the Design tab
Downloading the PNG/JSON files when on the respective tabs
Real-time preview of the Web Page
The Design tab and the JSON tab on the Web Page Builder are always in sync. The user can start editing a Web Page in the Design tab and continue editing it in the JSON tab without the need to save the Web Page.
MCL2 Main Pages
Side Panels
2. Advanced JSON Editor
The Web Page Builder now comes with an Advanced JSON editor which can be accessed via the JSON tab on the Web Page Builder canvas
The Advanced JSON editor provides a code view and a tree view for better editing and navigation of the JSON code.
Additionally, it provides standard code editing capabilities such as
Formatting
Minifying
Expanding the tree view
Collapsing the tree view
Sorting the tree view
Searching
Undo/Redo
The Advanced JSON editor is also available in the Mobile Page Builder
3. Form View for Data grid
The Form View for Data grid provides a low-code way to configure the Data grid component in the Web Page Builder.
This View can be accessed via
Component menu for data grid on the Web Page Builder canvas
Double clicking the Data grid component on the Web Page Builder
The Form View consists of the three tabs as follows
General tab
Lets the user configure the basic details such as Name, Description, Header and Subheader
The Actions section on the Form View lets the user add Actions to the Web Page definition. These actions can then be used for buttons or row actions in the data grid or across any other components on the Web Page
The Header Buttons sections lets you add buttons to the data grid and assign actions to them
Additionally, the empty state icons and text for scenarios where the data grid is empty or search results are empty can also be configured in this tab
Data Config tab
Lets the user choose between a Query or a Workflow as a data source for the data grid.
From a given Query, the user can choose the columns to show in the datagrid, set the properties for these columns and add row actions to the data grid.
From a given Workflow, a user needs to enter the apiResponseObject, contextVar, inputVar and apiResponseParams in the JSON format. Additionally, the user can setup the columns to show in the datagrid, set the properties for these columns and add row actions to the data grid.
JSON View tab
The JSON tab carries the complete JSON definition for the data grid. The JSON tab and the other two tabs are in sync with each other with respect to the configurations being done.
4. UI Alignment across Web Page Builder & Mobile Page Builder
The UI for Mobile Page Builder has been aligned with that of the Web Page Builder to drive towards a uniform UX for the Builders in Studio Z.
This change does not impact any existing functionality.
5. In App Help
The ability to provide guidance to the Field Engineer to efficiently fill out the Task Details is a key driver to increase productivity. With In App Help, ISAC now allows Solution Developers to define contextual help tooltips which can provide guidance to the Field Engineer.
The ability to specify tooltip in a language that is favourable to the technician was a key feature that the component supports. The tooltip is supported in two modes - An interactive tooltip which is designed to show information when a user interacts with the help icon. A static tooltip, on the other hand, is shown on screen permanently.
In addition to the language, the icons used in the tooltip are configurable by the Solution Developer.
In 3.1, we have supported this feature for Segment, Data Grid and Card components on Mobile Projects. Support for additional components will be introduced as a part of 3.2.
Configuration Code
"helper": {
"placeHolderIcon": true,
"type": "tooltipicon",
"content": [
{
"actionText": "Continue",
"dismissIconUrl": "",
"description": "Ensure to collect Site Admin signature.",
"title": "Signature Guidelines"
}
]
}6. Contextual Messaging
Continuing our efforts from the ISAC Web 20.10, we have improved the user experience on mobile by enabling features such as multi-user chat, user search, offline messaging and real-time push notifications for mobile users.
There are no additional configurations or changes required to enable this feature on the mobile app. For details around enabling contextual chat on Web & Mobile, please refer to the documentation.
Please reach out to @a user in the event that this BETA feature needs to be enabled for your Org.
7. Mobile SDK - Preview
ISAC is designed to provide extensibility of the platform as one of its core values. The Mobile SDK is a continued step in this direction - allow customers & citizen developers to build Field Engineer Experiences using Zinier’s as a platform.
We believe that the proof is in the pudding so we went ahead & refactored the existing Zinier Mobile App to work using the SDK. The app on the outside might look indifferent but the internals are powered by the SDK.
We are working on continually improving the SDK & will present more details in the future. This presentation will include documentation, quick-starter guides & details of how you can leverage the SDK. At this point, the SDK is in a very limited preview as we continue to work on polishing the rough edges.
Please feel free to reach out to @sanjitn on Slack, should you have any questions or thoughts regarding the SDK.
8. Separate Apps Login
Decoupled access for user, studio and admin app.
Code Separation - All applications can be deployed independently.
Org based Url - Environment details not required for user login
App Switcher - App switcher component to allow seamless switching across apps.
Single login app for all production application (login.zinier.net)
URL Reference
Environment | App | Url |
Production Org: bvuat Env: bv | Customer App | |
Admin | ||
Studio | ||
Login | ||
Development Env Org: z2store Env: raman | Customer App | |
Admin | ||
Studio | ||
Login |
9. Layout Key for widget ordering in MCL 2 pages
Layout key can be used to define the page position and size.
Eg. layout = [0,0,2,2] - The position is top left and the dimension is 2X2Currently, platform web is doing this process internally by considering "S" as 2, "M" as 4 etc.
10. Store user’s default locale on login
Save preferred language in user preferences table to enable FSE/Solutions to use the preferred locale in workflows and notifications.
{"landingPage":"ZSolutionBuilderApp",
"userLocale":"en-us"}Jira Reference: ZPW-1546
11. Events Orchestrator
Events orchestrator enables interactivity between widgets and components in MCL pages. Events emitters and listeners have been added to component definitions which enable solution developers to create interactive pages.
In 3.1, events orchestrator has been enabled for the following components only:
Data grids
Bar chart
Pie chart
Map widget
Produce | Payload Type | Consume | Payload Type | |
Pie Chart | segmentSelected | expression | filterApplied | expression |
segmentReset | expression | filterReset | expression | |
filterApplied | expression | dataChanged | message | |
filterReset | expression | |||
Bar chart | barSelected | expression | filterApplied | expression |
barReset | expression | filterReset | expression | |
filterApplied | expression | dataChanged | message | |
filterReset | expression | |||
Datagrid | filterApplied | expression | filterApplied | expression |
filterReset | expression | filterReset | expression | |
rowsSelected | array | rowsHighlighted | expression | |
rowsReset | message | rowSelected | array | |
Map widget | iconSelected | array |
While configuring the components, the solution developers only need to add the events listeners.
The JSON should include
producerId: Widget/component from which produces the event
eventId: Name of the event to be consumed. Can be filterApplied, rowsSelected etc
consumerEventId: Action on the current component. Can be rowsSelected, iconSelected etc.
The Payload type for emitters and listeners should be the same.
The snippet below listens to the icon selected event from the map and selects the corresponding rows in the data grid
"eventListeners": [
{
"eventId": "iconSelected",
"consumerEventId": "rowsSelected",
"producerId": "mapQuery"
}
],Improvements đź›
1. Primary Action on Nav List
With a focus on improving usability on the mobile app, ISAC now allows solution developers to define and label actions on the navigation list. In addition to being able to specify a label, it is now possible to specify a parameter to invoke an immediate sync cycle.
Configuration Code
"footer": {
"leftButton": {
"id": "aFootLeft",
"title": "Back",
"enabled": false,
"isSyncNow": true
},
"rightButton": {
"id": "aFootRight",
"title": "Next",
"enabled": "@js.proceedToNextPage",
"isSyncNow": true
}
}2. Offline Sync - Improvements
As part of our ongoing effort to optimize the sync flows and improve user experience, we have separated the data sync cycles into Transactional (changes frequently) and Metadata (changes less frequently) and ensured that the triggers for the two are handled as well.
Transactional data is received on the App as part of Task data comes through Input Var or Workflows
Ensure Metadata comes through page definition or workflow data
When there is a metadata update then the user gets a popup informing them about the change
Clicking on OK confirms and updates the data on the app
User can not proceed without first making changes to the metadata because it can potentially change the data on which he/she works. Ensure after logout or refresh etc user has to work on the updated metadata
Do note that this is an enhancement of the internal mobile logic and no changes are required from mobile solution developers in order to see these sync enhancements.
For more information on these offline sync improvements, refer to the documentation here.
Jira Reference: ZMAND-2250, ZMAND-2384, ZMIOS-1609
3. Geocheck-in component
The Geocheck-in component now supports a configurable radius parameter. The component previously defaulted to a radius of 1km for check-in. The configuration allows you to specify both the value of radius & the a metric value for the radius. The metric value (radiusUnit) supports “km” & “meter” as valid values.
{
"startColumn": 0,
"endColumn": 11,
"index": 5,
"type": "geocheckin",
"title": "{%checkIn}",
"required": 0,
"id": "geocheckinComp",
"value": "@pageContext.checkinLatLng",
"radius": 50,
"radiusUnit": "meter",
"lng": "@pageContext.longitude",
"lat": "@pageContext.latitude"
}4. Location Permission - Compliance Update
In Feb 2020, Google announced that it is necessary for publishers to provide additional justification to Google & to AppUsers when the application accesses the device’s location frequently (read the official communication here). This policy was enforced beginning 30 September 2020 for all mobile apps on the Google PlayStore. All apps are required to be compliant with this policy before 29th March 2021.
Since Zinier’s Android mobile app currently leverages the user’s location - a data point that falls under the purview of this policy change, we provided a prominent in-app message explaining the business need of the location data.
5. API Documentation - Stoplight
6. Improvements to 2 Factor Authentication
Limiting OTPs generated
Expire OTPs after a certain duration.
Improvements to SMS and mail templates
Ability to lock a user post OTP attempts threshold.
7. New APIs
APIs to add indexing for system tables
8. Auth0 management API token implementation
For more information, refer to Auth0 - Implementation & POC - SSO & Sharepoint API
9. Improvements to the Scheduler
New task assignments need to consider current location of technician and task should be inside the proximity radius of the scheduler.
Distribute the tasks among all the available technicians on a daily basis to utilise all the available technicians.
10. Store user’s default locale on login
Save preferred language in user preferences table to enable FSE/Solutions to use the preferred locale in workflows and notifications.
Jira Reference: ZPW-1546
{"landingPage":"ZSolutionBuilderApp",
"userLocale":"en-us"}11. Component Filter
UI and functional revamp of the current dynamic filter component. The objective is to remove the friction in the application of dynamic filters and make it more user-friendly.
UI Redesign: In page filter application instead of side-panel
Functional enhancement: Introduce option of AND and OR while applying filters
Filters: All the current applicable filters in dynamic filters, including list filters
Component filters are available for MCL and non-MCL pages. Workflow is also supported.
Sample JSON
enableComponentFilter:true
"dynamicFilter": {
"mainstatus": "string",
"workorderPlannedDate": "Date",
"workOrderPriority": "numeric",
"modifiedDate": "Date",
"requestDate": "Date",
"promisedDate": "Date"
}Refer to this document here for more information on Component Filters.
Jira Reference: ZPW-1689
12. Change Password
Users can change password from Account Settings section
Jira Reference: ZPW-1285
13. MCL 2.0 - Customizable views
Web users can customize their MCL 2 pages by resizing, rearranging and hiding/unhiding widgets on the page. Users can create multiple views and rename and save them.
For enabling create and view edit layout, the user has to provide the key below in the page def.
editMCLEnable: trueRefer to this documentation here to know more about MCL2.0.
14. Auto Refresh for Datagrids
DataGrids can be refreshed at regular intervals to ensure the web users are viewing the latest data.
Widget specific refresh timer can be set through page definition
The last updated time will be available in the datagrid header
This is available only for single grid pages
Sample UI
Implementation Details
2 keys can be used to implement auto refresh in datagrids:
For default auto refresh every 15 mins
autoRefresh:15For setting specific refresh time
autoRefreshTime : 515. Clear all notifications
Users can delete all the notifications on performing a bulk delete.
Jira Reference: ZPW-1562
16. Moment Library support
Moments library can be used through page definition.
"checkMoment": function(pageContext) {pageContext.currentDate = moment().format('MMMM Do YYYY, h:mm:ss a');}Jira Reference: ZPW-1720
17. Dynamic filters Enhancement - List filter support
"List filter" support had been added to all the data grid and chart widgets fetching data from workflow / query.
This is available for MCL 2.0 pages only.
Jira Reference: ZPW-1456
18. Map Component - Enhancement
Map component now shows individual pin details even when the number is > 5
Jira reference: ZPW-1987
19. Deactivated users shown in a separate tab
Deactivated users are now shown in a separate tab in the users section