LightSwitch – Displaying Web Pages / HTML on a Screen

Overview of Article

Continuing with our earlier post on adding custom controls from the System.Windows.Controls namespace, the following article describes how to add a WebBrowser control onto a LightSwitch Screen.

This will allow us to display HTML or load web pages onto a LightSwitch Screen.

Screens

This example is not based upon any data. Therefore, create a new screen using the ‘New Data Screen’ template and select ‘Screen Data (None)’.
image

Fig 1 Create a screen based on no data

  1. In order for us to add a WebBrowser control onto the screen, we need to bind the control it to a notional piece of data. Therefore, click the ‘Add Data Item’ button and add a new local property of type string. Untick the ‘Is Required’ checkbox and name the control ‘prpWebPage’.
    image
    Fig 2 Add a local property called prpWebPage

  2. Drag the control onto the screen. Change the control from a TextBox into a Custom Control. On the properties pane, click the ‘change’ hyperlink and select ‘System.Windows.Controls.WebBrowser’.

    image
    Fig 3 Select System.Windows.Controls.WebBrowser

  3. In order to load a web page, we can use the ‘Navigate’ method on the WebBrowser control. However, we can only call this when the control is ready so we need to handle the ControlAvailable event. Click on the ‘Write Code’ button and select the ‘Activated’ event. Now write the following code:
    Private Sub WebPage_Activated()
        AddHandler Me.FindControl("prpWebPage").ControlAvailable, AddressOf webControlAvailable
    End Sub
    
    Private Sub webControlAvailable(sender As Object, e As ControlAvailableEventArgs)
        CType(e.Control, System.Windows.Controls.WebBrowser).Navigate(New Uri("http://news.bbc.co.uk"))
    End Sub
    

    Here’s the C# version….

    private void WebPage_Activated()
    {
        this.FindControl("prpWebPage").ControlAvailable += webControlAvailable;
    }
    
    private void webControlAvailable(object sender, ControlAvailableEventArgs e)
    {
        ((System.Windows.Controls.WebBrowser)e.Control).Navigate(new Uri("http://news.bbc.co.uk"));
    }
    

    Obviously, change the URL to the URL of your choice

  4. The properties of the control are now optionally modified to hide the label and to set the sizing to ‘stretch’. The alignment on the parent group can also be set to ‘top’ and ‘left’. If we now run the solution, here’s what appears.
    image
    Fig 4 Illustration of a loaded web page in LightSwitch

  5. If we want to display some HTML rather than load a web page, we can call the NavigateToString method on the WebBrowser Control. Here’s some sample code.
    Private Sub webControlAvailable(sender As Object, e As ControlAvailableEventArgs)
        Dim strHtml As String = "<h1>Hello World!</h1>"
        CType(e.Control, System.Windows.Controls.WebBrowser).NavigateToString(strHtml)
    End Sub
    

    Here’s the same in C#

    private void webControlAvailable(object sender, ControlAvailableEventArgs e)
    {
        string strHtml = "<h1>Hello World!</h1>";
        ((System.Windows.Controls.WebBrowser)e.Control).NavigateToString(strHtml);
    }
    
  6. Here’s what appears when we now run the application
    image
    Fig 5 Illustration of displaying custom HTML in the WebBroswer Control

 

Conclusion

This post illustrates how to load web pages and HTML content onto a LightSwitch screen.

There are many useful scenarios in which this can be used. For example, we can use this technique to display HTML data from a database. The technique could also be used to connect to a SQL Server reporting server in order to display reports inside LightSwitch.

 

About these ads

About dotnettim

Tim Leung is a Microsoft .Net / SQL Server developer based in England.
This entry was posted in LightSwitch. Bookmark the permalink.

46 Responses to LightSwitch – Displaying Web Pages / HTML on a Screen

  1. Pingback: Microsoft LightSwitch Printing Html « Tejana

  2. tejana says:

    Tejana says:
    This page contains the webBrowser control, for details see Tim Leung’s Blog. Thanks Tim.

  3. Rick Wassum says:

    Hi Tim,

    This is a great example, as are many of your posts, however I tried using it on a Web Client deployment vs. a Desktop deployment, and I received the error. “HTML is enabled only in Out-of-Browser mode.”

    Is there some other way to host HTML content inside a LightSwitch application in a Non-Desktop deployment?

    • Emma says:

      Rick –

      I am faced with exactly the same issue with the “HTML is enabled only in Out-of-Browser mode” in a Web Client LS application.

      Did you find a solution to your issue?

      Any advice would be appreciated

      Emma

  4. dotnettim says:

    Hi Rick,

    Many thanks for your comment.

    You’re correct that the example does not work in Web Client mode.

    Unfortunately, I don’t think there’s an easy way to work around this.

    From what I understand, SilverLight 5 will support the the WebBrowser control in ‘in broswer’ mode so I’m hoping that a future release of LightSwitch will provide this functionality

    On another topic, one issue that Yann has kindly pointed out is that if the WebBrowser control is used to display HTML content with other controls added onto the screen, it isn’t possible to remove the vertical scrollbars against the HTML content. Therefore, the cosmetic appearance in this scenario isn’t ideal.

    Tim

  5. Pingback: 10th August « PRJ300 – Jimmy H

  6. Maurice says:

    Mine is an example of a beginner being assigned an advanced task: I am embedding a web browser in my C# LightSwitch Contact Manager. I am following your example, and assume that on step 3, I am supposed to apply the WebPage_Activated code to the screen (WebTest). I get the following error:
    “Type ‘LightSwitchApplication.WebTest’ already defines a member called ‘WebTest_Activated’ with the same parameter types.”
    At this point, I am not sure if I applied the code in the correct place, or how to correct this problem. My project is currently using the delivered Microsoft LightSwitch Extension, and no others. Any guidance would be appreciated. Thanks.

  7. dotnettim says:

    Hi Maurice,
    Yep – the _Activated code is added to the screen so what you’re doing should be correct.
    Can you check that you don’t have the WebTest_Activated method defined twice in your code called?
    Also, it might be worth checking that you haven’t created any other properties or methods on your screen called WebTest.
    Tim

  8. Maurice says:

    Thanks for replying so quickly.
    As a test, I started from scratch with a blank project, no objects or entities at all, and I got the same error.
    I went back to your instructions and saw that my prpWebPage control was not positioned in the screen hierarchy as your example. I had the control as a child of the Row Layout Group. Your example has it as a sibling. I rearranged mine and it worked, but with a blank row at the top of the screen. I moved the control back into the row and now it works exactly as I want.
    I look forward to the day where I have gathered enough knowledge to understand why that worked! Thank you again for your advice (and excellent instructions) Have a good weekend.

  9. dotnettim says:

    @Maurice – Glad you got it working! Enjoy the rest of the weekend too.

  10. Mike says:

    Great tip on using HTML in your app… Thanks and keep up teh great work!

  11. cte00 says:

    Hi Tim, thanks for the tip here. I have managed to show the webbrowser on LS, however it hide/blocks the other controls/pop-ups. Example a dropdown menu gets blocked by the webbrowser. Someone else is also facing the same problem, http://screencast.com/t/RmeLdqRm. Do you have an idea of where can I start?

    • Mario says:

      Hi cteoo, did you find solution to the problem??
      Thanks

      • I have been selling a suite of controls for LightSwitch which were featured in Tim’s and Yann’s book which actually gets around this limitation. Spursoft LightSwitch Extensions. I was looking for something else and came across this post, I really am not trying to sell here just thought it helpful.

  12. kartheek nadendla says:

    how to navigate under hyperlink button click event in light switch extension shell

  13. Thanks very much for posting this – it saved me a lot of time!

  14. You’re a genius :-) Gave me an awesome idea :-)

  15. Pingback: MyBizz Portal: The “smallest” LightSwitch application you have ever seen (LightSwitch Star Contest entry). « Jan Van der Haegen's blog

  16. Pingback: Windows Azure and Cloud Computing Posts for 1/23/2012+ - Windows Azure Blog

  17. samy says:

    I navigated first page into second page using button and i get the value in second page using variable x. I get the value from variable x into first page textbox. But first page create a new instance when i redirect second page into first page. I dont know how its happen? Any one can plz help me?

  18. Your output will likely be on eth0. Fallout New Vegas DLC Download.
    Our Microsoft Points Keygen is a program capable of supplying you
    with a working 1600 Microsoft Points code and many more.

  19. websites says:

    I am sorry, that has interfered… I understand this question.
    It is possible to discuss.

  20. Max says:

    Hi there, I discovered your web site by the use of Google while looking for a comparable
    topic, your website got here up, it looks good.
    I’ve bookmarked it in my google bookmarks.
    Hi there, simply changed into aware of your weblog through Google, and located that it is really informative. I am gonna watch out for brussels. I will appreciate in the event you proceed this in future. Lots of folks can be benefited from your writing. Cheers!

  21. Micaela says:

    Lo he devorado entero y para ser honestos, me veo en la obligación de señalar que me ha entusiasmado.

    Gran trabajo.

  22. Tim says:

    Hello, i have followed this tutorial 5 times now using VS2012 and all i get is the name “prp Web Page:” in the top left corner. Have anyone got this working on VS2012 or know what i have messed up?
    Thanks in advance :)

  23. Tim says:

    One thing i have notice that migth be diffrent is that the function in 2012 is named “partial void” instead of “private void” but when i run the debugger i se that the event fires.

  24. Tim says:

    DOH! I Solved it, forgot to size it.

  25. Tim says:

    I dot want to Spam but is there any way to display a webpage thats on the local drive?

  26. I have a little error :c , i put the code and the custom control to the screen but nothing change in that screen http://puu.sh/2U8dp.png , can you help me please?

    Thank you so much for the post :)

  27. Hello! I just would like to give an enormous thumbs up for the good info you’ve got
    here on this post. I will likely be coming back to your weblog for
    more soon.

  28. Your mode of explaining everything in this post is actually nice,
    all can easily be aware of it, Thanks a lot.

  29. I am curious to find out what blog platform you are using?

    I’m having some small security issues with my latest site and I would like to find something more safeguarded. Do you have any suggestions?

  30. I am in fact thankful to the holder of this site who has shared this
    great post at at this place.

  31. Victor says:

    First of all I would like to say wonderful blog! I had a quick question that I’d like to ask if you do not mind. I was interested to find out how you center yourself and clear your thoughts before writing. I’ve
    had trouble clearing my mind in getting my thoughts out.
    I truly do take pleasure in writing but it just seems
    like the first 10 to 15 minutes are generally wasted simply just trying to
    figure out how to begin. Any suggestions or tips? Cheers!

  32. Arthur says:

    Everything is very open with a precise clarification of the challenges.
    It was definitely informative. Your site is extremely
    helpful. Many thanks for sharing!

  33. Rocco says:

    Thankfulness to my father who told me concerning this
    webpage, this blog is actually amazing.

  34. Prime Cheats says:

    Howdy! This is my first visit to your blog! We are a collection of volunteers and starting
    a new project in a community in the same niche.
    Your blog provided us valuable information to work on.

    You have done a extraordinary job!

  35. Paul Rone-Clarke is the associate marketing expert and their skill with Ultimate Demon is superior to anyone else

  36. Rio says:

    Thank you very much for this post

    It helped a lot

  37. viagra says:

    It’s amazing to visit this site and reading the views of all friends regarding this piece of writing, while I am
    also eager of getting familiarity.

  38. Rolland says:

    My brother suggested I would possibly like this blog.
    He used to be entirely right. This publish truly made my day.
    You cann’t imagine simply how a lot time I had spent
    for this information! Thanks!

  39. Blogging says:

    I rarely comment, however I browsed a great deal of responses here LightSwitch – Displaying Web Pages / HTML on
    a Screen | Tim Leung’s Blog. I do have a couple of questions for
    you if it’s allright. Could it be only me or does it look like like some of these remarks appear like they are coming from brain dead visitors? :-P And, if you are posting at additional sites, I’d like to
    follow anything new you have to post. Would you make a list of every one of your social networking
    pages like your twitter feed, Facebook page or linkedin profile?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s