BizTalk360 improved User Experience (UX) and User Interface (UI) in 7.2

Published on : Apr 26, 2014

Category : BizTalk360 Update

Sriram Hariharan


One of the things we are very passionate in BizTalk360 is the user experience. That’s one of the reason we invested heavily last year moving from Silverlight based UI to modern HTML5 based single page interface. Out of the box BizTalk server comes with BizTalk admin console, a standard MMC based snap-in, which is 15 years old technology. One of our key objectives is to provide BizTalk support/admin people  a modern looking BizTalk management web application, with lot of additional functionalities that’s not offered out of the box. You can take a look at our release history to determine the amount to stuff we have added to the product. When the application is growing you need to be super cautious, not to bloat the UI or make it complex for users to consume. We are constantly working on improving it, and we made some huge progress in the 7.2 release.

Refresh Animation

In the previous versions, one of the major concerns was the lack of responsive feedback from the application when the user performed some intensive actions. The application was not consistent in providing the refresh animation, basically it worked well in places where the back-end calls were straight forward (single call). In some scenarios (example application dashboard), where multiple back-end calls  were made, the refresh animation didn’t wait till all the calls were completed. Instead it stopped showing the animation as soon as any one call responded back. This problem was happening in few places in the application, for example, environment dashboard, platform settings, application dashboard etc. We analyzed the complete BizTalk360 application spotting the places where this was happening and now fixed it with a consistent refresh animation. Example: The below screen shows the environment dashboard which display “Loading Dashboard”  text with spinning logo until the complete dashboard elements are loaded properly. Refresh Animation Another improvement we have made related to refresh animation is on drop down lists that loads data from the back-end server. In the previous versions there was no UI clue showing the drop-down is waiting for a back-end call. If the call was quick, you’ll not notice anything, but if the call takes longer then the user will get confused. We fixed this issue across BizTalk360 application, now the user will see a small spinning wheel (as shown below) next to the drop-down when the call is taking longer time. BizTalk360 Query builder refresh animiation

Query Builder open by default

In the previous versions, when the user navigates to a page where a query builder option is present (Example: Message box queries, Tracking data queries, Advanced event viewer, Search artifacts etc), by default we kept the query builder in collapsed state as shown below. Query Builder Closed The idea is to save some screen real estate and we expected the user will go and click the orange execute query button directly. While speaking to customers we realized the users are always expanding the query builder as the first task before they execute, resulting in unnecessary work. So we decided to keep the query builder (across the application) in a opened state by default (refer refresh animation screen shot from previous section), so the user can clearly see what queries they are going to execute, and add additional filters easily.

Knowledge base article icons display

This is one of the classic situation where without proper UI, certain functionality can be pretty useless. BizTalk360 has the capability to attach knowledge base articles to error codes (suspended instances, event viewer events, ESB errors etc), which will help the support person when they see the same exception happening again. The problem with the previous version of the UI is, the KB icon is displayed all the time in the results (whether KB article is present or not),  the user will click on it and if there are no articles it will simply display the message “No KB article for this error”. This was not very productive, instead we improved this functionality (across BizTalk360), the KB article book icon will only be displayed when there is an associated KB article present. This gives a visual clue and BizTalk support person can easily realize there are some solutions available to the problem. In the screen shot below you can see KB icon is only displayed for event ids 8 and 5410 and not for other events like 30012, 7002, 7001 etc knowledge base display

Other enhancements and bug fixes

In addition to the above UI/UX Improvements, we have also done some enhancements and bug fixes to the UI. As a part of the 7.2 release, we organized a ‘Bug Bash’ initiative to find the existing bugs and suggest enhancements to the application.  Some of the key enhancements and bug fixes in 7.2 release are:
  1. Drop down list order: All the drop-down list across BizTalk360 is sorted alphabetically now, previously it was not consistent.
  2. Custom SQL Query permission: After migration from previous version (6.x Silverlight) some of the user access policy and custom SQL permission were not reflected in the UI. On the Settings screen, permission for custom SQL query were not reflected correctly. We have fixed this issue and ensured the data remains the same post migration.
  3. Additional columns for ESB: A new “Exception Message” column has been added in the ESB Exceptions section that lists the exception messages. You can now filter the query expression based on “Exception Message” and “Exception Stack Trace”.
  4. We have disabled alarm mapping view for normal users considering the fact that it contains the ‘Delete’ functionality and you do not want to lose critical information.
  5. Exporting results in CSV format. In couple of screens (Custom SQL Query and ESB exception), we added the ability to download the results in CSV format. We will be bringing this across the board in future versions.
  6. Suspend dehydrated instances: Due to a UI bug, the button was not enabled to suspend dehydrated instances, this one is fixed now.
  7. Default date time: Across the system, due to JSON serialization issue, we were displaying the default date time as 02-01-0001 when there is no specific value for the date time field (null datetime). We have rectified this issue and now system displays an empty value when there is no specific date time value for the field.
  8. Large data set operation: When the user tried to perform operations on large data sets (example: Suspend, Resume or Terminate 100+ instances at one go) the UI will get timed out. The reason behind this problem was that BizTalk360 was sending the entire list of port details to the BizTalk Server to perform actions. This consumed a lot of time to process the request and the response from the server was eventually delayed. Therefore, we have rewritten the code to only send the required properties to the server.
  9. License request is now part of BizTalk360, previously we had a small windows application that gathers required information for us to generate the license key.
The intention of this post is not to look like a release notice, we just wanted to highlight some of the improvements we have done in UX/UI area, we wanted to constantly improve this experience in future versions. I joined the team towards the fag end of this release, and by then most of the development and testing work had completed. But what I understand from the team is that while 7.2 was originally slated to have about 10 items now has about 60+ items. That’s some serious effort from the folks and the upcoming 7.3 release should be even more hot! Oh well, this is just not the end of what went into 7.2 release. We have made some serious performance improvements in certain areas of the system. Stay tuned for my next blog to know more about this!