Ticket T178588
Visible to All Users

How to display another web site or custom HTML inside IFRAME embedded into an XAF View

created 10 years ago

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.

Answers approved by DevExpress Support

created 10 years ago (modified 4 years ago)

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:

ASP.NET Core Blazor Server

Refer to the following example: Blazor - How to integrate a custom DevExtreme component and bind it to a data source.

ASP.NET Web Forms

1. In the YourSolutionName.Module.Web project, create a custom ViewItem class descendant:

C#
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"] = "http://en.wikipedia.org/wiki/IFrame"; frame.Attributes["width"] = "100%"; frame.Attributes["height"] = "500px"; return frame; } } }
Visual Basic
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") = "http://en.wikipedia.org/wiki/IFrame" 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
<?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="16.1.9.0" IsNewNode="True" /> <SchemaModule Name="SystemModule" Version="16.1.9.0" 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.

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.