How to create Add-In with 2 webview regions

Add-in Express™ Support Service
That's what is more important than anything else

How to create Add-In with 2 webview regions
2 regions, one in the navigation pane, other in the webview, need to have them affect each other 
Bobby Nicholls


Guest


I am posting this here as well as in my support ticket to see if anyone has any other ideas on how to implement this

Okay so here is what I am trying to accomplish, and have not been able to figure out yet.

I want to render two regions, first is the Navigation pane, where I have a webbrowser pointing to a page I am building. The second is to replace the webviewer and also with a webbrowser that points to a page I want to build.

I have the following code working, which shows both regions, but they show regardless of what folder I have selected, which I can assume is because of the item type:


Formsmanager onInitialize code- 

        ' ADXOlForm1
        ' TODO: Use the ADXOlForm1Item properties to configure the region's location, appearance and behavior.
        ' See the "The UI Mechanics" chapter of the Add-in Express Developer's Guide for more information.
        ADXOlForm1Item = New ADXOlFormsCollectionItem()
        ADXOlForm1Item.ExplorerLayout = ADXOlExplorerLayout.BottomNavigationPane
        ADXOlForm1Item.ExplorerItemTypes = ADXOlExplorerItemTypes.olMailItem
        ADXOlForm1Item.InspectorLayout = ADXOlInspectorLayout.InspectorRegion
        ADXOlForm1Item.InspectorItemTypes = ADXOlInspectorItemTypes.olMail
        ADXOlForm1Item.UseOfficeThemeForBackground = True
        ADXOlForm1Item.FormClassName = GetType(ADXOlForm1).FullName
        Me.FormsManager.Items.Add(ADXOlForm1Item)

      



        ' ADXOlForm2
        ' TODO: Use the ADXOlForm2Item properties to configure the region's location, appearance and behavior.
        ' See the "The UI Mechanics" chapter of the Add-in Express Developer's Guide for more information.
        ADXOlForm2Item = New ADXOlFormsCollectionItem()
        ADXOlForm2Item.ExplorerLayout = ADXOlExplorerLayout.WebViewPane
        ADXOlForm2Item.ExplorerItemTypes = ADXOlExplorerItemTypes.olMailItem
        ADXOlForm2Item.InspectorLayout = ADXOlInspectorLayout.CompleteReplacement
        ADXOlForm2Item.InspectorItemTypes = ADXOlInspectorItemTypes.olMail
        ADXOlForm2Item.UseOfficeThemeForBackground = True
        ADXOlForm2Item.FormClassName = GetType(ADXOlForm2).FullName
        Me.FormsManager.Items.Add(ADXOlForm2Item)

Form Load code for each form: 
    
Private Sub ADXOlForm1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        wbNav.Navigate("http://localhost:5834/nav.html")

    End Sub
    Private Sub ADXOlForm2_Load(sender As Object, e As EventArgs) Handles Me.Load
        wbView.Navigate("http://localhost:5834/")
    End Sub


Now what I want to do is only show the 2nd form when an item is selected from the listview in the html page I am rendering in the navpane, and pass back a value I define from the webpage back to outlook, which I am assumming I would need to use javascript to acomplish as well. I also want to hide the webview when clicking back on the inbox or other folders. I just am not understanding how to access both the javascript and the page, as well as how to hide/show the 2nd form based on only clicking in the navpane?Â?Ð??.
Posted 20 May, 2015 10:35:12 Top
Andrei Smolin


Add-in Express team


Posts: 18825
 Joined: 2006-05-11
Hello Bobby,

Thank you for posting this on the forum.

Nicholls writes:
Now what I want to do is only show the 2nd form when an item is selected from the listview in the html page I am rendering in the navpane[/quote]

Please check this sample project - http://temp.add-in-express.com/support/TestWebViewPane2.zip. [quote]Bobby

[quote]Bobby Nicholls writes:
and pass back a value I define from the webpage back to outlook[/quote]

You can intercept the events generated by the WebBrowser component. Or, you can use MSHTML to intercept events generated by HTML controls and/or to parse the HTML.

I suggest that you put the WebBrowser component onto a UserForm, place the UserForm an a System.windows.Forms.Form and debug this construct in a standalone Windows Forms application.


Andrei Smolin
Add-in Express Team Leader
Posted 21 May, 2015 02:49:00 Top
Bobby Nicholls


Guest


Hey Andrei,

I appreciate your reply. I have downloaded this example before, but I could not get it to compile due to missing references, which is causing numerous errors throughout the project. It also seems that this uses the add-in-express sdk, as opposed to only the regions sdk (indicated by the AddinExpress.MSO.2005 reference, I assume, since i cannot find this one anywhere in my own projects where i am using regions, i can only find the AddinExpress.OL.2005).
Thoughts?

Regarding the other piece, I will do that for testing purposes, thank you.

One final question, can you link me directly to documentation that explains in better detail how to deploy updates to an add-in you have built and deployed? I have a feeling this will be very useful in the future for us.
Posted 21 May, 2015 08:21:17 Top
Andrei Smolin


Add-in Express team


Posts: 18825
 Joined: 2006-05-11
Bobby,

That project won't work for you since you use Add-in Express Regions for Outlook and VSTO and the project targets Add-in Express for Office and .NET.

I've created a VSTO version of that project, please see http://temp.add-in-express.com/support/WebViewPaneVstoCs.zip.

Bobby Nicholls writes:
One final question, can you link me directly to documentation that explains in better detail how to deploy updates to an add-in you have built and deployed?


That's part of VSTO documentation. I suggest that you google for this as my googling won't be better than yours.


Andrei Smolin
Add-in Express Team Leader
Posted 22 May, 2015 04:43:54 Top