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

**URL:** <https://discuss.workflowgen.com/t/form-designer-styles-field-databinding-custom-tools-and-net-user-control/644>\
**Category:** Form Designer\
**Created:** [December 29, 2016, 5:03pm UTC](https://discuss.workflowgen.com/t/form-designer-styles-field-databinding-custom-tools-and-net-user-control/644 "2016-12-29T17:03:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![pnicoll](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/pnicoll/32/454_2.png) [@pnicoll](https://discuss.workflowgen.com/u/pnicoll)\
**Post date:** [December 29, 2016, 5:03pm UTC](https://discuss.workflowgen.com/t/form-designer-styles-field-databinding-custom-tools-and-net-user-control/644/1 "2016-12-29T17:03:30Z")

</div>

### 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.

 ![](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/b18d75b50d660392a3bfc96bc20d55f59e76ec1c.png)

### Field databinding

#### Example of a listbox databinding:

 ![](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/cddb6c8873dc3d58bef97113215b9a935d57f8bd.png)

### .NET code-behind

 ![](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/495c27ae0a6c639064765cd661f2c8d6222b6ea5.png)

### JavaScript code

You can add JavaScript code to forms.

 ![](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/6fe63884d9a86525d54f2da1ce0638e71f449a97.png)

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

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

```

jQuery libraries can be included. [Click here for a code sample using a query library](https://discuss.workflowgen.com/t/form-designer-textarea-tool-autoresize-automatically-adjust-textarea-height/275).

### 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`

```auto
<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](https://discuss.workflowgen.com/t/form-designer-custom-tools-samples/245)

#### 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`

```auto
<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`

```auto
<%@ 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\*

```auto
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.](https://discuss.workflowgen.com/t/form-designer-example-of-a-custom-web-user-control-tool/244)