Integrating the Embedded UI

This is as simple as just dropping in the Izenda EmbeddedUI Code base.

Once the Izenda ReactJS library is present you’ll have direct access to the IzendaSynergy render functions.

This is done in the Copying Izenda Resources and References section of the guide below.

The Izenda.integrate.js file

This file is a good representation of how to bundle together IzendaSynergy configuration, authentication, and render functions.

You may choose to create a similar file in your own application code base as it greatly simplifies the amount of on page code you might write to manage your resource references, API endpoint references, passing of the Izenda currentusercontext token, and specific render function.

This is done in the Copying Izenda Resources and References section of the guide below.

You can view the contents of Izenda.integrate.js here.

Using the render functions

Once the Embedded UI front-end resources are in place, and we’ve configured the configuration, authentication, and render functions. The last thing to do is use these bundled JavaScript functions within our application’s front-end to render specific Izenda containers/pages.

This is done in the Embedded Front-end section of the guide below.

Back-end Integration through C#

This method of back-end integration is typically done when integrating with other .NET web applications, however you might use this approach in scenarios where you would want Izenda to pull (through LINQ expressions, SQL Queries, Web Services, or other REST APIs) the Tenant, Role, and User Metadata you would like Izenda to inherit.

Sample Starter Kit

The Webforms Starter Kit demonstrates the C# method approach in depth. This application has both the Izenda EmbeddedUI and API as a part of its codebase, with no components of Izenda running separately.

Most of the interaction is done in the Register.aspx code-behind.

In that file, you can see several references to Izenda DLLs which provide access to exposed methods and classes that are relevant to managing Tenants, Roles, and Users programmatically.

We are syncing between the webforms application’s security model and Izenda’s to make them essentially equivalent.

You can see starting here that we are using methods to pass values directly from the webforms application’s security model into Izenda’s by equivocating the webforms application’s Tenant, Role, and User variables with Izenda’s. While some areas of this code contain hard-coded values, in real world implementations those values would get replaced with variables or lookups.

Much of the code used in the register page’s logic is supported by contents of the IzendaBoundary directory and Models from the webforms kit.

Back-end Integration through the API

Currently there is no webforms kit that implements Izenda through REST API calls. For an example that uses the REST API, you can review the MVC5 back-end standalone documentation and example kit to learn about that approach.

White Labeling

Izenda provides a fully exposed presentation layer, which includes exposed CSS files.

Customizing Izenda’s CSS

Deployment Modes

You may need to integrate only specific areas of Izenda’s codebase, depending upon your integration goals, deployment style, and application technology.

Understanding The Three-tiered Architecture.

Hidden Filters

Hidden Filters in Izenda are the mechanism by which you can dynamically append to the WHERE clause of Izenda’s queries to ensure it only pulls back highly personalized record sets from your data sources.

See: SetHiddenFilters.

Add Izenda DLLs reference and other dependencies

1. Right click Reference node in the WebFormsStarterKit Solution Explorer then select Add Reference…

   

2. On Reference Manager dialog click Browse… button then browse to folder ~\WebFormsStarterKit\IzendaReferences, select all DLL files to reference but ignore below dlls (because those dlls have already been referenced in the webforms project template by default):

   • Microsoft.Web.Infrastructure.dll
   • Newtonsoft.Json.dll

   Note

   In this step if you encounter errors regarding reference conflicts, you must configure Redirecting Assembly as required or contact Izenda Support.

3. You also need to add System.ComponentModel.Composition.
   Go to Add References again, Assemblies-> Framework and check System.ComponentModel.Composition.

4. Finally, go to Tools->NuGet Packet Manager->Package Manager Console and run the following:

   Install-Package Microsoft.AspNet.WebApi.ClientInstall-Package Microsoft.AspNet.WebApi.CoreInstall-Package Microsoft.AspNet.WebApi.WebHost

Adding post build events to copy the resources

Adding post build events to copy the resources Open Project Properties page select Build Events then click Edit Post-build… button and then enter the commands below into Post-build event command line box:

XCOPY /S /I /Y  "$(ProjectDir)IzendaResources\Content" "$(ProjectDir)\bin\Content\"XCOPY /S /I /Y  "$(ProjectDir)IzendaResources\EmailTemplates" "$(ProjectDir)\bin\EmailTemplates\"XCOPY /S /I /Y  "$(ProjectDir)IzendaResources\Export" "$(ProjectDir)\bin\Export\"

Create Izenda DB

On your SQL Server, create an empty database named IzendaWebForms. This database stores Izenda data (report definitions, dashboards, etc.) and the configuration necessary to run Izenda.

Download IzendaWebForms.sql then execute the script on your IzendaWebForms database to generate the schema and default data.

Updating the Izenda DB

The IzendaWebForms.sql script will generate a configuration database for Izenda 2.6.20.

If you use an EmbeddedUI and API for a later version of Izenda you will need to run update scripts against your IzendaWebForms database. You can find a tool to generate the required scripts here.

For example, if you deploy version 2.11.1 of the EmbeddedUI and API, you would select v2.6.20 as your current version and v2.11.1 as your target version and (for the purposes of this tutorial) [MSSQL] SQLServer as your database type. You can choose to download the script as a SQL file or (if the check box is unchecked) view the file directly in your browser window.

Create Authentication DB

On your SQL Server, create an empty database named WebFormsStarterKit. This database is used for storing user authentication information for the webforms kit. In your real integrated application, it can be replaced by your system database with your custom user credential information.

Download WebFormsStarterKit.sql and execute the script on your WebFormsStarterKit database to generate the schema and default user authentication settings. These settings mirror the Izenda configuration database user data as closely as possible.

Verifying Izenda DB and Authentication DB

After creating the IzendaDB, select all rows in the IzendaSystemSetting table and verify that the values are the same as below:

Next you must ensure the UserName value of the records in the AspNetUsers table in WebFormsStarterKit DB are matched with the UserName value in the IzendaUser table of IzendaWebForms DB.

Izenda API Service Hosting Config

Izenda uses the Nancy Framework to host the REST API service. To configure Nancy, open the WebFormsStarterKit\Web.config and add a new section like below:

<configuration><configSections><!-- Izenda--><sectionname="nancyFx"type="Nancy.Hosting.Aspnet.NancyFxSection"/><sectionname="log4net"type="log4net.Config.Log4NetConfigurationSectionHandler, log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"/><!-- Izenda - End --><!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 --><sectionname="entityFramework"type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"requirePermission="false"/></configSections><!--Izenda--><nancyFx><bootstrapperassembly="Izenda.BI.API"type="Izenda.BI.API.Bootstrappers.IzendaBootstraper"/></nancyFx>

Then add the following email config after </nancyFx> close tag:

<nancyFx><bootstrapperassembly="Izenda.BI.API"type="Izenda.BI.API.Bootstrappers.IzendaBootstraper"/></nancyFx><system.net><mailSettings><smtpdeliveryMethod="Network"from=""><networkdefaultCredentials="false"host=""enableSsl="true"port="587"userName=""password=""/></smtp></mailSettings></system.net><!-- Izenda End -->

Add below Izenda setting key into <appSettings> node:

<appSettings><!--Izenda--><addkey="izendaapiprefix"value="izapi"/><addkey="izedapassphrase"value="vqL7SF+9c9FIQEKUOhSZapacQgUQh"/><addkey="IzendaApiUrl"value="http://localhost:14909/izapi/"/><addkey="izusername"value="IzendaAdmin@system.com"/><addkey="iztenantname"value=""/><!--Izenda End--></appSettings>

In <system.webServer> config node, add below config:

<system.webServer><modules><removename="FormsAuthentication"/></modules><!--Izenda--><handlers><removename="ExtensionlessUrlHandler-Integrated-4.0"/><removename="OPTIONSVerbHandler"/><removename="TRACEVerbHandler"/><addname="ExtensionlessUrlHandler-Integrated-4.0"path="*."verb="*"type="System.Web.Handlers.TransferRequestHandler"preCondition="integratedMode,runtimeVersionv4.0"/><addname="Nancy"verb="*"type="Nancy.Hosting.Aspnet.NancyHttpRequestHandler"path="izapi/*"/></handlers><httpProtocol><customHeaders><addname="Access-Control-Allow-Origin"value="*"/><addname="Access-Control-Allow-Headers"value="Accept, Origin, Content-Type, access_token, current_tenant"/><addname="Access-Control-Allow-Methods"value="GET, POST, PUT, DELETE, OPTIONS"/></customHeaders></httpProtocol><httpErrorsexistingResponse="PassThrough"/><!--Izenda end--></system.webServer>

This config includes the http header attribute and api action verb for the Izenda API. It is also used to configure the http handler for the API url convention which will be reserved by the Izenda API Service. Using the config above, all API urls with a prefix of izapi/ will be handled by Izenda. Recall that this handler API prefix must match the value of the izendaapiprefix setting.

Logging Config

In <configSections> add a new section to configure logging for the Izenda API.

<!-- Izenda--><sectionname="nancyFx"type="Nancy.Hosting.Aspnet.NancyFxSection"/><sectionname="log4net"type="log4net.Config.Log4NetConfigurationSectionHandler, log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"/><!-- Izenda - End -->

Then add a new log4net node in the config file as well:

<log4netthreshold="ALL"debug="false"><root><appender-refref="OutputDebugStringAppender"/><!--<appender-ref ref="RollingFileAppender" />--></root><!--WebFormsStarterKit Logger--><loggername="WebFormsStarterKit"additivity="false"><levelvalue="ALL"/><appender-refref="WebFormsKitAppender"/></logger><!--Izenda.BI Logger--><loggername="Izenda.BI"additivity="false"><levelvalue="ALL"/><appender-refref="RollingFileAppender"/></logger><!--/// Log file. ///--><appendername="RollingFileAppender"type="log4net.Appender.RollingFileAppender,log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><filtertype="log4net.Filter.LevelRangeFilter, log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><levelMinvalue="INFO"/></filter><filevalue="logs\izenda-log.log"/><!-- Uncomment when sharing log files      <lockingModel type="log4net.Appender.FileAppender+InterProcessLock, log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"/>      --><appendToFilevalue="true"/><rollingStylevalue="Composite"/><datePatternvalue="yyyyMMdd"/><staticLogFileNamevalue="true"/><preserveLogFileNameExtensionvalue="true"/><maximumFileSizevalue="5MB"/><maxSizeRollBackupsvalue="1000"/><layouttype="log4net.Layout.PatternLayout,log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><paramname="ConversionPattern"value=" %date [%-5thread][%-5level][%-36logger{1}] %message %newline"/></layout></appender><appendername="WebFormsKitAppender"type="log4net.Appender.RollingFileAppender,log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><filtertype="log4net.Filter.LevelRangeFilter, log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><levelMinvalue="INFO"/></filter><filevalue="logs\webforms-kit.log"/><appendToFilevalue="true"/><rollingStylevalue="Composite"/><datePatternvalue="yyyyMMdd"/><staticLogFileNamevalue="true"/><preserveLogFileNameExtensionvalue="true"/><maximumFileSizevalue="5MB"/><maxSizeRollBackupsvalue="1000"/><layouttype="log4net.Layout.PatternLayout,log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><paramname="ConversionPattern"value=" %date [%-5thread][%-5level][%-36logger{1}] %message %newline"/></layout></appender><!--/// DebugView Trace. ///--><appendername="OutputDebugStringAppender"type="log4net.Appender.OutputDebugStringAppender,log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><layouttype="log4net.Layout.PatternLayout,log4net, Version=1.2.15.0, Culture=neutral, PublicKeyToken=669e0ddf0bb1aa2a"><paramname="ConversionPattern"value="[%-5level][%-24logger{1}/%line] %message (/T:%thread /D:%date) %newline"/></layout></appender></log4net>

Configuring Database Connection

Open ~\ WebFormsStarterKit\izendadb.config then update the connection string to your IzendaWebForms DB which was created in the steps above. For example with [MSSQL] SQLServer:

{"ServerTypeId":"572bd576-8c92-4901-ab2a-b16e38144813","ServerTypeName":"[MSSQL] SQLServer","ConnectionString":"[your connection string to IzendaMvc]","ConnectionId":"00000000-0000-0000-0000-000000000000"}

The ServerTypeName would be one of the following: [MSSQL] SQL Server, [AZSQL] AzureSQL, [MYSQL] MySQL, [ORACL] Oracle, or [PGSQL] PostgreSQL. The ServerTypeId mappings are listed below.

Next, open ~\WebFormsStarterkit\Web.config again and modify the DefaultConnection value in the connectionStrings node to configure the Webforms application database link:

<connectionStrings><addname="DefaultConnection"connectionString="Server=[computername]\[databaseServerName];Database=WebFormsStarterKit;User Id=[userid];Password=[password];"providerName="System.Data.SqlClient"/></connectionStrings>

64-bit Oracle DLL Dependencies

If you encounter an error related to OracleDataAccesssDTC in Visual Studio, navigate to Tools -> Options -> Projects and Solutions -> Web Projects -> Check “Use the 64 bit version of IIS Express for web sites and projects”.

Run Starter Kit

Before you run your starter kit, ensure the Project Url setting in your project settings is set to use the same port that you configured for your IzendaApiUrl setting in your web.config.

With that minor detail taken care of, you can press F5 in visual studio to run your starter kit for the first time. The application page will look like the screenshot below:

There is nothing present from the Izenda UI at this time. At this step we are just checking whether Izenda API is able to start up completely or not. On your browser address add /api/ to the end of url (http://localhost:14809/api/) then press enter, you will see Izenda API is hosted completely:

In the ~\WebFormsStarterkit project folder you will see a logs folder with the log files webforms-kit.log and izenda-log.log (~\WebFormsStarterkit\logs).

Izenda API Hosting Troubleshooting

If you do not see the log files and 404 page above, check the following:

• Nancy hosting configuration is correct in the Web.config
• Ensure Nancy.dll and Nancy.Hosting.Aspnet.dll are referenced in the project.
• Check your routing configuration in RouteConfig.cs

IzendaConfig

Create IzendaConfig.cs file within the top level of the project and implement subscription for UserIntegrationConfig.GetAccessToken action and UserIntegrationConfig.ValidateToken action.

publicstaticclassIzendaConfig{publicstaticvoidRegisterLoginLogic(){UserIntegrationConfig.GetAccessToken=(args)=>{returnIzendaBoundary.IzendaTokenAuthorization.GetToken(newModels.UserInfo(){UserName=args.UserName,TenantUniqueName=args.TenantId});};UserIntegrationConfig.ValidateToken=(ValidateTokenArgsargs)=>{vartoken=args.AccessToken;varuser=IzendaBoundary.IzendaTokenAuthorization.GetUserInfo(token);returnnewValidateTokenResult{UserName=user.UserName,TenantUniqueName=user.TenantUniqueName};};}}

Action UserIntegrationConfig.GetAccessToken will convert user info to a token value.

Action UserIntegrationConfig.ValidateToken convert access token to user info.

Identity Models – Namespaces

1. Open Models\IdentityModels.cs.
2. Add the following namespaces so that it appears as below:

usingSystem;usingSystem.Security.Claims;usingSystem.Threading.Tasks;usingSystem.Web;usingMicrosoft.AspNet.Identity;usingMicrosoft.AspNet.Identity.EntityFramework;usingSystem.ComponentModel.DataAnnotations.Schema;usingSystem.Linq;

Identity Models – ApplicationUser class

1. Next in Models\IdentityModels.cs.
2. Add Tenant_Id property and custom claim identity like below:

    // You can add User data for the user by adding more properties to your User class, please visit http://go.microsoft.com/fwlink/?LinkID=317594 to learn more.
							public class ApplicationUser : IdentityUser
							    {
							        public int Tenant_Id { get; set; }
							        [ForeignKey("Tenant_Id")]
							        public Tenant Tenant { get; set; }
							public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
							{
							            // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
							            var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
							            if (Tenant != null)
							            {
							                userIdentity.AddClaims(new[] {
							                    new Claim("tenantName",Tenant.Name),
							                    new Claim("tenantId",Tenant.Id.ToString()),
							                });
							            }
							            var role = (await manager.GetRolesAsync(this.Id)).FirstOrDefault();
							            userIdentity.AddClaim(new Claim(ClaimsIdentity.DefaultRoleClaimType, role));
							            // Add custom user claims here
							            return userIdentity;
							        }
						

The ApplicationUser class represents the user model and maps to the AspNetUsers table. The Tenant_Id property is the foreign key reference to the tenant of the user. In the GenerateUserIdentityAsync method, we are adding the tenantId into the user identity. This value will be used to establish “claims” based on the user’s tenant.

Identity Models – Tenant

1. Next in Models\IdentityModels.cs.
2. Add a new Tenant class to represent a tenant object. This class is an entity model that maps to the Tenants table. The example below utilizes a very simple tenant model. You can customize this model to store more complex information.

1
										2
										3
										4
									5

publicclassTenant{publicintId{get;set;}publicstringName{get;set;}

Identity Models – ApplicationDBContext

This is the Entity Framework DB context of the entire authentication database. Because we added a new Tenants table, we must update the DB context to include our new model and link it to the entity.

publicclassApplicationDbContext:IdentityDbContext<ApplicationUser>{publicApplicationDbContext():base("DefaultConnection",throwIfV1Schema:false){}publicstaticApplicationDbContextCreate(){returnnewApplicationDbContext();}}}

If your starter kit contains another ApplicationDBContext definition, you may need to remove the duplicate to prevent errors.

Identity Config – Namespaces

1. Open App_Start\IdentityConfig.cs.
2. Add the following namespaces so that it appears as below:

usingSystem;usingSystem.Data.Entity;usingSystem.Linq;usingSystem.Security.Claims;usingSystem.Threading.Tasks;usingMicrosoft.AspNet.Identity;usingMicrosoft.AspNet.Identity.EntityFramework;usingMicrosoft.AspNet.Identity.Owin;usingMicrosoft.Owin;usingMicrosoft.Owin.Security;usingWebFormsStarterKit.Models;

Identity Config – ApplicationUserManager

1. Next in App_Start\IdentityConfig.cs.
2. Add a new method to the ApplicationUserManager class called FindTenantUserAsync. This will be used to query and retrieve users by tenant, username, and password.

publicasyncTask<ApplicationUser>FindTenantUserAsync(stringtenant,stringusername,stringpassword){varcontext=ApplicationDbContext.Create();varuser=awaitcontext.Users.Include(x=>x.Tenant).Where(x=>x.UserName.Equals(username,StringComparison.InvariantCultureIgnoreCase)).Where(x=>x.Tenant.Name.Equals(tenant,StringComparison.InvariantCultureIgnoreCase)).SingleOrDefaultAsync();if(awaitCheckPasswordAsync(user,password))returnuser;returnnull;}

Identity Configs – ApplicationSignInManager

1. Next in App_Start\IdentityConfig.cs.
2. Add a new method PasswordSigninAsync to customize sign in logic. This method utilizes the FindTenantUserAsync method added above to find a user with the specified username, password and tenant.

publicclassApplicationSignInManager:SignInManager<ApplicationUser,string>{publicApplicationSignInManager(ApplicationUserManageruserManager,IAuthenticationManagerauthenticationManager):base(userManager,authenticationManager){}publicasyncTask<bool>PasswordSignInAsync(stringtenant,stringusername,stringpassword,boolremember){varappUserManager=this.UserManagerasApplicationUserManager;if(appUserManager==null){returnfalse;}varuser=awaitappUserManager.FindTenantUserAsync(tenant,username,password);if(user!=null){awaitSignInAsync(user,remember,true);returntrue;}returnfalse;}

App_Start - WebApiConfig

1. Create App_Start\WebAPIConfig.cs
2. Add the following:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web.Http;namespaceWebFormsStarterKit{publicstaticclassWebApiConfig{publicstaticvoidRegister(HttpConfigurationconfig){config.MapHttpAttributeRoutes();config.Routes.MapHttpRoute(name:"DefaultApi",routeTemplate:"api/{controller}/{id}",defaults:new{id=RouteParameter.Optional});}}}

Login.aspx.cs - Namespace

1. Open Acount\Login.aspx.cs
2. Add the following namespaces so that it appears as below:

usingSystem;usingSystem.Globalization;usingSystem.Linq;usingSystem.Security.Claims;usingSystem.Threading.Tasks;usingSystem.Web;usingSystem.Web.UI;usingMicrosoft.AspNet.Identity;usingMicrosoft.AspNet.Identity.Owin;usingOwin;usingWebFormsStarterKit.Models;

Login.aspx.cs

1. Next in Acount\Login.aspx.cs
2. In Login method, implement the ApplicationSignInMangager/PasswordSigninAsync method as shown below.

protectedasyncvoidLogIn(objectsender,EventArgse){if(IsValid){//ValidatetheuserpasswordvarsigninManager=Context.GetOwinContext().GetUserManager<ApplicationSignInManager>();//Thisdoen't count login failures towards account lockout//Toenablepasswordfailurestotriggerlockout,changetoshouldLockout:truevarresult=awaitsigninManager.PasswordSignInAsync(Tenant.Text,Email.Text,Password.Text,RememberMe.Checked);if(result)IdentityHelper.RedirectToReturnUrl(Request.QueryString["ReturnUrl"],Response);else{FailureText.Text="Invalid login attempt";ErrorMessage.Visible=true;}//varresult=signinManager.PasswordSignIn(Email.Text,Password.Text,RememberMe.Checked,shouldLockout:false);//switch(result)//{//caseSignInStatus.Success://IdentityHelper.RedirectToReturnUrl(Request.QueryString["ReturnUrl"],Response);//break;//caseSignInStatus.LockedOut://Response.Redirect("/Account/Lockout");//break;//caseSignInStatus.RequiresVerification://Response.Redirect(String.Format("/Account/TwoFactorAuthenticationSignIn?ReturnUrl={0}&RememberMe={1}",//Request.QueryString["ReturnUrl"],//RememberMe.Checked),//true);//break;//caseSignInStatus.Failure://default://FailureText.Text="Invalid login attempt";//ErrorMessage.Visible=true;//break;//}}}

UserInfo

1. Create Models\UserInfo.cs
2. Add the following:

namespaceWebFormsStarterKit.Models{publicclassUserInfo{publicstringUserName{get;set;}publicstringTenantUniqueName{get;set;}}}

Update Login Page

1. Open Account\Login.aspx
2. Replace the contents of this file with the following from the GitHub WebFormsStarterKit equivalent. This will add a Tenant section to the login page.

<h4>Usealocalaccounttologin.</h4><hr/><asp:PlaceHolderrunat="server"ID="ErrorMessage"Visible="false"><pclass="text-danger"><asp:Literalrunat="server"ID="FailureText"/></p></asp:PlaceHolder><divclass="form-group"><asp:Labelrunat="server"AssociatedControlID="Tenant"CssClass="col-md-2 control-label">Tenant</asp:Label><divclass="col-md-10"><asp:TextBoxrunat="server"ID="Tenant"CssClass="form-control"/><asp:RequiredFieldValidatorrunat="server"ControlToValidate="Tenant"CssClass="text-danger"ErrorMessage="The tenant field is required"/></div></div><divclass="form-group"><asp:Labelrunat="server"AssociatedControlID="Email"CssClass="col-md-2 control-label">Email</asp:Label><divclass="col-md-10"><asp:TextBoxrunat="server"ID="Email"CssClass="form-control"TextMode="Email"/><asp:RequiredFieldValidatorrunat="server"ControlToValidate="Email"CssClass="text-danger"ErrorMessage="The email field is required."/></div></div>

ApiControllers - UserController

1. Create ApiControllers\UserController.cs
2. Add the following:

usingSystem.Web.Http;usingMicrosoft.AspNet.Identity;namespaceWebFormsStarterKit.ApiControllers{[Authorize][RoutePrefix("api/user")]publicclassUserController:ApiController{[Authorize][HttpGet][Route("GenerateToken")]publicstringGenerateToken(){varusername=User.Identity.GetUserName();vartenantName=((System.Security.Claims.ClaimsIdentity)User.Identity).FindFirstValue("tenantName");varuser=newModels.UserInfo{UserName=username,TenantUniqueName=tenantName};vartoken=IzendaBoundary.IzendaTokenAuthorization.GetToken(user);returntoken;}}}

global.asax.cs

1. Open global.asax.cs
2. Add the following code:

publicclassGlobal:HttpApplication{voidApplication_Start(objectsender,EventArgse){//CodethatrunsonapplicationstartupGlobalConfiguration.Configure(WebApiConfig.Register);RouteConfig.RegisterRoutes(RouteTable.Routes);BundleConfig.RegisterBundles(BundleTable.Bundles);IzendaConfig.RegisterLoginLogic();}}

Construct Izenda Menu Items

Open ~\Site.master then add menu items for Izenda pages:

<ulclass="nav navbar-nav"><li><arunat="server"href="~/">Home</a></li><li><arunat="server"href="~/About">About</a></li><li><arunat="server"href="~/Contact">Contact</a></li><%--Izenda--%><%if(Context.User.Identity.IsAuthenticated){%><li><arunat="server"href="~/IzendaRoot">Izenda</a></li><li><arunat="server"href="~/Settings">Settings</a></li><%--Reports--%><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#">Reports<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><arunat="server"href="~/Report/ReportDesigner">NewReport</a></li><li><arunat="server"href="~/Report/Reports">ReportList</a></li><%--AddtoreportViewertoDemo,hardcodeReportIDtolinkusertoaspecificreport-pleaseupdatethereportidwithonecreatedinyourenviroment--%><li><arunat="server"href="~/report/view/[your_report_id]">ReportViewer</a></li><li><arunat="server"href="~/Report/ReportParts">ReportParts</a></li></ul></li><%--Dashboards--%><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#">Dashboards<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><arunat="server"href="~/Dashboard/DashboardDesigner">NewDashboard</a></li><li><arunat="server"href="~/Dashboard/Dashboards">Dashboards</a></li><%--AddtodashboardViewertoDemo,hardcodeDashboardIDtolinkusertoaspecificdashboard-pleaseupdatethedashboardidwithonecreatedinyourenviroment--%><li><arunat="server"href="~/dashboard/view/[your_dashboard_id]">DashboardViewer</a></li></ul></li><%}%></ul>

Note that the menu redirects require the creation of several new pages. These will be created in a later section.

Important! The webforms starter project will include the main placeholder for body content inside a form tag. This will cause some Izenda buttons to improperly issue a ‘submit’ event. To fix this, place the following code

<divclass="container body-content"><asp:ContentPlaceHolderID="LoginContent"runat="server"></asp:ContentPlaceHolder></div></form><divclass="izenda-container body-content"><asp:ContentPlaceHolderID="MainContent"runat="server"></asp:ContentPlaceHolder></div><hr/><footer><p>&copy;<%:DateTime.Now.Year%>-MyASP.NETApplication</p></footer>

In addition, another change is required to allow the Login page to continue working. Notice that in the above sample, we have added another placeholder inside the form tag with the ID “LoginContent”. We will need to change the placeholder reference in Login.aspx to match.

<%@RegisterSrc="~/Account/OpenAuthProviders.ascx"TagPrefix="uc"TagName="OpenAuthProviders"%><asp:Contentrunat="server"ID="LoginContent"ContentPlaceHolderID="MainContent"><h2><%:Title%>.</h2><divclass="row">

Optional: Izenda uses a class called “container” with some CSS to scale Izenda’s components to fit the container’s size. The webforms sample project uses the container class to limit the available display area of contents. To expand the available space, you can perform the following actions:

Remove the container class completely from the nav bar

<divclass="navbar navbar-inverse navbar-fixed-top"><divclass="container"><divclass="navbar-header">

Change the container class to “izenda-container” in the body-content div

<divclass="izenda-container body-content"><asp:ContentPlaceHolderID="MainContent"runat="server"></asp:ContentPlaceHolder></div>

Add the following css to the Site.css file

.izenda-container{width:100%;height:100vh;min-height:100vh;}

Implement Izenda Configuration Initialization

Add Javascript code below into the bottom of the Site.Master to initialize the Izenda Configuration and sub menu dropdown display. The function DoIzendaConfig() is located in ~\Scripts\izenda.integrate.js. It initializes the main config values needed to run Izenda’s integrated UI such as the API Service Url, the path of the Izenda embedded JavaScript package, custom CSS styling, Izenda UI routing config, and the request timeout.

    <%-- Izenda --%>
							    <script type="text/javascript">
							        $(document).ready(function () {
							            DoIzendaConfig();
							            $('[data-toggle="tooltip"]').tooltip();
							            $('[data-toggle="dropdown"]').dropdown();
							            $("#reportPartLoader").hide();
							            $("#reportPartLoaderText").hide();
							        });
							    </script>
							</body>
							</html>
						

Embedding Izenda full page

Create ~\Izenda.aspx

This page is used to embedded the entire Izenda application into one view.

In this page, we will call the function izendaInit() defined in ~\Scripts\izenda.integrate.js. The full Izenda UI will be rendered when opening this page, including the ReportViewer, ReportDesigner, Dashboard, and Setting pages. Navigation will be fully contained within the single page.

<%@ Page Title="Izenda" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Izenda.aspx.cs" Inherits="WebFormsStarterKit.IzendaRoot" %>
							<asp:Content ID="IzendaContent" ContentPlaceHolderID="MainContent" runat="server">
							<script type="text/javascript">
							$(document).ready(function () {
							izendaInit();
							});
							</script>
							<div class="loader" id="progressLoader"></div>
							<div class="izenda-container" id="izenda-root"></div>
							</asp:Content>
						

We have 2 empty div elements for each Izenda page. The loader div is used for displaying the progress bar when the page is waiting for a response from the Izenda back-end. The div izenda-container is the container for Izenda page content.

Embedding Specific Izenda Pages

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Settings.aspx.cs" Inherits="WebFormsStarterKit.Settings" %>
								<asp:Content ID="SettingsContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								izendaInitSetting();
								});
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

<%@ Page Title="Report List" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Reports.aspx.cs" Inherits="WebFormsStarterKit.Report.Reports" %>
								<asp:Content ID="ReportsContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								izendaInitReport();
								});
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

<%@ Page Title="New Report" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ReportDesigner.aspx.cs" Inherits="WebFormsStarterKit.Report.ReportDesigner" %>
								<asp:Content ID="ReportDesignerContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								izendaInitReportDesigner();
								});
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReportPart.aspx.cs" Inherits="WebFormsStarterKit.Report.ReportPart" %>
								<!DOCTYPE html>
								<html xmlns="http://www.w3.org/1999/xhtml">
								<head runat="server">
								<meta charset="utf-8" />
								<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
								<title>Report Viewer</title>
								<webopt:BundleReference runat="server" Path="~/Content/css" />
								<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
								<%: Scripts.Render("~/bundles/modernizr") %>
    
								<%--Apply css--%>
								<link href="~/Scripts/izenda/izenda-ui.css" rel="stylesheet"/>
								</head>
								<body>
								<%: Scripts.Render("~/bundles/jquery") %>
								<%: Scripts.Render("~/bundles/bootstrap") %>
								<%: Scripts.Render("~/bundles/izenda") %>
								<script type="text/javascript">
								$(document).ready(function () {
								DoIzendaConfig();
								$('[data-toggle="tooltip"]').tooltip();
								$('[data-toggle="dropdown"]').dropdown();
								$("#reportPartLoader").hide();
								$("#reportPartLoaderText").hide();

								            izendaInitReportPartExportViewer('<%=ReportId%>', '<%=Token%>');
								            // $('#izenda-root').children().first().removeClass('izenda');
								//var classList = $('#izenda-root').children().first().attr('class').split(/\s+/);
								//$.each(classList, function (index, item) {
								//    console.log(item);
								//});
								});
								</script>
								<style>
								#izenda-root > .izenda {
								background-color: transparent !important;
								}
								</style>
								<div class="izenda-container" id="izenda-root" style="margin-top: 0px;"></div>
								</body>
								</html>
							

usingSystem;usingSystem.Web.UI;namespaceWebFormsStarterKit.Report{publicpartialclassReportPart:Page{privatestaticreadonlylog4net.ILogLogger=log4net.LogManager.GetLogger(typeof(ReportPart));publicstringReportId{get;set;}publicstringToken{get;set;}protectedvoidPage_Load(objectsender,EventArgse){ReportId=(Page.RouteData.Values["id"]+string.Empty);Token=Request.QueryString["token"];Logger.DebugFormat("Render report part id={0}, token={1}",ReportId,Token);}}}

<%@ Page Title="Report Viewer" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ReportViewer.aspx.cs" Inherits="WebFormsStarterKit.Report.ReportViewer" %>
								<asp:Content ID="ReportViewerContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								            izendaInitReportViewer('<%=ReportId%>');
								        });
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

usingSystem;usingSystem.Collections.Generic;usingSystem.Web.UI;namespaceWebFormsStarterKit.Report{publicpartialclassReportViewer:Page{privatestaticreadonlylog4net.ILogLogger=log4net.LogManager.GetLogger(typeof(ReportViewer));publicstringReportId{get;set;}protectedvoidPage_Load(objectsender,EventArgse){ReportId=(Page.RouteData.Values["id"]+string.Empty);Logger.DebugFormat("Render Report ID={0}",ReportId);}}}

//Renderreportpartstospecific<div>tagbyreportpartidvarizendaInitReportPartDemo=function(){functionsuccessFunc(data,status){console.info(data);varcurrentUserContext={token:data};//Youcanaddreportpartsaftercreatingreportsusingthecontextbelow//AddthereportpartID's in the <reportPartIds> arrayvarreportPartIds=newArray("[your 1st report part id]","[your 2nd report part id]","[your 3rd report part id]","[your 4th report part id]");IzendaSynergy.setCurrentUserContext(currentUserContext);for(vari=0;i<reportPartIds.length;i++){//createreportpartcontainervarreportPartNode=document.createElement("div");reportPartNode.className="report-part-chart";//RenderreportpartIzendaSynergy.renderReportPart(reportPartNode,{"id":reportPartIds[i]});//Appendtoizenda-rootcontainerdocument.getElementById('izenda-root').appendChild(reportPartNode);}}this.DoRender(successFunc);};

<%@ Page Title="Report Parts" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ReportParts.aspx.cs" Inherits="WebFormsStarterKit.Report.ReportParts" %>
								<asp:Content ID="ReportPartsContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								            izendaInitReportPartDemo();
								        });
								</script>
    
								<style>
								.report-part-chart {
								float: left;
								width: 40%;
								height:  40%;
								margin-left: 20px;
								margin-top: 20px;
								background-color: white;
								}
								.report-part-grid {
								float: left;
								width: 40%;
								height:  50%;
								margin-left: 20px;
								margin-top: 20px;
								background-color: white;
								}
								</style>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

Embedding the Dashboard

<%@ Page Title="Dashboards" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboards.aspx.cs" Inherits="WebFormsStarterKit.Dashboard.Dashboards" %>
								<asp:Content ID="DashboardsContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								            izendaInitDashboard();
								        });
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

<%@ Page Title="New Dashboard" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DashboardDesigner.aspx.cs" Inherits="WebFormsStarterKit.Dashboard.DashboardDesigner" %>
								<asp:Content ID="DashboardDesignerContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								            izendaInitNewDashboard();
								        });
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DashboardViewer.aspx.cs" Inherits="WebFormsStarterKit.Dashboard.DashboardViewer" %>
								<asp:Content ID="DashboardViewerContent" ContentPlaceHolderID="MainContent" runat="server">
								<script type="text/javascript">
								$(document).ready(function () {
								            izendaInitDashboardViewer('<%=DashboardId%>');
								        });
								</script>
								<div class="loader" id="progressLoader"></div>
								<div class="izenda-container" id="izenda-root"></div>
								</asp:Content>
							

usingSystem;usingSystem.Web.UI;namespaceWebFormsStarterKit.Dashboard{publicpartialclassDashboardViewer:Page{privatestaticreadonlylog4net.ILogLogger=log4net.LogManager.GetLogger(typeof(DashboardViewer));publicstringDashboardId{get;set;}protectedvoidPage_Load(objectsender,EventArgse){DashboardId=(Page.RouteData.Values["id"]+string.Empty);Logger.DebugFormat("Render Dashboard ID={0}",DashboardId);}}}