Integration Made Easy
What’s new in 4.14
The low-code integration platform integrationmadeeasy.com has taken a big step forward with the release of 4.14. The main change was the move of the frontend to the React Framework. React is a powerful JavaScript library created by Facebook for building user interfaces, allowing us to create a more dynamic and interactive platform.
Migrating to React took the dev team a lot of work and took almost a year of development. Of course, the goal was not just to move to another framework, but to enable new functionality. This blog highlights the new features we have implemented since the migration.
What’s new?
Look & feel of the designer
Designing flows has seen the biggest change in 4.14. The main idea was to keep the look consistent with the old designer, but to change the “feel” to behave more like a desktop application.
We did this be aligning the flow designer with other graphical designers such as draw.io. Now, most of the actions can also be done more quickly with keyboard shortcuts.
Available shortcuts:
- Undo and Redo (Ctrl + Z / Ctrl + Y)
- Cut, copy and paste (Ctrl + X / Ctrl + C / Ctrl + P)
- Duplicate (Ctrl + D)
- Remove (Ctrl + Backspace or Delete)
- Save (Ctrl +S)
All of these actions are also available from the right-click menu:
Another change is that the canvas is now boundless. This means that you don’t have to design the steps of a flow under each other, but you have no limits to create flows horizontally or vertically.
One last change to highlight is the canvas menu, which provides additional features such as zooming or working in full screen.
It’s recommended to play a bit with the new functionality to get familiar with the new look & feel.
User preferences
As mentioned before, the look of the Flow Designer hasn’t changed that much. That’s not to say that nothing has changed. First, a minimap is shown by default, and second, the lines used to connect components are curved by default.
Most of these settings are a bit personal, so we have introduced user preferences. To change a preference:
1. Go to your account name and select “Edit preferences”
2. Change the preference
There are options like showing straight lines (to keep the old behavior), to disable the minimap or put the minimap on another place on the canvas.
For experienced users, there is also the option to show less notifications.
Better import
Importing flows from a file became faster and easier.
The old way:
The new way:
- Choose the flow file to import first instead of the name of the flow.
- The name of the flow gets automatically filled based on the filename (This can always be changed manually).
- Select the group of the flow.
Other changes include the styling of the file selection buttons, a notification if the flow name is too long, and support for importing a flow into a tenant that does not yet have any flows.
Variable naming
The platform has three types of variables:
- Global variables
- Flow variables
- Header variables
This naming was simple and indicated at what level it was used, so global variables were used throughout the application, a flow variable within flows, and headers within messages.
However, this was a bit of an oversimplification. Technically, they were used in very different ways:
- Flow variables are static variables that are set when a flow is created (and cannot be changed while the flow is running).
- Header variables are dynamic variables that are set in the headers of a message and can be changed within the running flow (for example, using the SetHeaders component).
- Global variables are dynamic variables that can be used independently of a message for any tenant. They are stored in a separate database outside the flow.
To reflect better what the role of each type of variable is, they were renamed.
Easier adding headers, properties, and variables
When configuring a step in a flow, it’s possible to use headers, properties, and variables.
This is powerful functionality, but it was not always clear where which type can be used and what the syntax is needed. In 4.14.3 we added new icons that show which type of variable can be used where.
If the # icon is shown on the field label, then a flow property can be added. Here, the property can be selected from a list.
If the $ icon is available, then a message header can be added. They are automatically added in the correct syntax.
If the @ icon is available, then a tenant variable can be used. They are automatically added in the correct syntax.
This functionality also works in tables, like in the SetHeaders component:
Thanks for checking on the highlights of 4.14.x. Check the release notes for more details:
