Current filter:
                                You should refresh the page.
                                Support Center
                                  • We are having trouble finding documentation on the easiest way to add an external website into an iFrame (or similar) into XAF most recent version.  Many of the blogs we have found are from 3-4 years ago and some comments mention that certain approaches do not work with the most recent XAF version.

                                    Use Case:  user clicks on navigation item on the left and it displays the iframe with the url on the right side of the screen.

                                    Ideal steps: create new detail view and set view item to iframe editor, then expose a property to set url

                                    Any direction or advise you can provide will be great.

                                1 Solution

                                Creation Date Importance Sort by
                                Hello Scott,

                                You can display an IFrame element in an XAF page using a custom ViewItem displayed inside a DashboardView. Here are the main implementation steps:
                                1. In the YourSolutionName.Module.Web project, create a custom ViewItem class descendant:

                                using System; using System.Web.UI.HtmlControls; using DevExpress.ExpressApp.Editors; using DevExpress.ExpressApp.Model; namespace T465288.Module.Web.Editors { public interface IModelIFrameViewItem : IModelViewItem { } [ViewItem(typeof(IModelIFrameViewItem))] public class IFrameViewItem : ViewItem { public IFrameViewItem(IModelIFrameViewItem model, Type classType) : base(classType, model.Id) { } protected override object CreateControlCore() { HtmlGenericControl frame = new HtmlGenericControl("iframe"); frame.Attributes["src"] = ""; frame.Attributes["width"] = "100%"; frame.Attributes["height"] = "500px"; return frame; } } }
                                Imports System Imports System.Web.UI.HtmlControls Imports DevExpress.ExpressApp.Editors Imports DevExpress.ExpressApp.Model Namespace T465288.Module.Web.Editors Public Interface IModelIFrameViewItem Inherits IModelViewItem End Interface <ViewItem(GetType(IModelIFrameViewItem))> Public Class IFrameViewItem Inherits ViewItem Public Sub New(ByVal model As IModelIFrameViewItem, ByVal classType As Type) MyBase.New(classType, model.Id) End Sub Protected Overrides Function CreateControlCore() As Object Dim frame As New HtmlGenericControl("iframe") frame.Attributes("src") = "" frame.Attributes("width") = "100%" frame.Attributes("height") = "500px" Return frame End Function End Class End Namespace

                                Refer to the Concepts > UI Construction > View Items > Implement Custom View Items  article for more details. A custom ViewItem is often preferred over a custom PropertyEditor when you just need to display data without editing and other capabilities. Of course, you can choose from more integration options based on your exact business requirements: Concepts > UI Construction > Using a Custom Control that is not Integrated by Default.

                                2. Invoke the Model Editor for the YourSolutionName.Module.Web/Model.DesignedDiffs.xafml file and create a custom DashboardView with the newly added ViewItem and register it as a navigation item:

                                <?xml version="1.0" encoding="utf-8"?> <Application> <NavigationItems> <Items> <Item Id="Default" IsNewNode="True"> <Items IsNewNode="True"> <Item Id="IFrameNavigationItem" ViewId="IFrameDashboard" IsNewNode="True" /> </Items> </Item> </Items> </NavigationItems> <Options CollectionsEditMode="Edit" /> <SchemaModules> <SchemaModule Name="SystemAspNetModule" Version="" IsNewNode="True" /> <SchemaModule Name="SystemModule" Version="" IsNewNode="True" /> </SchemaModules> <Views> <DashboardView Id="IFrameDashboard" IsNewNode="True"> <Items IsNewNode="True"> <IFrameViewItem Id="IFrameViewItem" IsNewNode="True" /> </Items> <Layout IsNewNode="True"> <LayoutGroup Id="Main" IsNewNode="True"> <LayoutItem Id="IFrameViewItem" ViewItem="IFrameViewItem" Index="0" IsNewNode="True" /> </LayoutGroup> </Layout> </DashboardView> </Views> </Application>

                                Refer to the Task-Based Help > How to: Display Several Views Side-by-Side  article to learn more about DashboardView and its usage.

                                Attached is a complete sample implementing this task for XAF v16.1. If you run it, you will see the following result in the UI:

                                See Also
                                T180499 - an example of implementing a similar, but more complex scenario with passing information from the current View object to an external web site.

                                If you need additional product information, write to us at or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2018 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners