How We Did It: BDC Meta Man Web Edition

[LEFT][CODE]http://blogs.msdn.com/sharepoint/archive/2009/07/06/how-we-did-it-bdc-meta-man-web-edition.aspx[/CODE]


For today’s guest post, I’d like to introduce Nick Swan and Phill Duffy. Nick founded [URL="http://www.lightningtools.com/"]Lightning Tools[/URL] with Brett Lonsdale in 2006 and BDC Meta Man was a result of their efforts. Fast forward to 2009 and Phill Duffy is part of the team (Nick Swan, Brett Londsdale, Dmitry Kaloshin, Michael Gamza, Hrayr Diloyan, Ashot Brahamyan, Karen Khumaryan & Hrachya Bekverdyan) that built and launched BDC Meta Man Web Edition. This post gets into the decisions and components they used to build a custom SharePoint solution. Enjoy!
[B]Introduction[/B]
BDC Meta Man Web Edition was born from the success of BDC Meta Man and from listening to our users about how they wanted to interact with SharePoint and the Business Data Catalog. We certainly had our work cut out for us as BDC Meta Man is hugely successful and a hard act to follow. One of the surveys conducted by Lightning Tools a short while ago showed that users were asking the question as to why, when SharePoint can communicate with their Line-of-Business Systems, they need to use a desktop application to create the Application Definition File to do so. The users wanted the functionality of BDC Meta Man but without the requirement of stepping outside of their SharePoint environment.
[B]Our Goals[/B]

[LIST][*]Allow users to create Application Definition File from within the browser (Figure 1 - BDC Meta Man Web Edition)[*]Give the ability to create Application Definition File to Site Collection Administrators[*]Give users functionality of BDC Meta Man from within the browser[*]Streamline the process of creating an Application Definition File[*]Imitate BDC Meta Man desktop application (Figure 2 - BDC Meta Man)[/LIST]
[URL="http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_2.png"][IMG]http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_thumb.png[/IMG][/URL]
Figure 1 - BDC Meta Man Web Edition
[URL="http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_4.png"][IMG]http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_thumb_1.png[/IMG][/URL]
Figure 2 - BDC Meta Man
[B]How We Did It - Bringing the Application Definition File creation into SharePoint[/B]
We were lucky enough to be creating another version of a well received existing application so we did not need to worry too much about what it should be able to do, the functions that the desktop version could perform were listed and we made a comparative list of what we wanted to achieve from our browser version. Features such as generating web parts to write back to a data source were straight out as there was no way we would be able to offer this functionality, but the range of data sources and the method of creating associations we certainly going to be in. We were ready to begin…
We started off by creating test console applications which made use of our existing code, this was to make sure we could create and import an Application Definition File without user intervention. Once we had successfully managed to do this we carried on developing our Proof-of-Concept ideas using Web Parts to make sure again we were able to achieve the aspects of functionality which we would be requiring.
The next stage was to design our Web Services, we knew the methods we needed to implement from our desktop application, and we just need to adapt them for use in a WCF Service. The services were being called using AJAX.NET from within our JavaScript. The objects we were passing to and from our Service were JSON objects and are really easy to deal with. One of our tasks was trying to debug calls to and from our web service, we used a number of tools to do this:
Visual Studio – For Debugging the WCF Service
Fiddler – To check what was being passed to and from our UI and Service
Firebug and Firefox – We used this to inspect our objects and step through the JavaScript code
Once we had our methods configured we were ready to investigate the best way to deliver our UI. We have used jQuery in a couple of our existing products and favored it to run our UI. One of our considerations was that there would be no plug-ins required by the end users and also we can make use of existing in-house skills with the framework. We downloaded jQuery and the jQuery UI Library and began to replicate the UI of BDC Meta Man taking into consideration that we were now designing for the web rather than a WinForms application.
JQuery made the design a lot easier for us; we created our HTML page and also defined all of the dialog boxes we will be using in the HTML too. Using the Dialog function of the UI Library we were able to easily create dialog boxes to accept and work with user defined data related to our Application Definition File (Figure 3 - Creating a filter on an Entity). As well as allowing us to create the design in a more efficient manner we also found that the jQuery framework was more than powerful enough for anything we could through at it, especially the selectors which made so many of the small UI task so much easier than writing the native JavaScript.
[URL="http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_6.png"][IMG]http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_thumb_2.png[/IMG][/URL]
Figure 3 - Creating a filter on an Entity
‘Draggable’ and ‘Droppable’ are two of my favorite words from the jQuery UI library; it makes dragging and dropping extremely easy and allowed us to build our concept of a design surface within the browser where users can drop tables onto the design surface to create entities. Once an entity is create it can then be moved around and using a ‘drag’ point on an entity it is possible to drag out a connection to another entity to create associations between two entities
The next thing we needed to do for BDC Meta Man Web Edition was to decide how would it be accessed and by whom. We decided that the best solution would be to create an application page which can be accessed by Site Collection Administrators and not just Farm Administrators. The reason behind this decision was that a lot of the time it was apparent that the people who want to use data presented by the Business Data Catalog are power users. By empowering Power Users with the control to create and configure their own Application Definition Files, it is more efficient as it eliminates time and resources required from IT to set it up, and also it allows them to adapt to Business needs as and when required rather than waiting on a 3rd party each time. The Site Collection Administration column from the Site Settings page was perfect for our requirement as SharePoint will handle the security trimming for us; our only requirement is that if a user requires access to use BDC Meta Man Web Edition then they need to be a site collection administrator. The current SharePoint solution would be to set users up to access the Shared Services Provider but we wanted to remove this requirement.
[B]Challenges[/B]
One of the hardest parts to recreate in the browser was to draw associations between two entities on the design surface, a colleague of mine, Hrayr, managed to use the RaphaelJS plug-in to great effect to allow users to drag and drop from a source entity to a destination entity and have a line drawn between them. Once we had managed to get a line drawn between the two points we had to add behavior to make sure the line always moved to the correct side of an entity as it moved around the design surface (see Figure 4 - Entities with Associations).
[URL="http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_8.png"][IMG]http://blogs.msdn.com/blogfiles/sharepoint/WindowsLiveWriter/HowWeDidItBDCMetaManWebEdition_960B/image_thumb_3.png[/IMG][/URL]
Figure 4 - Entities with Associations
Another challenge was to allow users to be able to re-open an existing Application Definition File, we essentially had to reverse our import process and from a completed Application Definition File which is imported into the Business Data Catalog we had to ‘bring it back to life’ and display the entities back on the design surface. We managed to achieve this in very much the same way we import Application Definition File’s we de-serialized the ADF XML back into our custom objects, this allowed us to re-establish connections back to the data sources and then parse the entities back onto the design surface and reload their configurations.
The final challenge was to license our new product, we had used a third party component for our desktop version but this was not suitable for our Application Page. We created a solution which would generate a unique id for each farm installation, once we had this ID we could create a key and using a console application the key can be applied to the users Farm to activate the license. The license works using a SPPersistedObject which can be read from any server in the Farm. This allows us to control behavior of the application by reading the license information when loading the page.
[B]Conclusion[/B]
We set out to achieve creating a browser version of one of our most successful products and managed to achieve this using good research, careful planning, building proof of concept ideas and finally producing the end solution. The development has been significantly helped by using technologies such as WCF Services, ASP.NET Ajax and jQuery, and we look forward to working with them in the future.
Lightning Tools is proud of its SharePoint Tools and SharePoint Web Parts and hope that BDC Meta Man Web Edition is a well received new edition to our range and welcome any comments or feedback to [EMAIL="support@lightningtools.com"]support@lightningtools.com[/EMAIL] .
[B]Try it out for yourself[/B]
A trial version is available from the BDC Meta Man Web Edition website; you can also view a couple of screen casts of it in action.
[url=http://www.lightningtools.com/bdc-meta-man/web-edition.aspx]BDC Meta Man Web Edition[/url].
[B]Further information:[/B]
Lightning Tools: [URL="http://www.lightningtools.com/"]www.lightningtools.com[/URL]
Lightning Tools Blog: [url=http://www.lightningtools.com/blog/]Lightning Tools Blog[/url]
Email: [EMAIL="sales@lightningtools.com"]sales@lightningtools.com[/EMAIL]
Twitter: [URL]http://twitter.com/lightningtools[/URL]

[/LEFT]