19 Replies Latest reply on Aug 14, 2012 2:55 PM by jamliu

    How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)

    saxyogi

      Hi Guys,

       

      Could somebody please provide a documentation how to develop a Custom Web Part that can connect with PI TreeView Web part and receives meta data information from PI Tree View Webpart.

       

      I want to achieve following:

       

      I am reading data from AF in to PITreeView Webpart. Lets assume this data is CarModels. Treeview will display different Car Models.

       

      I have one custom developed webpart that provides details for the given Car Model input.

       

      Now I want to connect both the webparts so that if User selects a particular Car Model in TreeView then Custom webpart should display the details.

       

      I spent a couple of hours to figure this out but could'nt.

       

      Thanks in advance.

       

       

        • Re: How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)
          Asle Frantzen

          Hi there

           

          Have you read this blog entry: http://vcampus.osisoft.com/blogs/cristobal/archive/2009/12/04/how-to-create-custom-webparts-that-connects-with-osisosft-s-rtwebparts.aspx

           

          It describes how to create a custom webpart which connects to OSIsoft webparts.

           

           

           

          Do a search here on vCampus as well, I remember I posted a code sample regarding this once. You should use the ParametersOutConsumerInterface with client side scripting (javascript). Then you can iterate through all available data being sent from the connected webpart - and select which parameter you need for your webpart.

            • Re: How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)
              saxyogi

              Thanks Asle. In fact I used code sample provided by you. It works fine but somehow ParametersOutReady event does not get fired. I think I am missing some steps.

                • Re: How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)
                  Asle Frantzen

                  So, this piece of javascript code will just pop up an alert stating the name + value of each available parameter sent from the connected webpart:

                  
                  

                  //Receive data client-side
                  var ClientSide_ParametersOutConsumerInterface_WPQ_ = new Consumer_WPQ_();
                  function Consumer_WPQ_()
                  {
                   this.ParametersOutProviderInit = myParametersOutProviderInit;
                   this.ParametersOutReady = myParametersOutReady;
                   this.NoParametersOut = myNoParametersOut;
                   
                   function myParametersOutProviderInit(sender, ParametersOutProviderInitEventArgs)
                   {
                    _ParametersOutProviderInitEventArgs_WPQ_ = ParametersOutProviderInitEventArgs;
                   }
                   function myParametersOutReady(sender, ParametersOutReadyEventArgs)
                   {
                    try
                    {
                     _ParametersOutReadyEventArgs_WPQ_ = ParametersOutReadyEventArgs;
                     
                     if(ParametersOutReadyEventArgs.ParameterValues != null)
                     {
                      for (i=0; i < _ParametersOutProviderInitEventArgs_WPQ_.ParameterOutProperties.length; i++)
                      {
                       alert(_ParametersOutProviderInitEventArgs_WPQ_.ParameterOutProperties.ParameterName+': '+ParametersOutReadyEventArgs.ParameterValues);
                      }    
                      
                     }
                    }
                    catch (ex)
                    {
                     j=0;
                    }
                   }
                   
                   function myNoParametersOut(sender, ParametersOutReadyEventArgs)
                   {
                   }
                  }

                   

                  Then, I'd make sure that the client side interface is registered properly in the EnsureInterfaces method in C#

                  
                  

                  public override void EnsureInterfaces()
                  {
                   try
                   {
                    RegisterInterface("ClientSide_ParametersOutConsumerInterface_WPQ_",  //InterfaceName   
                     InterfaceTypes.IParametersOutConsumer,                              //InterfaceType
                     WebPart.LimitOneConnection,                                         //MaxConnections
                     ConnectionRunAt.ServerAndClient,                                    //RunAtOptions
                     ParametersOutConsumer,                                              //InterfaceObject
                     "ClientSide_ParametersOutConsumerInterface_WPQ_",                   //InterfaceClientReference
                     "Consume Parameters From",                                          //MenuLabel
                     "Consumes parameters from another Web Part.");                      //Description

                   }
                   catch(SecurityException se)
                   {
                    Logging.ReportSevereError(@"CommunicationDebugWebpart - Make sure js files are in C:\WebParts\scripts",se);
                    _registrationErrorOccurred = true;
                   }
                  }

                   

                  If you've completed the other necessary steps, you'll now be able to check out everything being sent from the Provider webpart to your Consumer webpart. (Remember to actually connect them on the Sharepoint page)

              • Re: How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)

                I see you are already in good hands with Asle, but to answer your original post: we have a nice tutorial titled "Creating Custom Web Parts", available under the vCampus Library (White Papers and Tutorials > PI WebParts). We also have a webinar titled "PI WebParts 3.0 and Coding Custom Web Parts" under the vCampus Auditorium.

                 

                And you already found the forum to post your questions related to custom web parts, so that's good 
                 

                  • Re: How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)
                    saxyogi

                    Thanks Steve and Asle. I will give it a try.

                      • Re: How to connect a Custom Webpart (Consumer) with PITreeView WebPart (Provider)
                        saxyogi

                        Hi Asle,

                         

                        Thanks for the help. After following the guidelines I am able to develop the Custom Webpart that is able to communicate with AF if It is running on the Server Side. However I am getting folloing error of its on client side. I need "ModulePath" from PI TreeView webpart. I used your code for this sample.

                         

                        [8/5/2010 11:28:11 AM] [PartCommunicationInit] 'ClientSide_ParametersOutConsumerInterfaceWPQ4' is undefined

                        [8/5/2010 11:28:11 AM] [PartCommunicationInit] 'ClientSide_ParametersOutConsumerInterfaceWPQ4' is undefined

                        my Java Script file is

                        var _ParametersOutProviderInitEventArgs_WPQ_;
                        var _ParametersOutReadyEventArgs_WPQ_;
                        var modulepath_WPQ_;

                        //Receive data client-side
                        var ClientSide_ParametersOutConsumerInterface_WPQ_ = new Consumer_WPQ_();
                        function Consumer_WPQ_() {
                            this.ParametersOutProviderInit = myParametersOutProviderInit;
                            this.ParametersOutReady = myParametersOutReady;
                            this.NoParametersOut = myNoParametersOut;

                            function myParametersOutProviderInit(sender, ParametersOutProviderInitEventArgs) {
                                _ParametersOutProviderInitEventArgs_WPQ_ = ParametersOutProviderInitEventArgs;
                            }
                            function myParametersOutReady(sender, ParametersOutReadyEventArgs) {
                                try {
                                    _ParametersOutReadyEventArgs_WPQ_ = ParametersOutReadyEventArgs;

                                    if (ParametersOutReadyEventArgs.ParameterValues != null) {
                                        for (i = 0; i < _ParametersOutProviderInitEventArgs_WPQ_.ParameterOutProperties.length; i++) {                   
                                                alert(_ParametersOutProviderInitEventArgs_WPQ_.ParameterOutProperties.ParameterName + ': ' + ParametersOutReadyEventArgs.ParameterValues);                    

                                            if (_ParametersOutProviderInitEventArgs_WPQ_.ParameterOutProperties.ParameterName == "ModulePath")

                                                modulepath_WPQ_ = ParametersOutReadyEventArgs.ParameterValues;
                                        }

                                        updateHtml_WPQ_();
                                    }
                                }
                                catch (ex) {
                                    j = 0; //Fix - needs to be present for javascript code to work
                                }
                            }

                            function myNoParametersOut(sender, ParametersOutReadyEventArgs) {
                            }
                        }

                        function updateHtml_WPQ_() {
                            document.getElementById('ConsumerExampleDiv_WPQ_').innerHTML = "Current module: " + modulepath_WPQ_;
                        }

                        And the code that is using this file is

                        if (_runAtClient)
                        {
                            System.IO.StreamReader sr;
                            string str = "";

                            try //Get the javascript code for the general client-side functionality
                            {
                                sr = new System.IO.StreamReader(@"D:\Example\ClientSide_ParametersOutConsumerInterface.js", System.Text.Encoding.ASCII, false, 10000);
                            }
                            catch (Exception ex)
                            {
                                throw new Exception(@"JS File is not in D:\Example " + ex);
                                return;
                            }

                            str += sr.ReadToEnd();
                            sr.Close();

                            // set title of client interface
                            str = str.Replace("<WebPartName>", this.StorageKey.ToString());

                            output.WriteLine("<P><SCRIPT LANGUAGE=\"JavaScript\">\n"
                                + "<!-- \n"
                                + ReplaceTokens(str)
                                + "\n//-->\n"
                                + "</SCRIPT>\n");

                            output.WriteLine("<SCRIPT LANGUAGE=\"JavaScript\">\n");
                            output.WriteLine(ReplaceTokens(@"var modulepath_WPQ_='" + ModulePath + "'"));
                            output.WriteLine("</SCRIPT>\n");
                        }

                        Could you please indicate of I am missing some step. By seeing error it looks like that I should write PartCommunicationInit() but since my webpart is going to be a consumer I am not sure if this is the case.

                         

                        Thanks in advance.