NAV Navbar
code
  • Introduction
  • Prerequisites
  • Installation
  • Setup
  • Views
  • Template Controls
  • Form Controls
  • Form Actions
  • Recipes
  • Release Notes
  • Introduction

    Welcome to the Form.X for XMod Pro documentation. Form.X is a powerful control that allows you to embed forms within an XMod Pro template. This allows you to add and edit data without a page refresh, create contact forms and more!

    Prerequisites

    Form.X requires the following:

    Installation

    Navigate to your extensions page and install Reflect_XModPro_FormX_##.##.##.Install.zip as you would any typical module.

    Setup

    Example setup

    <xmod:Register TagPrefix="fx"
                   Namespace="Reflect.XModPro.Templates.FormX"
                   Assembly="Reflect.XModPro.Templates.FormX" />
    
    <xmod:Template Id="ContactUs" Ajax="True">
    
      <DetailDataSource CommandText="SELECT 1" />
      <DetailTemplate>
        <fx:FormX Mode="Add">
          <addform>
            <div class="form">
              <div class="form-group">
                <label for="Firstname">First name</label>
                <Textbox Id="Firstname" Datafield="Firstname" Datatype="String" CssClass="form-control" />
                <Validate Type="Required" Target="Firstname" Text="* Required" />
              </div>
              <div class="form-group">
                <label for="Lastname">Last name</label>
                <Textbox Id="Lastname" Datafield="Lastname" Datatype="String" CssClass="form-control" />
                <Validate Type="Required" Target="Lastname" Text="* Required" />
              </div>
              <div class="form-group">
                <label for="Comments">Comments</label>
                <Textarea Id="Comments" Datafield="Comments" CssClass="form-control" />
                <Validate Type="Required" Target="Comments" Text="* Required" />
              </div>
    
              <AddButton Text="Send Message" CssClass="btn btn-primary" />
    
            </div>
    
            <Email To="change@me.com"
                   From="change@me.com"
                   Subject="Message from {{Firstname}}" Format="Text">
    
                Hello. You got a message:
    
                Name: {{Firstname}}
                Last Name: {{Lastname}}
                Comments: {{Comments}}
            </Email>
          </addform>
          <addsuccesstemplate>
            <div class="alert alert-success">
              <p>
                Thanks, {{Firstname}}! We'll get back to you ASAP!
              </p>
    
              <ContinueButton Text="Continue" CssClass="btn btn-default" />
            </div>
          </addsuccesstemplate>
        </fx:FormX>
    
      </DetailTemplate>
    
    </xmod:Template>
    

    Form.X operates within an <xmod:Template> tag. You must register the control within your XMod Pro template file. See the example code on the right. Create a new template. We will use a simple contact form example to get you started. The different token syntax you will see will be explained in just a bit!

    Views

    <fx:FormX AddRoles="Role1,Role2" EditRoles="Role1,Role2" Mode="Template|Add|Edit">
      <template>...</template>
      <addform>...</addform>
      <addsuccesstemplate>...</addsuccesstemplate>
      <editform>...</editform>
      <editsuccesstemplate>...</editsuccesstemplate>
    </fx:FormX>
    

    Form.X contains the following views:

    The naming of views should look familiar to you. A typical workflow would look like this:

    Simple, right?

    You can override the default view (i.e. <Template>) by setting the Mode property. This is good for contact forms.

    You can also, similar to XMod Pro templates, specify DNN Security roles for <fx:AddButton> and <fx:EditButton>. As you would expect, this defaults to Administrators and Super Users.

    See the example on the right.

    <Template>

    The <Template> tag is nested within the parent <fx:FormX> control.

    Unless otherwise specified (i.e. <fx:FormX Mode="Add">) this will be the default view.

    <AddForm>

    <fx:FormX Mode="Add">
      <addform Clientname="string">
    
        <SelectCommand .../>
        <SubmitCommand .../>
        <ControlDataSource .../>
    
        ... HTML and Form Controls
    
      </addform>
    
      <addsuccesstemplate>...</addsuccesstemplate>
    </fx:FormX>
    

    The <AddForm> tag is nested within the parent <fx:FormX> control.

    This view is triggered from within the <Template> when a <fx:AddButton> is clicked.

    The <SelectCommand> works much like XMod Pro's <SelectCommand> within forms.

    The <SubmitCommand> does as well, with the exception of return parameters, output parameters, and database validation (i.e. <Validate Type="Database" />). This feature is coming soon!

    The ClientName works much like XMod Pro's ClientName feature on forms. Be sure to provide a unique name (i.e. MyAwesomeForm) for each instance of the AddForm. This creates a function so you can access your controls by their ID.

    <AddSuccessTemplate>

    <fx:FormX Mode="Add">
      <addform>
    
        <SelectCommand .../>
        <SubmitCommand .../>
        <ControlDataSource .../>
    
        ... HTML and Form Controls
    
        <AddButton Text="Save" />
    
      </addform>
    
      <addsuccesstemplate>
    
        Congratulations, {{Firstname}}! <ContinueButton Text="Continue" />
    
      </addsuccesstemplate>
    </fx:FormX>
    

    The <AddSuccessTemplate> tag is nested within the parent <fx:FormX> control.

    This view is triggered from within the <AddForm> when a <AddButton> is clicked, following successful form submission.

    <EditForm>

    <fx:FormX>
      <template>
    
        HTML and Template Controls...
    
        <fx:EditButton Text="Edit">
          <Parameter Name="ProductID" Value='[[ProductID]]' DataType="Int32" />
        </fx:EditButton>
      </template>
      <editform ClientName="string">
    
        <SelectCommand CommandText="SELECT * FROM dbo.Product WHERE ProductID = @ProductID" />
        <SubmitCommand .../>
        <ControlDataSource .../>
    
        ... HTML and Form Controls
    
      </editform>
    
      <editsuccesstemplate>...</editsuccesstemplate>
    </fx:FormX>
    

    The <EditForm> tag is nested within the parent <fx:FormX> control.

    This view is triggered from within the <Template> when a <fx:EditButton> is clicked.

    The <SelectCommand> works much like XMod Pro's <SelectCommand> within forms.

    The <SubmitCommand> does as well, with the exception of return parameters, output parameters, and database validation (i.e. <Validate Type="Database" />). This feature is coming soon!

    The ClientName works much like XMod Pro's ClientName feature on forms. Be sure to provide a unique name (i.e. MyAwesomeForm) for each instance of the EditForm. This creates a function so you can access your controls by their ID.

    <EditSuccessTemplate>

    <fx:FormX>
      <template>
    
        HTML and Template Controls...
    
        <fx:EditButton Text="Edit">
          <Parameter Name="ProductID" Value='[[ProductID]]' DataType="Int32" />
        </fx:EditButton>
      </template>
      <editform>
    
        <SelectCommand CommandText="SELECT * FROM dbo.Product WHERE ProductID = @ProductID />
        <SubmitCommand .../>
        <ControlDataSource .../>
    
        ... HTML and Form Controls
    
        <UpdateButton Text="Save" />
    
      </editform>
    
      <editsuccesstemplate>
        Congratulations, you updated the product's name to {{ProductName}}!
      </editsuccesstemplate>
    </fx:FormX>
    

    The <EditSuccessTemplate> tag is nested within the parent <fx:FormX> control.

    This view is triggered from within the <EditForm> when a <EditButton> is clicked, following successful form submission.

    Template Controls

    <fx:FormX AddRoles="Role1,Role2" EditRoles="Role1,Role2" Mode="Template|Add|Edit">
      <template>...</template>
    </fx:FormX>
    

    The following controls can be used within the <template> tag:

    <fx:AddButton>

    <fx:FormX Mode="Template">
      <template>
    
        <fx:AddButton Text="Add Record">
          <Parameter ... />
        </fx:AddButton>
    
      </template>
    
      <addform>...</addform>
    </fx:FormX>
    

    The <fx:AddButton> control loads the <AddForm> when clicked. You can optionally pass parameters from your template which can be retrieved from within your form's <SelectCommand>.

    <fx:EditButton>

    <fx:FormX Mode="Template">
      <template>
    
        <fx:EditButton Text="Edit Record">
          <Parameter Name="ProductID" Value='[[ProductID]]' DataType="Int32" />
        </fx:EditButton>
    
      </template>
    
      <editform>
        <SelectCommand Commandtext="SELECT * FROM dbo.Product WHERE ProductID = @ProductID" />
    
        ... HTML and form controls
      </editform>
    </fx:FormX>
    

    The <fx:EditButton> control loads the <EditForm> when clicked. You can optionally pass parameters from your template which can be retrieved from within your form's <SelectCommand>.

    Form Controls

    <fx:FormX AddRoles="Role1,Role2" EditRoles="Role1,Role2" Mode="Template|Add|Edit">
      <addform>...</addform>
      <editform>...</editform>
    </fx:FormX>
    

    <AddButton>

    <AddButton
       CssClass="string"
       Height="size"
       OnClientClick="string"
       Style="string"
       TabIndex="integer"
       Text="string"
       ToolTip="string"
       Visible="True|False"
       Width="size"
    
       <Command ... />
    />
    

    The <AddButton> control should only be used within the <AddForm> view.

    Take a look at the XMod Pro official documentation on the <CommandButton> control. In Form.X, the <AddButton> supports the nested commands. This allows you to target your other templates by ID.

    <CalendarButton>

    <CalendarButton
        CssClass="string"
        Format="date-formatting expression"
        Height="size"
        Style="string"
        TabIndex="integer"
        Target="ID of control that will receive the selected date"
        Text="string"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    
    <CalendarLink
        CssClass="string"
        Format="date-formatting expression"
        Height="size"
        Style="string"
        TabIndex="integer"
        Target="ID of control that will receive the selected date"
        Text="string"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <CalendarImage>

    <CalendarImage
        CssClass="string"
        Format="date-formatting expression"
        Height="size"
        Style="string"
        TabIndex="integer"
        Target="ID of control that will receive the selected date"
        Text="string"
        ToolTip="string"
        Visible="True|False"
        Width="size"
        ImageUrl="url"
    />
    

    <CancelButton>

    <CancelButton
        CssClass="string"
        Height="size"
        Style="string"
        TabIndex="integer"
        Text="string"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <Captcha>

    <Captcha
        CaptchaChars="string"
        CaptchaHeight="size"
        CaptchaLength="integer"
        CaptchaWidth="size"
        CssClass="string"
        ErrorMessage="string"
        Expiration="integer"
        Height="size"
        ID="string"
        Text="string"
        Width="size"
    />
    

    <CheckBox>

    <CheckBox
        CssClass="string"
        DataField="string"
        DataType="Boolean"
        Height="size"
        ID="string"
        Nullable="True|False"
        Style="string"
        TabIndex="integer"
        Text="string"
        TextAlign="Left|Right"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <CheckBoxList>

    <CheckBoxList
        AppendDataBoundItems="True|False"
        CssClass="string"
        DataField="string"
        DataSourceID="string"
        DataTextField="string"
        DataTextFormatString="string"
        DataType="string|int32|...."
        DataValueField="string"
        Height="size"
        ID="string"
        Nullable="True|False"
        RepeatColumns="integer"
        RepeatDirection="Horizontal|Vertical"
        RepeatLayout="Table|Flow"
        SelectedItemsSeparator="string||"
        Style="string"
        TabIndex="integer"
        TextAlign="Left|Right"
        ToolTip="string"
        Visible="True|False"
        Width="size">
    
        <ListItem Value="1">Item1</ListItem>
        <ListItem Value="2">Item2</ListItem>
        ...
    </CheckBoxList>
    

    <ContinueButton>

    <ContinueButton
        CssClass="string"
        Height="size"
        OnClientClick="string"
        Style="string"
        Text="string"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <ControlDataSource>

    <ControlDataSource
      CommandText="string"
      CommandType="StoredProcedure"
      ConnectionString="string"
      Id="string">
    
      Optionally add Parameter tags for any parameters you need to send to the database.
        <Parameter Name="string" Value="string" DataType="data type" />
        ...
    </ControlDataSource>
    

    <DateInput>

    <DateInput
        CssClass="string"
        Culture="locale id"
        DataField="string"
        DataType="datetime|date"
        DateOnly="True|False"
        Format="date/time formatting expression"
        Height="size"
        ID="string"
        Nullable="True|False"
        ReadOnly="True|False"
        Style="string"
        TabIndex="integer"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <DropDownList>

    <DropDownList
       AppendDataBoundItems="True|False"
       CssClass="string"
       DataField="string"
       DataSourceID="string"
       DataTextField="string"
       DataType="string|int32|...."
       DataValueField="string"
       Height="size"
       ID="string"
       Nullable="True|False"
       ParameterName="string"
       Style="string"
       TabIndex="integer"
       TargetControlId="string"
       TargetDataSourceId="string"
       ToolTip="string"
       Visible="True|False"
       Width="size" >
    
        <ListItem Value="1">Item1</ListItem>
        <ListItem Value="2">Item2</ListItem>
        ...
    </DropDownList>
    

    <FileUpload>

    <FileUpload
        ID="string"
        DataField="string"
        DataType="string"
        DisplayMode="FilePicker|FilePickerNoUpload|UploadAndSelect"
        Extensions="comma-delimited list of extensions"
        FileNameLabelCssClass="string|Normal"
        MessageLabelCssClass="string|Normal"
        NewFileButtonCssClass="string|CommandButton"
        NewFileButtonText="string|Upload File"
        Nullable="True|False"
        Path="string"
        UploadButtonCssClass="string|CommandButton"
        UploadButtonText="string|Upload"
        UseUniqueFileName="True|False"
        Visible="True|False"
    />
    

    <HtmlInput>

    <HtmlInput
        DataField="string"
        DataType="string"
        Height="size"
        ID="string"
        Nullable="True|False"
        Visible="True|False"
        Width="size"
    />
    

    <Label>

    <Label
        ID="string"
        For="string"
        Text="string"
        CssClass="string"
        Visible="True|False"
    />
    

    <ListBox>

    <ListBox
        AppendDataBoundItems="True|False"
        CssClass="string"
        DataField="string"
        DataSourceID="string"
        DataTextField="string"
        DataType="string|int32|...."
        DataValueField="string"
        Height="size"
        ID="string"
        Rows="integer"
        SelectedItemsSeparator="string||"
        SelectionMode="Single|Multiple"
        Style="string"
        TabIndex="integer"
        ToolTip="string"
        Visible="True|False"
        Width="size">
    
        <ListItem Value="1">Item1</ListItem>
        <ListItem Value="2">Item2</ListItem>
        ...
    </ListBox>
    

    <Panel>

    <Panel
        CssClass="string"
        Height="size"
        ID="string"
        ShowIf="Expression"
        ShowRoles="Role1Name,Role2Name"
        Style="string"
        Visible="True|False"
        Width="size"
        Wrap="True|False">
    
          ...HTML, Text, and Control Tags...
    
    </Panel>
    

    <Password>

    <Password
        CssClass="string"
        DataField="string"
        DataType="string|int32|int64|boolean|...."
        Height="size"
        ID="string"
        MaxLength="integer"
        Nullable="True|False"
        ReadOnly="True|False"
        Style="string"
        TabIndex="integer"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <RadioButtonList>

    <RadioButtonList
        AppendDataBoundItems="True|False"
        CssClass="string"
        DataSourceID="string"
        DataTextField="string"
        DataTextFormatString="string"
        DataValueField="string"
        Height="size"
        ID="string"
        Nullable="True|False"
        RepeatColumns="integer"
        RepeatDirection="Horizontal|Vertical"
        RepeatLayout="Table|Flow"
        Style="string"
        TabIndex="integer"
        ToolTip="string"
        Visible="True|False"
        Width="size">
    
        <ListItem value="1">Item1</ListItem >
        <ListItem value="2">Item2</ListItem >
        ...
    </RadioButtonList>
    

    <Textbox>

    <Textbox
        CssClass="string"
        DataField="string"
        DataType="string|int32|int64|boolean|...."
        HtmlEncode="True|False"
        ID="string"
        MaxLength="integer"
        Nullable="True|False"
        Placeholder="string"
        ReadOnly="True|False"
        Style="string"
        TabIndex="integer"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    />
    

    <Textarea>

    <Textarea
        Columns="integer"
        CssClass="string"
        DataField="string"
        DataType="string|int32|int64|boolean|...."
        Height="size"
        HtmlEncode="True|False"
        ID="string"
        MaxLength="integer"
        Nullable="True|False"
        ReadOnly="True|False"
        Rows="integer"
        Style="string"
        TabIndex="integer"
        ToolTip="string"
        Visible="True|False"
        Width="size"
        Wrap="True|False"
    />
    

    <UpdateButton>

    <UpdateButton
        CssClass="string"
        Height="size"
        OnClientClick="string"
        Style="string"
        TabIndex="integer"
        Text="string"
        ToolTip="string"
        Visible="True|False"
        Width="size"
    
        <Command ... />
    />
    

    Take a look at the XMod Pro official documentation on the <CommandButton> control. In Form.X, the <UpdateButton> supports the nested commands. This allows you to target your other templates by ID. For example, if you update a record in a table, Form.X does not take the liberty of refreshing your template. You do this by targetting the template via command tags. See the recipes section for examples.

    <Validate> (Checkbox)

    <Validate
      CssClass="string"
      Display="Static|Dynamic"
      Message="string"
      Target="string"
      Text="string"
      Type="Checkbox"
      Width="size"
    />
    

    <Validate> (CheckboxList)

    <Validate
      CssClass="string"
      Display="Static|Dynamic"
      Message="string"
      Target="string"
      Text="string"
      Type="CheckboxList"
      Width="size"
    />
    

    <Validate> (Compare)

    <Validate
      CompareTarget="string"
      CompareValue="string"
      CssClass="string"
      DataType="String|Integer|Double|Date|Currency"
      Display="Static|Dynamic"
      EnableClientScript="True|False"
      Height="size"
      Message="string"
      Operator="Equal|NotEqual|GreaterThan|GreaterThanEqual|LessThan|LessThanEqual|DataTypeCheck"
      Target="string"
      Text="string"
      Type="Compare"
      Width="size"
    />
    

    <Validate> (Email)

    <Validate
      CssClass="string"
      Display="Static|Dynamic"
      Message="string"
      Target="string"
      Text="string"
      Type="Email"
      Width="size"
    />
    

    <Validate> (Range)

    <Validate
      CssClass="string"
      DataType="String|Integer|Double|Date|Currency"
      Display="Static|Dynamic"
      EnableClientScript="True|False"
      Height="size"
      MaximumValue="string"
      Message="string"
      MinimumValue="string"
      Target="string"
      Text="string"
      Type="Range"
      Width="size"
    />
    

    <Validate> (Regular Expression)

    <Validate
      CssClass="string"
      Display="Static|Dynamic"
      EnableClientScript="True|False"
      Height="size"
      Message="string"
      Target="string"
      Text="string"
      Type="RegEx"
      ValidationExpression="string"
      Width="size"
    />
    

    <Validate> (Required)

    <Validate
      CssClass="string"
      Display="Static|Dynamic"
      EnableClientScript="True|False"
      Height="size"
      Message="string"
      Target="string"
      Text="string"
      Type="Required"
      Width="size"
    />
    

    <Validate> (Action)

    <Validate Type="Action" />
    

    This validator should be used in addition to the <ValidationSummary> control when you want to report form action errors back to the user. For example, when using the <AddUser> action, if the username they choose is invalid, you'll want to let them know about it in a friendly way.

    <ValidationSummary>

    <ValidationSummary
      CssClass="string"
      DisplayMode="List|BulletList|SingleParagraph"
      EnableClientScript="True|False"
      HeaderText="string"
      Height="size"
      Width="size"
    />
    

    Form Actions

    <Email>

    <Email
       To="comma-delimited list of email addresses"
       From="email address"
       CC="string"
       BCC="string"
       ReplyTo="string"
       Subject="string"
       Format="Text|Html">
        ...Text/HTML and {{FieldTokens}} to make up Body of the Email...
    </Email>
    

    <AddUser>

    <AddUser
        Approved="True|False"
        City="string"
        Country="string"
        DisplayName="string"
        Email="string"
        ErrMsgDuplicateEmail="string"
        ErrMsgDuplicateUser="string"
        ErrMsgDuplicateUsername="string"
        ErrMsgInvalidEmail="string"
        ErrMsgInvalidPassword="string"
        ErrMsgInvalidUsername="string"
        FirstName="string"
        LastName="string"
        Password="string"
        PostalCode="string"
        Region="string"
        RoleNames="comma-delimited list of DNN roles"
        Street="string"
        SendVerificationEmail="True|False"
        Telephone="string"
        Unit="string"
        UpdatePasswordOnNextLogin="True|False"
        Username="string">
          (NOTE: Property tags are optional)
          <Property Name="string" Value="string" />
          ...Additional Property Tags as needed...
    </AddUser>
    

    The token {{__UserId}} is passed down stream and available to other actions.

    <AddToRoles>

    <AddToRoles
        EndDate="date"
        RoleNames="comma-delimited list of DNN roles"
        StartDate="date"
        UserId="integer"
    />
    

    <UpdateUser>

    <UpdateUser
        Approved="True|False"
        City="string"
        Country="string"
        DisplayName="string"
        Email="string"
        ErrMsgUserNotFound="string"
        ErrMsgInvalidPassword="string"
        ErrMsgOther="string"
        FirstName="string"
        LastName="string"
        NewPassword="string"
        OldPassword="string"
        PostalCode="string"
        Region="string"
        Street="string"
        Telephone="string"
        Unit="string"
        UpdatePasswordOnNextLogin="True|False"
        UserId="integer">
          (NOTE: Property tags are optional)
          <Property Name="string" Value="string" />
          ...Additional Property Tags as needed...
    </UpdateUser>
    

    <SendPassword>

    <SendPassword
        Username="string"
        Email="string"
        CannotSend="string">
    </SendPassword>
    

    Initiates a password reset by sending an email to the requester. The core send password control within DNN takes care of the small details like determining whether or not to show the email field (e.g. Site requires a unique email address) or the username field. In the case of Form.X, you should check these internal settings yourself and be sure the form that you create is appropriate based on your site settings.

    Recipes

    Contact Form

    <xmod:Register TagPrefix="fx"
                   Namespace="Reflect.XModPro.Templates.FormX"
                   Assembly="Reflect.XModPro.Templates.FormX" />
    
    <xmod:Template Id="ContactUs" Ajax="True">
    
      <DetailDataSource CommandText="SELECT 1" />
    
      <DetailTemplate>
    
        <fx:FormX Mode="Add">
    
          <addform>
    
            <div class="form-group">
              <label for="Firstname">First name</label>
              <Textbox Id="Firstname" Datafield="Firstname" Datatype="String" CssClass="form-control" />
            </div>
    
            <div class="form-group">
              <label for="Lastname">Last name</label>
              <Textbox Id="Lastname" Datafield="Lastname" Datatype="String" CssClass="form-control" />
            </div>
    
            <div class="form-group">
              <label for="Comments">Comments</label>
              <Textbox Id="Comments" Datafield="Comments" CssClass="form-control" />
            </div>
    
            <AddButton Text="Send Message" CssClass="btn btn-primary" />
    
            <Email To="email@change.me" From="email@change.me" Subject="Message from {{Firstname}}" Format="Text">
              Hello. You got a message:
    
              Name: {{Firstname}}
              Last Name: {{Lastname}}
              Comments: {{Comments}}
            </Email>
    
          </addform>
          <addsuccesstemplate>
    
            <div class="alert alert-success">
              <p>
                Thanks, {{Firstname}}! We'll get back to you ASAP!
              </p>
            </div>
    
            <ContinueButton Text="Continue" CssClass="btn btn-default" />
    
          </addsuccesstemplate>
        </fx:FormX>
    
      </DetailTemplate>
    
    </xmod:Template>
    

    Registration Form

    <xmod:Register TagPrefix="fx"
                   Namespace="Reflect.XModPro.Templates.FormX"
                   Assembly="Reflect.XModPro.Templates.FormX" />
    
    <xmod:Template Ajax="True">
      <DetailDataSource CommandText="SELECT 1"/>
    
      <DetailTemplate>
    
    
        <fx:FormX Mode="Add">
    
              <addform>
    
                <div class="form">
                  <div class="form-group">
                    <label for="Firstname">First name</label>
                    <Textbox Id="Firstname" Datafield="Firstname" Datatype="String" CssClass="form-control" />
                  </div>
    
                  <div class="form-group">
                    <label for="Lastname">Last name</label>
                    <Textbox Id="Lastname" Datafield="Lastname" Datatype="String" CssClass="form-control" />
                  </div>
    
                  <div class="form-group">
                    <label for="Email">Email</label>
                    <Textbox Id="Email" Datafield="Email" Datatype="String" CssClass="form-control" />
                  </div>
    
                  <div class="form-group">
                    <label for="Username">Username</label>
                    <Textbox Id="Username" Datafield="Username" Datatype="String" CssClass="form-control" />
                  </div>
    
                   <div class="form-group">
                    <label for="Password">Password</label>
                    <Password Id="Password" Datafield="Password" Datatype="String" CssClass="form-control" />
                  </div>
    
    
                  <ValidationSummary />
                  <Validate Type="Action" />
    
                  <AddButton Text="Register" CssClass="btn btn-primary" />
    
                  <AddUser
                           Approved="True"
                           Email="{{Email}}"
                           FirstName="{{FirstName}}"
                           LastName="{{LastName}}"
                           Password="{{Password}}"
                           RoleNames="Registered Users"
                           Username="{{Username}}">
    
                  </AddUser>
    
                </div>
    
              </addform>
              <addsuccesstemplate>
                <div class="alert alert-success">
                    Success
                </div>
    
                <ContinueButton Text="Continue" CssClass="btn btn-default" />
              </addsuccesstemplate>
            </fx:FormX>
    
      </DetailTemplate>
    </xmod:Template>
    

    User Management

    <xmod:Register TagPrefix="fx"
                   Namespace="Reflect.XModPro.Templates.FormX"
                   Assembly="Reflect.XModPro.Templates.FormX" />
    
    <xmod:Template UsePaging="True" Ajax="True">
      <ListDataSource CommandText="SELECT [UserId], [PortalId], [Username], [FirstName], [LastName] FROM vw_Users"/>
      <DetailDataSource CommandText="SELECT [UserId], [PortalId], [Username], [FirstName], [LastName], [DisplayName], [IsSuperUser], [Email], [VanityUrl], [AffiliateId], [IsDeleted], [RefreshRoles], [LastIPAddress], [UpdatePassword], [PasswordResetToken], [PasswordResetExpiration], [Authorised], [CreatedByUserId], [CreatedOnDate], [LastModifiedByUserId], [LastModifiedOnDate] FROM vw_Users WHERE [UserId] = @UserId">
        <Parameter Name="UserId" />
      </DetailDataSource>
      <HeaderTemplate>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>User Id</th>
              <th>Portal Id</th>
              <th>Username</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tbody>
      </HeaderTemplate>
      <ItemTemplate>
            <tr>
              <td>[[UserId]]</td>
              <td>[[PortalId]]</td>
              <td>[[Username]]</td>
              <td>[[FirstName]]</td>
              <td>[[LastName]]</td>
              <td>
                <xmod:DetailLink Text="Details">
                  <Parameter Name="UserId" Value='[[UserId]]' />
                </xmod:DetailLink>
              </td>
            </tr>
      </ItemTemplate>
      <FooterTemplate>
          </tbody>
        </table>
      </FooterTemplate>
    
      <DetailTemplate>
    
        <fx:FormX>
            <template>
    
            <strong>UserId</strong> [[UserId]]<br />
            <strong>Username</strong> [[Username]]<br />
            <strong>FirstName</strong> [[FirstName]]<br />
            <strong>LastName</strong> [[LastName]]<br />
            <strong>DisplayName</strong> [[DisplayName]]<br />
            <strong>Email</strong> [[Email]]<br />
    
            <fx:EditButton CssClass="btn btn-primary" Text="Edit">
              <Parameter Name="UserId" Value='[[UserId]]' DataType="Int32" />
            </fx:EditButton>
    
            <xmod:ReturnLink CssClass="dnnSecondaryAction" Text="&lt;&lt; Return" />
    
          </template>
    
          <editform>
    
            <SelectCommand CommandText="SELECT * FROM vw_Users WHERE UserID = @UserId" />
    
            <div class="form">
              <div class="form-group">
                <label for="Firstname">First name</label>
                <Textbox Id="Firstname" Datafield="Firstname" Datatype="String" CssClass="form-control" />
              </div>
    
              <div class="form-group">
                <label for="Lastname">Last name</label>
                <Textbox Id="Lastname" Datafield="Lastname" Datatype="String" CssClass="form-control" />
              </div>
    
              <div class="form-group">
                <label for="Email">Email</label>
                <Textbox Id="Email" Datafield="Email" Datatype="String" CssClass="form-control" />
              </div>
    
              <div class="form-group">
                <label for="Telephone">Telephone</label>
                <Textbox Id="Telephone" Datafield="Telephone" Datatype="String" CssClass="form-control" />
              </div>
    
              <div class="form-group">
                <label for="NewPassword">New Password</label>
                <Password Id="NewPassword" Datafield="NewPassword" Datatype="String" CssClass="form-control" />
              </div>
    
              <div class="form-group">
                <label for="OldPassword">Old Password</label>
                <Password Id="OldPassword" Datafield="OldPassword" Datatype="String" CssClass="form-control" />
              </div>
    
              <Textbox Id="UserId" Datafield="UserId" DataType="Int32" Visible="False" />
    
    
              <ValidationSummary />
              <Validate Type="Action" />
    
              <UpdateButton Text="Update User" CssClass="btn btn-primary" />
    
              <UpdateUser
                       UserId="{{UserId}}"
                       Approved="True"
                       Email="{{Email}}"
                       FirstName="{{FirstName}}"
                       LastName="{{LastName}}"
                       NewPassword="{{NewPassword}}"
                       OldPassword="{{OldPassword}}"
                       Telephone="{{Telephone}}">
                <Property Name="Telephone" Value="{{Telephone}}" />
              </UpdateUser>
    
            </div>
    
            <CancelButton CssClass="btn btn-default" Text="Cancel" />
    
          </editform>
          <editsuccesstemplate>
    
            <div class="alert alert-success">
              Success!
            </div>
            <ContinueButton Text="Continue">
              <Command Type="Detail">
                <Parameter Name="UserId" Value="{{UserId}}" DataType="Int32" />
              </Command>
            </ContinueButton>
          </editsuccesstemplate>
    
    
        </fx:FormX>
    
    
    
    
      </DetailTemplate>
    </xmod:Template>
    

    Inline Editing

    <xmod:Register TagPrefix="fx" Namespace="Reflect.XModPro.Templates.FormX" Assembly="Reflect.XModPro.Templates.FormX" />
    
    <xmod:Template id="Contacts" Ajax="True">
      <ListDataSource CommandText="SELECT *, (SELECT Text FROM dbo.Lists WHERE EntryId = c.Country) AS CountryText FROM dbo.XMP_Contact c ORDER BY ID" />
      <DeleteCommand CommandText="DELETE FROM dbo.XMP_Contact WHERE ID = @ID">
        <Parameter Name="ID" />
      </DeleteCommand>
    
      <SearchSort FilterExpression="Firstname LIKE '%{0}%'" />
    
      <HeaderTemplate>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Country</th>
              <th>State</th>
              <th>Favorite</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
      </HeaderTemplate>
    
      <ItemTemplate>
        <tr>
    
          <fx:FormX Mode="Template" EditRoles="Registered Users" AddRoles="Registered Users">
            <Template>
    
              <td>[[ID]]</td>
              <td>[[Firstname]]</td>
              <td>[[Lastname]]</td>
              <td>[[CountryText]]</td>
              <td>[[State]]</td>
              <td>[[Favorite]]</td>
              <td style="width: 1%; white-space: nowrap">
                <fx:EditButton Text="Edit" CssClass="btn btn-default btn-xs">
                  <Parameter Name="ID" Value='[[ID]]' DataType="Int32" />
                </fx:EditButton>
                <xmod:DeleteButton Text="Delete" CssClass="btn btn-danger btn-xs">
                  <Parameter Name="ID" Value='[[ID]]' DataType="Int32" />
                </xmod:DeleteButton>
              </td>
            </Template>
            <EditForm>
    
              <SelectCommand CommandText="dbo.XMP_GetContact" CommandType="StoredProcedure">
                <Parameter Name="ID" />
              </SelectCommand>
    
              <SubmitCommand CommandText="UPDATE dbo.XMP_Contact SET Firstname=@Firstname, Lastname=@Lastname, State=@State, Country=@Country, Favorite=@Favorite WHERE ID = @ID" />
    
              <ControlDataSource Id="cds_Countries" CommandText="SELECT Text, EntryID FROM Lists WHERE ListName='Country' ORDER BY Text" />
              <ControlDataSource id="cds_Regions" CommandText="SELECT Text, Value FROM Lists WHERE ParentID=@ParentID" >
                <Parameter Name="ParentID" />
              </ControlDataSource>
    
              <td>[[ID]]</td>
              <td><Textbox Id="Firstname" Datafield="Firstname" Datatype="String" CssClass="form-control" /><Validate Type="Required" Target="Firstname" Text="* Required" Message="First name is required" EnableClientScript="False" /></td>
              <td><Textbox Id="Lastname" Datafield="Lastname" Datatype="String" CssClass="form-control" /></td>
              <td>
                <DropdownList Id="Country" DataField="Country" DataType="string" DataTextField="Text" DataValueField="EntryID" DataSourceId="cds_Countries" TargetDataSourceId="cds_Regions" ParameterName="ParentID" TargetControlId="State" AppendDataBoundItems="True" CssClass="form-control">
                  <ListItem Value="">Select</ListItem>
                </DropdownList>
              </td>
              <td>
                <DropdownList Id="State" DataField="State" DataType="string" DataTextField="Text" DataValueField="Value" DataSourceId="cds_Regions" AppendDataBoundItems="True" CssClass="form-control">
                  <ListItem Value="">Select</ListItem>
                </DropdownList>
              </td>
              <td>
                <Checkbox Id="Favorite" Datafield="Favorite" Datatype="Boolean" Nullable="False" />
              </td>
              <td style="width: 1%; white-space: nowrap">
                <UpdateButton Text="Save" CssClass="btn btn-default btn-xs">
                  <Command Type="List" />
                </UpdateButton>
                <CancelButton Text="Cancel" CssClass="btn btn-default btn-xs" />
              </td>
              <Textbox Id="ID" Datafield="ID" DataType="Int32" Visible="False" />
            </EditForm>
    
          </fx:FormX>
    
        </tr>
      </ItemTemplate>
    
      <FooterTemplate>
        </tbody></table>
      </FooterTemplate>
    </xmod:template>
    

    This example demonstrates how you can embed Form.X within an <ItemTemplate>, allowing you to edit items without a page refresh.

    Inline Editing (Retain Pagination)

    <xmod:Register TagPrefix="fx"
                   Namespace="Reflect.XModPro.Templates.FormX"
                   Assembly="Reflect.XModPro.Templates.FormX" />
    
    
    <xmod:Template id="Contacts" Ajax="True">
      <ListDataSource CommandText="SELECT *, (SELECT Text FROM dbo.Lists WHERE EntryId = c.Country) AS CountryText FROM dbo.XMP_Contact c ORDER BY ID" />
      <DeleteCommand CommandText="DELETE FROM dbo.XMP_Contact WHERE ID = @ID">
        <Parameter Name="ID" />
      </DeleteCommand>
    
      <SearchSort FilterExpression="Firstname LIKE '%{0}%'" />
    
      <CustomCommands>
        <DataCommand CommandName="UpdateContact" CommandText="UPDATE dbo.XMP_Contact SET Firstname=@Firstname, Lastname=@Lastname, State=@State, Country=@Country, Favorite=@Favorite WHERE ID = @ID" />
      </CustomCommands>
    
      <HeaderTemplate>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Country</th>
              <th>State</th>
              <th>Favorite</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
          </HeaderTemplate>
    
        <ItemTemplate>
          <tr>
    
            <fx:FormX Mode="Template">
              <Template>
    
                <td>[[ID]]</td>
                <td>[[Firstname]]</td>
                <td>[[Lastname]]</td>
                <td>[[CountryText]]</td>
                <td>[[State]]</td>
                <td>[[Favorite]]</td>
                <td style="width: 1%; white-space: nowrap">
                  <fx:EditButton Text="Edit" CssClass="btn btn-default btn-xs">
                    <Parameter Name="ID" Value='[[ID]]' DataType="Int32" />
                  </fx:EditButton>
    
                  <xmod:DeleteButton Text="Delete" CssClass="btn btn-danger btn-xs">
                    <Parameter Name="ID" Value='[[ID]]' DataType="Int32" />
                  </xmod:DeleteButton>
    
                </td>
              </Template>
              <EditForm>
    
                <SelectCommand CommandText="dbo.XMP_GetContact" CommandType="StoredProcedure">
                  <Parameter Name="ID" />
                </SelectCommand>
    
                <ControlDataSource Id="cds_Countries" CommandText="SELECT Text, EntryID FROM Lists WHERE ListName='Country' ORDER BY Text" />
                <ControlDataSource id="cds_Regions" CommandText="SELECT Text, Value FROM Lists WHERE ParentID=@ParentID" >
                  <Parameter Name="ParentID" />
                </ControlDataSource>
    
    
                <td>[[ID]]</td>
                <td><Textbox Id="Firstname" Datafield="Firstname" Datatype="String" CssClass="form-control" /><Validate Type="Required" Target="Firstname" Text="* Required" Message="First name is required" EnableClientScript="False" /></td>
                <td><Textbox Id="Lastname" Datafield="Lastname" Datatype="String" CssClass="form-control" /></td>
                <td>
                  <DropdownList Id="Country" DataField="Country" DataType="string" DataTextField="Text" DataValueField="EntryID" DataSourceId="cds_Countries" TargetDataSourceId="cds_Regions" ParameterName="ParentID" TargetControlId="State" AppendDataBoundItems="True" CssClass="form-control">
                    <ListItem Value="">Select</ListItem>
                  </DropdownList>
                </td>
                <td>
                  <DropdownList Id="State" DataField="State" DataType="string" DataTextField="Text" DataValueField="Value" DataSourceId="cds_Regions" AppendDataBoundItems="True" CssClass="form-control">
                    <ListItem Value="">Select</ListItem>
                  </DropdownList>
                </td>
                <td>
                  <Checkbox Id="Favorite" Datafield="Favorite" Datatype="Boolean" Nullable="False" />
                </td>
                <td style="width: 1%; white-space: nowrap">
                  <ValidationSummary />
                  <Validate Type="Select" />
                  <UpdateButton Text="Save" CssClass="btn btn-default btn-xs">
                    <Command Type="Custom" Name="UpdateContact">
                      <Parameter Name="ID" Value="{{ID}}" DataType="Int32" />
                      <Parameter Name="Firstname" Value="{{Firstname}}" />
                      <Parameter Name="Lastname" Value="{{Lastname}}" />
                      <Parameter Name="Country" Value="{{Country}}" />
                      <Parameter Name="State" Value="{{State}}" />
                      <Parameter Name="Favorite" Value="{{Favorite}}" />
                    </Command>
                  </UpdateButton>
                  <CancelButton Text="Cancel" CssClass="btn btn-default btn-xs" />
                </td>
    
    
                <Textbox Id="ID" Datafield="ID" DataType="Int32" Visible="False" />
    
              </EditForm>
            </fx:FormX>
          </tr>
    
        </ItemTemplate>
    
        <FooterTemplate>
          </tbody>
        </table>
    
        </FooterTemplate>
    
    
    </xmod:template>
    

    This example demonstrates how you can embed Form.X within an <ItemTemplate>, allowing you to edit items without a page refresh. The difference between this example and the inline editing example is the pagination. When you target a template (i.e. <Command Type="List" Target="TemplateId" />) it causes the template to rebind its data. However, if you have a large set of data and want to retain pagination, you can use a custom command structure instead of a <SubmitCommand>.

    Release Notes

    Version 1.2.3

    New Features

    Bug Fixes

    Version 1.2.2

    New Features

    Version 1.2.1

    New Features

    Bug Fixes

    Version 1.1.0

    New Features

    Bug Fixes

    Version 1.0.0

    Released on 10/22/2018

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .

    .