Overview
Power pages can be defined as custom pages that can be added to the Action Hub, previously known as XMWorkspace. Power pages normally consist of an ASPX file and it’s associated code, written in C#. These pages can be written by anyone with the correct priveledges and can be created within the Action Hub or created elsewhere and uploaded to the Action Hub with the help of XMDesigner’s Transfer Manager. Power Pages also makes it possible for administrators to easily track who added which custom page to the Action Hub and logs all changes made to existing custom pages.
Features
Power pages are listed in a table in the Action Hub. The information kept in this table are as described below.
- Page name (name of the page)
- URL (URL that links to the page)
- Version (latest version available of the page)
- Modified By (last person to have modified the page)
- Modified At (last date and time the page was modified)
Synchronize Files
After you have transferred power pages to a different Action Hub instance in XMDesignerIs used to configure XMPro BPM solutions. using the Transfer Manager, you will be able to see them in Action Hub. However, all of the power page files will not be automatically available in the location of the Action Hub instance where you transferred them to. To make sure that they are available, click on the Synchronize Files button. After the files are synchronized, the links displayed for the power pages you transferred will navigate you to your pages when clicked on.
Creating a new power page
To create a new power page, follow the steps listed below.
- Click on the “+”-icon in the header row of the grid.
- Choose an appropriate name for the page.
- Make the changes needed in the markup. Please note that the code provided to you in the Markup-tab is a template, which you can use to build upon when writing your own code or replace completely with your own code.
- Click on the Code Editor-tab. As in the Markup-tab, the code provided to you here is a template, which you can use to get started writing your own code, or you can completely replace it with what you’ve written.
- Edit the code, as needed.
- Click Save and Close.
Example
The code, markup and preview below is an example of a power page.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”71c7313b-c727-4d21-a86e-ca6fa3024d5b.aspx.cs” Inherits=”XMPro.XMWorkspace.PowerPages.PowerPage_PLACEHOLDER” %>
<asp:content contentplaceholderid=”HeaderContent” id=”Head” runat=”server”></asp:content>
<asp:content id=”Search” contentplaceholderid=”SearchContent” runat=”server”>
<xm:SearchID=”taskItemSearch”runat=”server”Disabled=”true”/>
</asp:content>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”MainContent” runat=”server”>
<script type=”text/javascript”>
</script>
<div class=”tbDetail”>
<div class=”taskheading”>
<table><tr><td><asp:Label id=”lblName” runat=”server”></asp:Label></td></tr></table>
</div>
<div class=”error”runat=”server”id=”errorDiv”Visible=”false”EnableViewState=”false”>
<table class=”tbDetail”>
<tr>
<td class=”wrnHead”>
<asp:Label id=”lblMessage”runat=”server”></asp:Label>
<dx:ASPxPopupControl ID=”errorPopupControl” runat=”server” ShowPageScrollbarWhenModal=”true” PopupHorizontalAlign=”WindowCenter” PopupVerticalAlign=”WindowCenter”
AllowDragging=”true” MinWidth=”600″ MinHeight=”200″Modal=”true” AllowResize=”true” CloseAction=”CloseButton”>
<ContentCollection>
<dx:PopupControlContentControl><asp:labelid=”lblMessage3″runat=”server”></asp:label></dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</td>
</tr>
</table>
<div class=”errorClose”>
<dx:ASPxButtonID=”btnHide” runat=”server” UseSubmitBehavior=”false” AutoPostBack=”false” CausesValidation=”false” EnableTheming=”false” CssClass=”NoStyle” Cursor=”pointer”>
<Image Height=”12px”Width=”12px”></Image>
<ClientSideEvents Click=”function(s,e){ document.get ElementById(‘errorDiv’).style.display = ‘none’; }”/>
</dx:ASPxButton>
</div>
</div>
<div class=”formcontainer”>
<div id=”detailNoWidget” class=”formtask”>
<div id=”container”class=”formcontainer” xmlns:dx=”remove”>
<div class=”formwrapper”>
<!– BEGIN Trigger Buttons –>
<div id=”trigger” class=”RowButtonTrigger”>
<table class=”triggerDetail”>
<tbody>
<tr class=”triggerHeader”>
<td class=”triggerHeader”>Select Action</td>
</tr>
<tr>
<td class=”RowButton”><span>
<dx:ASPxButtonID=”btnSave” runat=”server”
ClientInstanceName=”btnSave” Text=”Save” Width=”140px”
OnClick=”btnSave_Click” CausesValidation=”False”>
<ClientSideEvents Click=”function(s,e){loadingPanel.Show();}”></ClientSideEvents>
</dx:ASPxButton>
</span>
</td>
</tr>
<tr>
<td class=”RowButton”><hr/></td>
</tr>
<tr>
<td class=”RowButton”>
<dx:ASPxButtonID=”btnReset” runat=”server”
ClientInstanceName=”btnReset” Text=”Reset” Width=”140px”
OnClick=”btnReset_Click” CausesValidation=”False”>
<ClientSideEvents Click=”function(s,e){loadingPanel.Show();}”></ClientSideEvents>
</dx:ASPxButton>
</td>
</tr>
</tbody>
</table>
</div>
<!– END Trigger Buttons –>
<div id=”detail” class=”formdetailtrigger”>
<div style=”font-size: 24px; color: slateblue; padding-top: 15px; padding-bottom: 15px; font-weight: bold; font-family: Arial; width: 100%; border-bottom: slateblue 1px solid; margin-bottom: 10px;”>
Employee Records
</div>
<div id=”tabs” style=”display:none;”>
<ul>
<li><a href=”#tab-1″>IT</a></li>
<li><a href=”#tab-2″>Finance</a></li>
<li><a href=”#tab-3″>Marketing</a></li>
</ul>
<div id=”tab-1″>
<!– Form Layout Sample –>
<table class=”tbDetail” width=”100%”>
<tr height=”10px”></tr>
<tr height=”10px”></tr>
<tr class=”rowDetail”>
<td style=”width:15%;font-weight:bold;”>
Last Updated
</td>
<td colspan=”3″ style=”width:15%;”>
17 March 2018
</td>
</tr>
<tr height=”10px”></tr>
<tr class=”rowDetail”>
<td style=”width:15%;font-weight:bold;”>
Updated By
</td>
<td style=”width:35%;”>
Keith Miller
</td>
</tr>
<tr height=”10px”></tr>
</table>
<!– Grid Sample –>
<table class=”tbDetail” width=”100%”>
<tr class=”rowDetail”>
<!– BEGIN Grid –>
<td class=”row_OG_Main”>
<div class=”ogDetail”>
<table cellpadding=’0′ cellspacing=’0 ‘ style=”width:100%”>
<tr>
<td align=”center” class=’rowDet_OG_Header’>
<div style=”float:left;”>
<!– Grid Header Caption –>
Employees
</div>
<!– Export Button –>
<div style=”float:right;padding-right:5px;”>
<asp:imageButton id=”btnExportXLS” runat=”server” width=”16″ height=”16″
ImageUrl=”https://www.bing.com/th?id=OIP.fCLOUWKMlhjDKmhM-EbJqwHaGz&pid=Api&rs=1&p=0″
AlternateText=”Export to Excel (XLSX)” ToolTip=”Export to Excel (XLSX)”
CasusesValidation=”false” OnClick=”btnExportXLS_Click”/>
</div>
</td>
</tr>
<tr>
<td>
<dx:ASPxGridView ID=”grid” runat=”server” ClientInstanceName=”grid”
DataSourceID=”gridDataSource”
KeyFieldName=”ID”Width=”100%”>
<Columns>
<dx:GridViewDataColumn FieldName=”ID”></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName=”FirstName”></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName=”LastName”Caption=”Date”></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName=”EMail”></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName=”TelCell”></dx:GridViewDataColumn>
</Columns>
</dx:ASPxGridView>
<asp:sqldatasource id=”gridDataSource” runat=”server” OnInit=”gridDataSource_Init”></asp:sqldatasource>
</td>
</tr>
</table>
</div>
</td>
<!– END Grid –>
</tr>
<tr height=”10px”></tr>
</table>
</div>
<div id=”tab-2″>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using XMPro.XMWorkspace;
using XMPro.XMServer;
using XMPro.XMServer.Core.CoreExtensions;
using XMPro.XMServer.DataAccess;
using DevExpress.Web;
using XMPro.XMServer.Library;
using System.Data;
using System.Drawing;
using DevExpress.Utils;
using DevExpress.Data.Filtering;
using DevExpress.Web.Data;
using System.Data.SqlClient;
using System.Text;
using System.Text.RegularExpressions;
namespace XMPro.XMWorkspace.PowerPages
{
public partial class PowerPage_PLACEHOLDER : XMPro.XMWorkspace.BasePage
{
/// <summary>
/// Use this event for the following:
/// – Check the IsPostBack property to determine whether this is the first time the page is being processed.
/// The IsCallback and IsCrossPagePostBack properties have also been set at this time.
/// – Set base page properties
/// </summary>
protected override void OnPreInit(EventArgs e)
{
//Set page master
this.Page.MasterPageFile = XMPro.XMServer.Settings.MasterPage;
base.OnPreInit(e);
//Intialise Base Properties
base.Title = “Sample Power Page”;
}
/// <summary>
/// Raised after all controls have been initialized and any skin settings have been applied.
/// The Init event of individual controls occurs before the Init event of the page.
/// Use this event to read or initialize control properties.
/// </summary>
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (Session[“Credentials”] == null)
{
if (!IsCallback)
{
Response.Redirect(“~/default.aspx”, true);
}
else
{
ASPxWebControl.RedirectOnCallback(“~/default.aspx”);
}
}
//Further initialise other controls here
grid.SettingsPager.PageSize = 10;
if (!Page.IsPostBack && !Page.IsCallback)
{
}
}
protected void gridDataSource_Init(object sender, EventArgs e)
{
var datasource = sender as SqlDataSource;
datasource.ConnectionString =“sampleconnectionstring”;
datasource.SelectCommandType = SqlDataSourceCommandType.Text;
datasource.SelectCommand = @”
SELECT [ID]
,[FirstName]
,[LastName]
,[EMail]
,[TelCell]
FROM [dbo].[Users]”;
}
/// <summary>
/// The Page calls the OnLoad method on the Page object, and then recursively does the same for
/// each child control until the page and all controls are loaded.
/// The Load event of individual controls occurs after the Load event of the page.
/// Use the OnLoad event method to set properties in controls and to establish database connections.
/// </summary>
protected void Page_Load(object sender, EventArgs e)
{
grid.DataBind();
}
#region Button Click Handlers
protectedvoid btnSave_Click(object sender, EventArgs e)
{
try
{
//Implement submit logic
}
catch(Exception ex)
{
throw ex;
}
}
protected virtual void btnReset_Click(object sender, EventArgs e)
{
base.Response.Redirect(base.Request.Url.AbsoluteUri, true);
}
protected void btnExportXLS_Click(object sender, EventArgs e)
{
grid.ExportXlsxToResponse(“ExportFilename.xlsx”);
}
#endregion
}
}
To get this example to work, do the following:
Step 1:
Replace the connection string in the gridDataSource_Init(object sender, EventArgs e) method in the code editor with a connection string of your own.
Step 2:
Edit the data source of the grid to display the data from your own database; the columns you add here should be contained in the SELECT statement mentioned in Step 1.
