Form Designer: Styles, field databinding, custom tools, and .NET user control


#1

Styles

You can create your own CSS stylesheet for forms. CSS files are located in the \wfgen\App_Data\Templates\Forms\En\Default\css folder.

Field databinding

Example of a listbox databinding:

.NET code-behind

JavaScript code

You can add JavaScript code to forms.

To ensure that your custom client-side JavaScript code is executed in runtime mode only, enclose your JavaScript code with the following IF block:

if (typeof $selectedObject === "undefined")
{
    // Place your code here
} 

jQuery libraries can be included. Click here for a code sample using a query library.

Custom tools

You can create custom tools based on existing section or fields.

Tool definitions are text files stored in the \wfgen\App_Data\Templates\Forms\En\Default\fields and \wfgen\App_Data\Templates\Forms\En\Default\sections server folders.

Example of a textarea field tool without border

TextAreaNoBorder.txt: Form designer tool definition file; must be placed in \wfgen\App_Data\Templates\Forms\En\Default\fields

<div class="Field" id="_ROW">
    <div class="FieldCaption"><label class="FieldCaptionLabel" for="_TEXTAREA">TextArea:</label></div>
    <div class="FieldValue"><textarea class="FieldValueInput" id="_TEXTAREA" title="TextArea" rows="5" style="border-style:none;overflow-x:hidden;overflow-y:hidden;"></textarea></div>
</div>

Click here for custom tools samples

Example of a custom web user control field tool

MyUserControl.txt: Form designer tool definition file; must be placed in \wfgen\App_Data\Templates\Forms\En\Default\fields

<div class="Field" id="_ROW">
    <!-- <%@ Register TagPrefix="muc" TagName="MyUserControl" Src="~/MyUserControl.ascx" %> -->
    <div class="FieldCaption"><label class="FieldCaptionLabel" for="_MUC1">User Control:</label></div>
    <div class="FieldValue"><muc:MyUserControl ID="_MUC1" class="FieldValueInput" runat="server" /></div>
</div>

MyUserControl.ascx: ASP.NET web user control file; must be placed in \wfgen\WfApps\WebForms

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyUserControl.ascx.cs" Inherits="MyUserControl" %>
<p>
<asp:TextBox ID="TextBox1" class="FieldValueInput" runat="server" />
</p>
<p>
<asp:ListBox ID="ListBox1" class="FieldValueInput" runat="server">
    <asp:ListItem Text="Red" Value="#FF0000" Selected="True" />
    <asp:ListItem Text="Blue" Value="#0000FF" />
    <asp:ListItem Text="Green" Value="#008000" />
</asp:ListBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Click me" OnClick="Button1_Click" />
</p>

MyUserControl.ascx.cs: ASP.NET web user control code-behind file; must be placed in \wfgen\WfApps\WebForms*

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MyUserControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Place your Page_Load code here
    }

    protected void Button1_Click(Object sender, EventArgs e)
    {
        TextBox1.Text = "Button1 clicked!";
    }
}

Click here for a sample custom web user control tool.