Introduction
The integration flow editor in SAP Cloud Integration's Web Application is revamped and improved with lot of usability features to enable the integration developers to work with it more efficiently.
In this blog, I will give a short overview of each of these new features.
Improved Visualization
As soon as you open the integration flow, you will notice the difference of the new editor which is much better look and feel compared to the earlier one.
Image 1: New Integration Flow Editor
Image 2: Old Integration Flow Editor
Zoom-in & zoom-out
In case you have a very large and complex integration flow, you can use the zoom-in and zoom-out feature to move to a particular part. For zoom, you can use the mouse scroll or use the "+" and "-" action buttons on the right corner of the editor.
Image 3: Zoom-out the integration flow
Image 4: Zoom-in the integration flow
Global View
If you have used the zoom-in or zoom-out on your integration flow and now want to go back to see the entire integration flow in the visible area, you will have to click in the centre of this "Global View" icon.
Image 5: Global view of integration flow
Scrolling or Moving
If you want to scroll or move your integration flow, you can click & press the left mouse button on the empty space and move your mouse. You can also use the left, right, top and down button on this icon (see image below) on the right corner of the editor to also scroll or move.
You can also select multiple components and drag them to move them around.
Image 6: Scrolling & moving your integration flow
Overview Mode
If you have a very large integration flow and want to jump to a particular part of the Integration Flow, you can use the "Overview Mode" button on the right corner of the editor. On click of this button, you get a miniature view of your integration flow and also an option to select a particular area and navigate to that part of the integration flow.
Image 7: Overview mode icon
Image 8: Overview mode open
Visibility of Quick Buttons
In the old editor, the quick buttons to connect, delete or see technical information were made available when you hover the mouse pointer over the component, but in the new editor, you need to select the component to access them
Image 9: Visibility of quick buttons in Edit mode
In the read-only mode, you can access only the technical information quick button, but in the edit mode you will be able to access all applicable quick button on selection.
Image 10: Visibility of quick buttons in Read-only mode
Delete Components
In the old editor, if you had to delete an adapter, you had to select the message flow and click on the delete icon in the palette as there was no quick button available to delete an adapter. But in the new editor, we have now enabled the delete of adapter also via the quick button, which appears on selecting the message flow.
Image 11: Delete as quick button for adapters
You can also select multiple components from the editor and delete them together using the delete icon in the palette.
Image 12: Multi-select and delete
Auto Expand of Pools
If you select a component from the palette and drop it in a pool (Integration Process, Local Integration Process or Exception Subprocess) and if there is not enough space available to accommodate this component, the editor auto-expands the pool and makes enough space for the component.
Image 13: Drag and drop of filter from palette
Image 14: Auto-expand of pools
Minimize & Maximize
With the integration flow editor and the configuration view split in half, it was difficult to scroll down or zoom-out to get a better view of large and complex integration flows.
To overcome this limitation and give the integration developer more space to work either on the integration flow editor or on the configuration view, we have now introduced minimize and maximize action buttons on right top corner of the configuration view.
Image 15: Default view with minimize & maximize action buttons
When the configuration view is minimized, the action buttons available on the toolbar are restore and maximize. Restore brings the configuration view back to the default 50-50 split of integration flow editor and configuration view.
Image 16: Configuration view when minimized
Image 17: Configuration view when maximized
Similar action buttons will be provided in all the split views that we have in the SAP Cloud Integration's Web Application.
Modelling Constraints
We have also enhanced the modelling constraints (or restrictions) to ensure that you do not model a wrong integration flow. Some examples of modelling constraints are:
Conclusion
In the future increments we plan to continue improving the user experience and provide more features like copy-paste of components, undo-redo and auto-align (pretty print) the integration flow.
Looking forward to your feedback on the new integration flow editor.
The integration flow editor in SAP Cloud Integration's Web Application is revamped and improved with lot of usability features to enable the integration developers to work with it more efficiently.
In this blog, I will give a short overview of each of these new features.
Improved Visualization
As soon as you open the integration flow, you will notice the difference of the new editor which is much better look and feel compared to the earlier one.
Image 1: New Integration Flow Editor
Image 2: Old Integration Flow Editor
Zoom-in & zoom-out
In case you have a very large and complex integration flow, you can use the zoom-in and zoom-out feature to move to a particular part. For zoom, you can use the mouse scroll or use the "+" and "-" action buttons on the right corner of the editor.
Image 3: Zoom-out the integration flow
Image 4: Zoom-in the integration flow
Global View
If you have used the zoom-in or zoom-out on your integration flow and now want to go back to see the entire integration flow in the visible area, you will have to click in the centre of this "Global View" icon.
Image 5: Global view of integration flow
Scrolling or Moving
If you want to scroll or move your integration flow, you can click & press the left mouse button on the empty space and move your mouse. You can also use the left, right, top and down button on this icon (see image below) on the right corner of the editor to also scroll or move.
You can also select multiple components and drag them to move them around.
Image 6: Scrolling & moving your integration flow
Overview Mode
If you have a very large integration flow and want to jump to a particular part of the Integration Flow, you can use the "Overview Mode" button on the right corner of the editor. On click of this button, you get a miniature view of your integration flow and also an option to select a particular area and navigate to that part of the integration flow.
Image 7: Overview mode icon
Image 8: Overview mode open
Visibility of Quick Buttons
In the old editor, the quick buttons to connect, delete or see technical information were made available when you hover the mouse pointer over the component, but in the new editor, you need to select the component to access them
Image 9: Visibility of quick buttons in Edit mode
In the read-only mode, you can access only the technical information quick button, but in the edit mode you will be able to access all applicable quick button on selection.
Image 10: Visibility of quick buttons in Read-only mode
Delete Components
In the old editor, if you had to delete an adapter, you had to select the message flow and click on the delete icon in the palette as there was no quick button available to delete an adapter. But in the new editor, we have now enabled the delete of adapter also via the quick button, which appears on selecting the message flow.
Image 11: Delete as quick button for adapters
You can also select multiple components from the editor and delete them together using the delete icon in the palette.
Image 12: Multi-select and delete
Auto Expand of Pools
If you select a component from the palette and drop it in a pool (Integration Process, Local Integration Process or Exception Subprocess) and if there is not enough space available to accommodate this component, the editor auto-expands the pool and makes enough space for the component.
Image 13: Drag and drop of filter from palette
Image 14: Auto-expand of pools
Minimize & Maximize
With the integration flow editor and the configuration view split in half, it was difficult to scroll down or zoom-out to get a better view of large and complex integration flows.
To overcome this limitation and give the integration developer more space to work either on the integration flow editor or on the configuration view, we have now introduced minimize and maximize action buttons on right top corner of the configuration view.
Image 15: Default view with minimize & maximize action buttons
When the configuration view is minimized, the action buttons available on the toolbar are restore and maximize. Restore brings the configuration view back to the default 50-50 split of integration flow editor and configuration view.
Image 16: Configuration view when minimized
Image 17: Configuration view when maximized
Similar action buttons will be provided in all the split views that we have in the SAP Cloud Integration's Web Application.
Modelling Constraints
We have also enhanced the modelling constraints (or restrictions) to ensure that you do not model a wrong integration flow. Some examples of modelling constraints are:
- Restrict drop of flow steps outside a pool
- Restrict drop of Sender & Receiver system in a pool
- Restrict drop of Local Integration Process in a Integration Process
- Restrict drop of Error Start event in Integration Process and Local Integration Process
Conclusion
In the future increments we plan to continue improving the user experience and provide more features like copy-paste of components, undo-redo and auto-align (pretty print) the integration flow.
Looking forward to your feedback on the new integration flow editor.
- SAP Managed Tags:
22 Comments
